js继承方式

Posted 2020-07-25 ╭ 儛動嘚靈魂

从一个简单的需求开始
现从前台抽离一个model名为Person，其有基本属性name和age，默认每个人都会说话，因此将说话的功能say放在了原型对象上，以供每个实例享用。现在对于Man来说，它需要继承Person的基本属性，并且在此基础上添加自己特有的属性。

 1 function Person(name,age){
 2     this.name = name;
 3     this.age = age;
 4 }
 5 Person.prototype.say = function(){
 6     console.log(‘my name is‘+this.name);
 7 };
 8 function Man(){
 9     
10 }

1.原型链的继承

 1 function Person (name, age) {
 2   this.name = name;
 3   this.age = age;
 4 }
 5 Person.prototype.say = function(){
 6   console.log(‘hello, my name is ‘ + this.name);
 7 };
 8 function Man() {
 9 }
10 Man.prototype = new Person(‘pursue‘);
11 var man1 = new Man();
12 man1.say(); //hello, my name is pursue
13 var man2 = new Man();
14 console.log(man1.say === man2.say);//true
15 console.log(man1.name === man2.name);//true

这种继承方式很直接，为了获取Person的所有属性方法(实例上的和原型上的)，直接将父类的实例new Person(‘pursue‘)赋给了子类的原型，其实子类的实例man1,man2本身是一个完全空的对象，所有的属性和方法都得去原型链上去找，因而找到的属性方法都是同一个。 所以直接利用原型链继承是不现实的。

2.利用构造函数继承

 1 function Person (name, age) {
 2   this.name = name;
 3   this.age = age;
 4 }
 5 Person.prototype.say = function(){
 6   console.log(‘hello, my name is ‘ + this.name);
 7 };
 8 function Man(name, age) {
 9   Person.apply(this, arguments);
10 }
11 //Man.prototype = new Person(‘pursue‘);
12 var man1 = new Man(‘joe‘);
13 var man2 = new Man(‘david‘);
14 console.log(man1.name === man2.name);//false
15 man1.say(); //say is not a function

子类的在构造函数里利用了apply去调用父类的构造函数，从而达到继承父类属性的效果，比直接利用原型链要好的多，至少每个实例都有自己那一份资源，但是这种办法只能继承父类的实例属性，因而找不到say方法，为了继承父类所有的属性和方法，则就要修改原型链，从而引入了组合继承方式。

3.组合继承

 1 function Person (name, age) {
 2   this.name = name;
 3   this.age = age;
 4 }
 5 Person.prototype.say = function(){
 6   console.log(‘hello, my name is ‘ + this.name);
 7 };
 8 function Man(name, age) {
 9   Person.apply(this, arguments);
10 }
11 Man.prototype = new Person();
12 var man1 = new Man(‘joe‘);
13 var man2 = new Man(‘david‘);
14 console.log(man1.name === man2.name);//false
15 console.log(man1.say === man2.say);//true
16 man1.say(); //hello, my name is joe

需要注意的是man1和man2的实例属性其实是覆盖了原型属性，但是并没要覆盖掉原型上的say方法（因为它们没有），所以这里man1.say === man2.say依然返回true，因而需要十分小心没有覆盖掉的原型属性，因为它是所有实例共有的。

4.寄生组合继承

 1 function Person (name, age) {
 2       this.name = name;
 3       this.age = age;
 4 }
 5 Person.prototype.say = function(){
 6   console.log(‘hello, my name is ‘ + this.name);
 7 };
 8 function Man(name, age) {
 9   Person.apply(this, arguments);
10 }
11 Man.prototype = Object.create(Person.prototype);//a.
12 Man.prototype.constructor = Man;//b.
13 var man1 = new Man(‘pursue‘);
14 var man2 = new Man(‘joe‘);
15 console.log(man1.say == man2.say);
16 console.log(man1.name == man2.name);

其实寄生组合继承和上面的组合继承区别仅在于构造子类原型对象的方式上（a.和b.），这里用到了Object.creat(obj)方法，该方法会对传入的obj对象进行浅拷贝，类似于：

1 function create(obj){
2 function T(){};
3 T.prototype = obj;
4 return new T();
5 }

//因此，a.会将子类的原型对象与父类的原型对象进行很好的连接，而并不像一般的组合继承那样直接对子类的原型进行复制（如Man.prototype = new Person();）,这样只是很暴力的在对属性进行覆盖。而寄生组合继承方式则对实例属性和原型属性分别进行了继承，在实现上更加合理。
//注意:代码b.并不会改变instanceof的结果，但是对于需要用到construcor的场景，这么做更加严谨。