【javascript】javascript继承的多种方式

迈不过友情╰ 2022-04-23 04:32 221阅读 0赞

1, 原型链继承

function Super() {  }; 
    	function Sub() {  }; 
    	Sub.prototype = new Super()

会出现的问题：  
  a,原型对象的属性，如果是一个引用类型，那么所有实例都会共享这一个引用类型\[比如是数组\]，某一个实例修改了该数组，那么其他实例获取该属性也会是改变之后的结果。  
   b,第二个问题，没有办法在不影响所有对象实例的情况下，给超类型的构造函数传递参数。

2，构造函数继承，在子类型的构造函数里面里面调用父类型的的构造函数，利用call 或者apply

function Person(name, age) {  
          	  this.name = name, this.age = age 
          }
          function Worker(name, age, salary, phone) {  
              this.salary = salary
              this.phone = phone
              Person.call(this, name, age)
          }

会出现的问题：  
   a, 子类型没有办法公用父类型的方法。属性其实只是表层上的引用。

3, 组合继承  
方法采用原型继承【方法可以公用】，属性采用构造器的继承方式。

function SuperType(name) {  
       	 this.name = name; 
       	 this.colors = ["red", "blue", "yellow"]
       }
       SuperType.prototype.sayName = function() {  
      	 console.log(this.name)
       }
    
       function SubType(name, age) {  
         SuperType.call(this, name); 
         this.age = age
       }
       SubType.prototype = new SuperType()
       SubType.prototype.sayAge = function() { 
       	console.log(this.age)
       }
    
       var in1 = new SubType("k1", 18)
       in1.colors.push('black')
       in1.sayAge()
       in1.sayName()
       in1.colors // what is result ?
    
       var in2 = new SubType("k2", 28)
       in2.sayAge()
       in2.sayName()
       in2.colors // what is result ?

4，原型式继承【不是原型链继承】

function object(o) { 
              function F() { }
              F.prototype = o
              return new F()
         }

ES5 提供了`Object.create()`方法来规范原型链继承。这个方法和上面的object方法实现同样的功能，但是他提供第二个参数，第二个参数和`Object.defineProperty(obj, 'name', { })`的第三个参数，描述符是一样的。  
例子：

const obj = {  
        	name: 'kev', 
        	colors: ['yellow', 'green', 'blue'] 
        }
        const copyPaste = Object.create(obj, 
        	{  name:  {  
        		value: 'kevin',
        		enumerable: true
        	 }   
       })

5, 寄生式继承【以第4种原型式继承为基础】  
寄生式继承和原型式继承紧密相关的一种思路，也是会调用Object.create方法，但是会以某种方式增强返回的对象。

function createAnother(original) { 
              // 这个object方法来自第4步
              const clone = object(original)
              clone.sayHi = function() { 
                  console.log('hi')
              }
              return clone
         }

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

第六种，寄生组合式继承  
   其实到现在我认为第3种是最自然的，结合了原型和构造函数。但是问题来了：我们调用了两次超类SuperType的构造函数

看完前面5种，我自己都认为常用的应该是第3种继承方式最好，结合原型和构造函数。但是存在问题：我们调用了两次超类SuperType的构造函数。

第一次是指定`SubType.prototype = new SuperType()`，这时候SubType的原型对象上面会有两个属性，name，colors。  
   第二次是实例化对象in1的时候，又调用了一次SuperType的构造函数，这时候对象in1又创建了实例属性name和colors。

实际上我们只需要继承原型对象上面的方法，属性我们可以不在原型对象上面创建。

概念来了，寄生组合式继承是指的是通过构造函数来继承属性，通过原型链的方式来继承方法。  
   我们不用为了指定子类型SubType的原型（对象）而去调用父类或者超类的构造函数。避免子类的原型对象有多余的属性，我们可以利用`Object.create()` 或者手写的`object()`方法来返回一个对象tempObj，这个对象tempObj的原型`tempObj.__proto__`或者`Object.getPrototypeOf(temoIbj)` 都是等于SuperType.prototype的。

关键总结：我们都是为了将SubType的原型对象设置为SuperType的实例，但是组合继承调用了构造函数，SubType的原型对象是有多余的属性的, 而且如果SuperType构造函数有一些副作用 比如写日志，修改状态，注册到其他对象，给this添加数据属性等，就会影响SubType的"后代"。 所以我们设置SubType的原型对象为另外一个特殊的对象，这个特殊的对象是通过Object.create(SuperType.prototype)来返回的，这个特殊对象没有多余的属性，但是.\_\_proto\_\_为SuperType.prototype, 继承了prototype.sayName方法。

但是因为我们重写了prototype，失去了默认的constructor属性，这一步之后代码长下面这样：

// 超类
       function SuperType(name) {  
          this.name = name; 
          this.colors = ["red", "blue", "yellow"] 
       }
       SuperType.prototype.sayName = function() {  
       	  console.log(this.name) 
       }
       
       // 子类
       function SubType(name, age) {  
       	  SuperType.call(this, name); 
       	  this.age = age 
       }
       // A 设置prototype
       SubType.prototype = Object.create(SuperType.prototype)
       // B 恢复默认的Constructor
       SubType.prototype.constructor = SubType
       SubType.prototype.sayAge = function() { 
          console.log(this.age)
       }

我们将A和B下面的两句代码抽成一个方法：

function inheritPrototype(subType, superType) { 
        // or object(superType.prototype)
        const proto = Object.create(superType.prototype) 
        proto.constructor = subType
        subType.prototype = proto
      }

所以最后的结果是这样：

// 超类
      function SuperType(name) {  
        this.name = name;
        this.colors = ["red", "blue", "yellow"] 
      }
      SuperType.prototype.sayName = function() {  
        console.log(this.name) 
      }
    
      // 子类
      function SubType(name, age) { 
        SuperType.call(this, name);
        this.age = age 
      }
      inheritPrototype(SubType, SuperType)
      SubType.prototype.sayAge = function() { 
        console.log(this.age)
      }

等等—还没有完。。。

ES6 新增了一个方法[Object.setPrototypeOf(obj, prototype)][Object.setPrototypeOf_obj_ prototype], 我们可以直接设置原型对象【但是注意兼容性】,这样我们修改一下这个`inheritPrototype`方法：

function inheritPrototype(subType, superType) { 
          Object.setPrototypeOf(subType.prototype, superType.prototype)
          subType.constructor = subType
          subType.prototype.constructor = subType
        }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E1NTM0Nzg5_size_16_color_FFFFFF_t_70]

more：  
[之前关于prototype的一点记录][prototype]

来源《js高级程序设计》第6章第三节  
《你不知道的js》原型章节

[Object.setPrototypeOf_obj_ prototype]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/setPrototypeOf
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E1NTM0Nzg5_size_16_color_FFFFFF_t_70]: /images/20220323/4c6f457d1b4b4093bd4c27bb634b4a1f.png
[prototype]: https://blog.csdn.net/a5534789/article/details/77447010