JavaScript --- 继承总结

悠悠 2023-02-09 05:27 14阅读 0赞

## ES5中的继承 ##

**一、 原型链继承**

原型链继承的原理：直接让子类的原型对象指向父类实例，当子类实例找不到对应的属性和方法时，就会往它的原型对象，也就是父类实例上找，从而实现对父类的属性和方法的继承。

// 父类
    function fat () { 
    	this.name = 'aqing'
    }
    // 父类上的原型方法
    fat.prototype.getName = function() { 
    	return this.name
    }
    // 子类
    function child () { }
    // 子类的原型对象方法指向父类 子类中找不到的属性方法就会向父类找
    child.prototype = new fat()
    // 不影响继承 顺便绑一下constructor
    child.prototype.constructor = child
    // child实例就可以访问父类及其原型上的属性和方法了
    const Child = new child()
    Child.name // 'aqing'
    Child.getName() // 'aqing'

**原型链继承的缺点**

1.  所有的child实例原型都指向同一个fat实例，因此对child实例修改某个父类引用类型会影响所有的child实例；
2.  创建子类时无法向父类传参，没有实现super()的功能.

function fat () { 
    	this.name = 'aqing'
    }
    
    fat.prototype.getName = function() { 
    	return this.name
    }
    
    function child () { }
    child.prototype = new fat()
    child.prototype.constructor = child
    //
    const Child1 = new child();
    const Child2 = new child();
    Child1.name = 'wzg'
    console.log(Child1.name) // wzg
    // 本来父类name属性是zaq 然后现在==
    console.log(Child2.name) // wzg

**二、 构造函数继承**

构造函数继承：在子类的构造函数中执行父类的构造函数，并为其绑定子类的this。让父类的构造函数把成员的属性和方法都挂在子类的this上，这样既避免了共用一个原型实例，又能像父类构造函数传参。

function fat(name) { 
                this.name = name
            }
            fat.prototype.getName = function() { 
                return this.name
            }
    
            function Child(name) { 
                fat.call(this, name)
            }
            const child1 = new Child("aqing")
            const child2 = new Child("aqing")
            child1.name = 'wzg'
            console.log(child1.name) // wzg
            console.log(child2.name) // aqing

**构造函数继承的缺点**  
继承不到父类上的属性和方法

child1.getName() // Uncaught TypeError: child1.getName is not a function

**三 、组合式继承**  
既然原型链继承和构造函数继承都有各自的缺点但是又能互补，那何不将两者结合起来使用；

**组合式继承的缺点**  
每次创建子类实例都执行了两次构造函数（fat.call()和new fat()），虽然不影响继承，但是在子类创建时 原型中会存在两份相同的属性和方法。

**四 、寄生式组合继承**

为了解决构造函数被执行两次的问题，我们将指向父类实例 变成转向父类原型，减少一次构造函数的执行。

但是这种方法也存在一个问题，就是子类和父类的原型都指向同一个对象，如果我们对子类原型操作就会对父类原型产生影响。比如给子类Child.prototype新增一个getName方法,那么父类fat.prototype也增加或是被覆盖一个getName方法。为了解决这个问题 我们给fat.prototype做一个浅拷贝；

--------------------

## ES6中的继承 ##

class介绍[来自阮一峰][Link 1]  
es6中的继承：  
1、class可以理解为functon,由于class本质还是一个function，因此它也有一个prototype属性。当new一个class时，会把class的protortype属性赋值给这个新对象的\_proto\_属性上；  
2、constructor是默认添加的方法，在new一个对象的时候，会自动调用该方法, constructor里定义自己的属性；  
3、继承extends和super， class子类名 extends父类名 实现继承。当然，还得在constructor里写上super (父类的参数)，意思就是在子类中获取父类的this指针，相当于fat.call(this)

// 父类
    class fat { 
    	constructor(props) { 
    		this.name = props || '';
    	}
    	getName () { 
    		return this.name
    	}
    }
    // 继承
    class Child extends fat { 
    	constructor(props, attrs) {  // props继承父类的属性，attrs自己私有的属性
    		super(props); // 相当于获取父类的this指向
    		this.rename = props.rename || ''
    		this.attrs = attrs
    	}
    	// 子类自己的方法
    	getFatname () { 
    		return this.name
    	}
    	getAttrs () { 
    		return this.attrs
    	}
    }
    // 通过new实例化一个构造函数
    const child1 = new Child({ 
    	name: 'wzg',
    	rename: 'aqing'
    }, 'wuzhiguang')
    child1.getName() // wzg
    child1.getRename() // aqing
    child1.getAttrs() // wuzhiguang

转载https://blog.csdn.net/ZhuAiQuan/article/details/105485383  
  
  
  
没事可以来看看，万一有收获呢。

[个人博客地址https://aqingya.cn][https_aqingya.cn]  
  
  
愿你的坚持终有收获。

[Link 1]: https://github.com/ruanyf/es6tutorial/blob/57701fcc2e4c972b5fa6be236362f0b57b97bab4/docs/class.md
[https_aqingya.cn]: https://aqingya.cn