三.class定义类
<script>
// ES6之前,定义类型的方式
function Student(name,age,sex){
//定义属性
this.name = name
this.age = age
this.sex = sex
//定义方法
this.sayHi = function(){
console.log(`我是学生,姓名是${this.name},年龄${this.age}岁,性别是${this.sex}`);
}
}
let s1 = new Student('张三',20,'男')
s1.sayHi()
// 从ES6以后,添加了class关键字,定义类型
// 注意:该语法的兼容性不高,ie9以下都不支持,部分其他低版本的浏览器也存在兼容性问题。
class Teacher{
//构造函数(通过构造函数,给属性赋值)
constructor(name,age,sex){
this.name = name
this.age = age
this.sex = sex
}
//定义方法 (将方法定义在类身上)
sayHi = function(){
console.log(`我是老师,姓名是${this.name},年龄${this.age}岁,性别是${this.sex}`);
}
//(将方法定义在原型对象上)
sayHello(){
console.log(`Hello,姓名是${this.name},年龄${this.age}岁,性别是${this.sex}`);
}
}
let t1 = new Teacher('李四',22,'女')
console.log(t1);
t1.sayHi()
t1.sayHello()
</script>
四.继承
<script>
//定义动物类
function Animal(nickName,sex,age){
//定义动物的属性
this.nickName = nickName
this.sex = sex
this.age = age
}
//定义动物的方法
Animal.prototype.sayHi = function(){
console.log(`Hi!我叫${this.nickName},今年${this.age}岁,我是${this.sex}`);
}
Animal.prototype.eat = function(str){
console.log(`我喜欢吃${str}`);
}
Animal.prototype.sleep = function(time){
console.log(`我每天睡${time}个小时`);
}
//创建一个动物对象
let a1 = new Animal('佩奇','女生',6)
a1.sayHi()
a1.eat('冰淇淋')
a1.sleep(20)
console.log('---------------------------------');
//定义一个狗狗类
function Dog(nickName,sex,age,type){
//继承Animal的属性
Animal.call(this,nickName,sex,age)
//狗狗特有的属性
this.type = type
}
// 继承Animal的方法
// 将Dog类的原型对象改成一个Animal对象
Dog.prototype = new Animal()
//狗狗特有的方法
Dog.prototype.play = function(){
console.log(`我一只${this.type},我会玩飞盘`);
}
// 创建一个狗狗对象
let d1 = new Dog('旺财','男生',4,'哈士奇')
d1.sayHi()
d1.eat('菲力牛排')
d1.sleep(9)
d1.play()
console.log('---------------------------------');
//定义一个猫咪类
function Cat(nickName,sex,age,color){
//继承Animal的属性
Animal.call(this,nickName,sex,age)
//猫咪特有的属性
this.color = color;
}
// 继承Animal的方法
Cat.prototype = new Animal()
// 猫咪特有额方法
Cat.prototype.pashu = function(){
console.log(`我是一只${this.color}猫,我会爬树`);
}
let c1 = new Cat('琪琪','女生',2,'白')
c1.sayHi()
c1.eat('新鲜的蓝鳍金枪鱼')
c1.sleep(10)
c1.pashu()
</script>
五.补充ES6的继承方式
script>
// 定义动物类
class Animal{
// 定义动物类的构造函数
constructor(nickName,sex,age){
// 利用构造函数给动物的属性赋值
this.nickName = nickName
this.sex = sex
this.age = age
}
// 定义方法,并将方法添加到原型上
sayHi(){
console.log(`Hi!我叫${this.nickName},今年${this.age}岁,我是${this.sex}`);
}
eat(str){
console.log(`我喜欢吃${str}`);
}
sleep(time){
console.log(`我每天睡${time}个小时`);
}
}
// 创建一个动物对象
let a1 = new Animal('佩奇','女生',6)
a1.sayHi()
a1.eat('蛋糕')
a1.sleep(12)
console.log('-----------------------------------------');
// 定义狗狗类
// class关键字,定义类;extends关键字继承类,
// 采用这种方式,Animal的方法,此刻已经全部继承过来了。
class Dog extends Animal{
constructor(nickName,sex,age,type){
//调用父类的构造函数,而且必须放在子类构造函数的最上方
super(nickName,sex,age)
this.type = type
}
play(){
console.log(`我一只${this.type},我会玩飞盘`);
}
}
let d1 = new Dog('旺财','男生',6,'拉布拉多')
d1.sayHi()
d1.eat('牛肉')
d1.sleep(8)
d1.play()
</script>