【基础认知】
1、构造器中的this指向——类的实例对象
2、类中的构造器不是必须写的，要对实例进行一些初始化的操作，如添加指定属性时才写。
3、如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super时必须要调用的。
4、类中锁定的方法，都是放在了类的原型对象上，供实例去使用
class类的基础使用
（静态属性，只能构造函数访问）
（公有属性，写在构造函数.prototype）
(实例属性，定义在实例对象this上的属性)
// 手机 // 实例成员只能通过实例化对象来访问 // function Phone(brand, price) { // this.brand = brand // this.price = price // } // 添加方法 // Phone.prototype.call = function () { // console.log('我可以打电话！！') // } // 实例化对象 // let Huawei = new Phone('华为', 5999); // Huawei.call(); // console.log(Huawei); class Phone { // 构造方法 名字不能修改 constructor(brand, prive) { this.brand = brand; this.price = prive; } // 方法必须使用该语法，不能使用ES5的对象完整形式 call() { console.log('我可以打电话！！！') } } let onePlus = new Phone('1+', 1999) onePlus.call() console.log(onePlus)
class静态成员
function Phone() { } // 静态成员，属于类不属于实例对象 // 静态成员只能通过构造函数来访问 Phone.name = '手机' Phone.change = function () { console.log('我可以改变世界') } Phone.prototype.size = '5.5inch' let nokia = new Phone() console.log(nokia.size) //5.5inch console.log(nokia.name) // undefined nokia.change() // 报错说不是一个函数 class Phone1 { // 静态属性 static name = '手机'; static change() { console.log('我可以改变世界') } } let aaa = new Phone1(); console.log(Phone1.name) //手机 console.log(aaa.name) // undefined
构造函数继承
// 手机 function Phone(brand, price) { this.brand = brand this.price = price } Phone.prototype.call = function () { console.log('我可以打电话') } // 智能手机 function SmartPhone(brand, price, color, size) { Phone.call(this, brand, price); this.color = color this.size = size } // 设置子集构造函数的原型 SmartPhone.prototype = new Phone; SmartPhone.prototype.constructor = SmartPhone; // 声明子类的方法 SmartPhone.prototype.photo = function () { console.log('我可以拍照') } SmartPhone.prototype.playGame = function () { console.log('我可以玩游戏') } const chuizi = new SmartPhone('锤子', 2499, '黑色', '5.5inch'); console.log(chuizi) chuizi.photo() chuizi.playGame()
类的函数继承
// 手机 class Phone { constructor(brand, price) { this.brand = brand; this.price = price; } call() { console.log('我可以电话') } } // 智能手机 class SmartPhone extends Phone { constructor(brand, price, color, size) { //super之前调用this会报错 super(brand, price); this.color = color; this.size = size; } photo() { console.log('我可以拍照') } palyGame() { console.log('我可以玩游戏') } } let chuizi = new SmartPhone('锤子', 2999, '黑色', '5.5inch') console.log(chuizi) chuizi.call() //容易出错的地方 忘记写extends， 构造函数中的形参， super()
super 这个关键字，既可以当作函数使用，也可以当作对象使用。在这两种情况下，它的用法完全不同。
函数：
子类B的构造函数之中的super()，代表调用父类的构造函数。 super虽然代表了父类A的构造函数，但是返回的是子类B的实例，即super内部的this指的是B，因此super()在这里相当于A.prototype.constructor.call(this)。
对象：
在普通方法中，指向父类的原型对象；在静态方法中，指向父类。由于super指向父类的原型对象，所以定义在父类实例上的方法或属性，是无法通过super调用的。
class 作为构造函数的语法糖，同时有 prototype属性和__proto__属性，因此同时存在两条继承链。
类的get 和set
// get 和 set class Phone { get price() { console.log('价格属性被读取了'); return 'iloveyou' } set prive(newVal) { // 必须要设置一个参数，不然报错 console.log('价格属性被修改了') } } // 实例化对象 let s = new Phone(); // console.log(s.price) s.prive = 'free' // 类似于vue的watch和computed
