类与继承
1.先了解(是啥?)
-
什么是类?
es6新语法: 本质上就是构造函数的语法糖写法(简写形式)
-
类的作用?
创建对象
-
如何使用类?
如何使用类创建对象
// ☞ 先定义一个类 (定义了一个构造函数)
// 语法: class 自定义类名 {}
// ☞ 通过类创建对象
// 语法: let 对象名 = new 类名();
// 代码演示
// 创建类
class People {}
// 通过类创建对象
let zs = new People();
console.log(zs);
2.如何设置属性和方法
-
构造函数如何设置属性和方法
//代码演示 function fn() { //设置属性 this.属性 = 值; } //将方法设置给原型对象 构造函数.prototype.方法名 = function() {}
-
类如何设置属性和方法
// ☞ 类中设置属性 通过constructor设置属性 // ☞ 类中设置方法 和constructor并列设置即可 // 代码演示: class People { //要将属性通过constructor设置 constructor(uname, uage) { this.uname = uname; this.age = uage; } // 方法, 本质上将方法添加到原型对象身上 eat() { console.log('吃饭方法'); } sing() { console.log('唱歌'); } } // 通过类创建对象 let zs = new People('张三', 23); zs.eat(); //吃饭方法 zs.sing(); //唱歌 console.log(zs.uname); //张三
3.属性和方法的继承
-
为什么要用到继承(目的是啥?)
减少代码量
-
构造函数中属性和方法的继承
//属性继承 (本质是用了call()方法)
function Father(uname, age, myheight, gender) {
this.uname = uname;
this.age = age;
this.myheight = myheight;
this.gender = gender;
}
// 通过 Father构造函数创建的实例对象身上具有了以上属性
function Son(uname, age, myheight, gender) {
// 调用Father构造函数, 修改Father中的this指向, 指向当前Son创建的实例对象
// 给Son这个构造函数设置了相关的属性
// Father.call(Son, uname, age, myheight, gender);
// 给当前实例对象设置的属性
Father.call(this, uname, age, myheight, gender);
}
// 通过 Son构造函数创建的实例对象身上也有以上属性
let zs = new Son('zs', 18, 180, '男');
console.log(zs);
console.dir(Son);
//方法继承 (本质是原型继承)
function F(uname) {
this.uname = uname;
}
// 通过原型对象设置方法
F.prototype.eat = function() {
console.log('吃饭...');
}
let zs = new F('张三');
// zs 实例对象身上有 __proto__ 指向了原型对象
zs.eat(); //吃饭...
// 方法继承: 原型继承
function S() {
this.uname = '李四';
}
// 原型继承(方法继承)
S.prototype = new F();
let ls = new S();
ls.eat(); //吃饭...
-
类中属性和方法的继承
// 实现子类继承父类中的属性和方法
// 语法: 子类 extends 父类 {}
// 代码演示:
class F {
constructor() {
this.uname = 'zs';
}
eat() {
console.log('父类中的吃饭方法');
}
}
// 子类继承父类
class S extends F {
eat() {
console.log('我是子类中的eat方法');
}
}
// 创建一个子类对象
let zs = new S();
zs.eat(); //我是子类中的eat方法 (如果有相同的方法名采用就近原则)
console.log(zs.uname); //zs
// super()
// 作用: 类的继承过中用来实现调用父类中constructor
// 什么时候用: 如果子类继承父类,且子类中还有自己的constructor(构造函数),必须使用super
// 代码演示:
class Father {
constructor(uname, uage, ugender) {
this.uname = uname;
this.uage = uage;
this.ugender = ugender;
}
eat() {
console.log('父类中的吃饭...');
}
}
class Son extends Father{
// 如果子类中有自己的属性,则必须设置constructor
constructor(uname, uage, ugender, score) {
// 调用父类中的constructor
super(uname, uage, ugender);
this.score = score;
}
eat() {
console.log('子类中的吃饭...');
}
}
let zs = new Son('张三', 18, '男', 100);
zs.eat(); //子类中的吃饭...
console.log(zs);
4.总结
// 类的作用: 创建对象 (可以使用类也可以使用构造函数)
// 类的定义: class 类名 {}
// 类中设置属性和方法:
// class 类名 {
// constructor(形参1, 形参2) {
// this.属性 = 值;
// }
// //方法
// eat1() {}
// eat2() {}
// }
// 创建对象: let 对象名 = new 类名(实参1, 实参2);
// 类的继承: 类名1 extends 类名2 {}
// 注意事项:
// 1. 如果子类中没有constructor,则在继承的时候,可以直接使用父类中的属性
// 2. 如果子类中有constructor,则在继承的时候, 在子类constructor中,this前面加 super()
// 3. super()的作用是用来调用父类中的constructor
// 4. 在类中方法与方法之间访问或者方法与属性访问,必须前面加this