继承的理解,复用父类的属性和方法并增加新的属性和方法
目录
父类构造函数的实例赋值给子类原型
- function Parent(age){
- this.age=age
- this.color=['green']
- }
-
- function Child(){
-
- }
- Child.prototype=new Parent()
- let child = new Child()
- let child1 = new Child()
- child.color.push('red')
- console.log(child.color,child1.color)//两个输出都是['green', 'red']
子类通过call调用父类的构造函数,解决原型链继承的两个问题,其一是共享父类引用类型的属性,其二是子类不能向父类传参
但是带来问题是每创建一个实例都会执行一次父类构造函数,相当于把父类的实例属性复制给子类
不能复用,并且不能继承原型链上属性和方法
- function Parent(age){
- this.age=age
- this.color=['green']
- }
-
- function Child(age){
- Parent.call(this,age)
- }
- Child.prototype=new Parent()
- let child = new Child()
- let child1 = new Child()
- child.color.push('red')
- console.log(child.color,child1.color)//第一个输出是['green', 'red'],第二个输出是green
结合构造函数继承来 继承实例属性和方法,利用 原型链继承 继承原型链属性和方法
- function Parent(age) {
- this.age = age;
- this.color = ['green'];
- }
-
- function Son(age) {
- Parent.call(this, age); // 借用构造函数继承实例属性
- }
-
- // 使用 Object.create 优化原型链继承
- Son.prototype = new Parent()
- Son.prototype.constructor = Son;
-
- // 进一步添加原型方法,以验证继承效果
- Parent.prototype.sayAge = function () {
- console.log(this.age);
- };
-
- Son.prototype.sayHello = function () {
- console.log('Hello');
- };
-
- // 测试代码
- let son1 = new Son(10);
- let son2 = new Son(20);
-
- son1.color.push('red');
-
- console.log(son1.color); // ['green', 'red']
- console.log(son2.color); // ['green']
-
- son1.sayAge(); // 10
- son2.sayAge(); // 20
-
- son1.sayHello(); // Hello
- son2.sayHello(); // Hello
利用es5里的object.create,就是 通过已有对象创建新对象,让新对象原型链指向已有对象
通过已有的对象作为新对象的原型,生成一个新的对象实例
选择性修改新对象属性
他的缺点和原型链继承一样
- let person = {
-
- firstname:'John',
- lastname:'foe',
- fullname:function(){
- return this.firstname+""+this.lastname
- }
-
- }
-
- let person1 = Object.create(person)
- let person2 = Object.create(person)
-
- //已有对象生成新对象,已有对象作为新对象的原型生成新实例
- //person1和person2都是创建出来的实例
- person1.firstname='Jane'
- console.log(person1.fullname())//jane foe
- console.log(person2.fullname())//john foe
-
-
-
- //体现缺点的代码:
-
-
- let person={
- firstname:'li',
- lastname:['green'],
- fullname:function(){
- return this.firstname+""+this.lastname
- }
- }
-
- let person1 = Object.create(person)
- let person2 = Object.create(person)
- person1.lastname.push('red')
- console.log(person1.fullname(),person2.fullname())//ligreen,red ligreen,red
模拟object.create:
- function objectfactory(o){
-
- function F(){}
- F.prototype=o
- return new F()
- }
可以添加新的属性和方法, 使用现有对象作为原型创建一个新对象,增强这个对象,添加新属性或方法,返回这个对象
同样难以重用
- let person={
- firstname:'li',
- lastname:['green'],
- fullname:function(){
- return this.firstname+""+this.lastname
- }
- }
-
- function jisheng(o){
- let clone=Object.create(o)
- clone.newfunc=function(){
- console.log('haha')
- }
- return clone
- //千万别忘了返回值
- }
- let child1 = jisheng(person)
- let child2 = jisheng(person)
- console.log(child1.newfunc(),child2.newfunc())
优化了组合继承中需要 父类构造函数被调用两次,一次在创建子类原型,一次在子类构造函数
基于object.create
接受两个参数,子类构造函数和父类构造函数
第一步创建父类原型的副本
然后 返回的p对象设置constructor属性,解决由于重写原型导致默认constructor丢失的问题,最后将新创建的对象赋值给子类型的原型
- function inherit(subtype,supertype){
-
- let p = Object.create(supertype)
- p.constructor=subtype
- subtype.prototype=p
-
- }
原型式继承,寄生继承和寄生组合都使用object.create
利用es6类和构造函数实现继承
- class Parent{
- constructor(age){
- this.age=age
- }
- s(){
-
- console.log('hello')
-
- }
-
- }
-
-
- class Son extends Parent{
-
- t(){
- console.log('you')
- }
-
-
- }
-
- let son1 = new Son(30)
- son1.s()
- son1.t()