es6新增关键字class,代表类,其实相当于代替了es5的构造函数
通过构造函数可以创建一个对象实例,那么通过class也可以创建一个对象实列
/* es5 创建一个person 构造函数 */ function person (name,age) { this.name = name this.age = age } /* 定义原型链上的方法sayholle */ /* 为什么要将方法定义在原型上,定义在原型上的方法,所有的实例对象都共享 不会出现没实列一个对象都重新创建一个这个方法 */ person.prototype.sayholle = function () { console.log(this.name+' holle'+ this.age) } let person1 = new person('czcz','23') person1.sayholle() // czcz holle23 /* es6 使用class创建一个对象 */ class personclass { /* 实列对象时默认调用的方法 */ constructor (name,age) { this.name = name this.age = age } /* 定义一个方法,相对构造上述原型链上的方法 */ sayholle () { console.log(this.name+' holle'+ this.age) } } let person2 = new personclass('czcz','26') person2.sayholle() // czcz holle23
es5中继承的方式
1原型链继承
/* es5原型链继承 */ function person (name,age) { this.name = name this.age = age } person.prototype.sayholle = function () { console.log(this.name+' holle'+ this.age) } function child (sex) { this.sex = sex; } child.prototype = new person(); child.prototype.hh = 'ddd' let p = new child('man') console.log(p) // console.log(new person()); let p2 = new child('man') p2.__proto__.age = '36' /* 给p2原型上的age赋值,则导致p上的age也改变,父类构造函数上的属性被所有子类共享 */ console.log(p) // 36 /* 缺点,child 新增的属性只能在new person 以后,创建实列时无法向 父类的构造函数传送参数,因为直接是指定了原型,所有也不能实现多继承 父类构造函数上的属性被所有子类共享 */
2.构造函数继承
/* es5构造函数继承 */ function person (name,age) { this.name = name this.age = age } person.prototype.sayholle = function () { console.log(this.name+' holle'+ this.age) } function child (sex,name,age) { this.sex = sex person.call(this,name,age) } let p = new child('man','czklove','13') console.log(p); /* 可以是先多继承,只要执行多个call 创建实列时能像父类构造函数船体参数 不会出现父类属性,所有子类构造函数共享 缺点, 不能继承父类原型链上的方法,如上面不能掉用sayholle方法 子类构造函数的实列,原型链上并不存在父类构造函数, 因为不能继承父类原型链上的函数,所有要继承函数只能定义在父类构造函数上, 不能达到函数复用 */
3.组合继承,融合了上面两种方式
/* es5组合继承 */ function person (name,age) { this.name = name this.age = age } person.prototype.sayholle = function () { console.log(this.name+' holle'+ this.age) } function child (sex,name,age) { this.sex = sex person.call(this,name,age) } child.prototype = new person(); /* 重新设置一下constructor 不设置也没有影响,严谨的角度上来说还是设置一下*/ /* 不设置的话,__proto__ 上时没有 constructor */ /* 正常来讲constructor是指向自身的 */ child.prototype.constructor = child; let p = new child('man','czklove','13') let p1 = new child('man','czklove1','16') p.sayholle(); // czklove holle13 console.log(p);
/*
组合继承,既能达到对父类属性的继承,也能继承父类原型上的方法
父类属性继承也不会在所有子类的实列上共享
唯一缺点,子类原型上有父类构造函数的属性,也就是多了一份属性
*/
console.log(p.__proto__ === child.prototype) //true
4.优化版的组合继承(寄生组合继承)
/* es5寄生组合继承 */ function person (name,age) { this.name = name this.age = age } person.prototype.sayholle = function () { console.log(this.name+' holle'+ this.age) } function child (sex,name,age) { this.sex = sex person.call(this,name,age) } child.prototype = Object.create(person.pr