JavaScriptの継承を実装する

1.ES6は拡張します

extendsキーワードを使用して、クラス間の継承を実現します。これは、ES5で継承を使用するよりもはるかに便利です。

//定义类父类
class Animal {
    
       
  constructor(color) {
    
       
    this.color = color;   
  }   
  greet(sound) {
    
       
    console.log(sound);   
  }  
}   
class Dog extends Animal {
    
       
  constructor(color) {
    
       
    super(color);   
    this.color = color;   
  }  
}   

let dog = new Dog('黑色');  
dog.greet('汪汪');  // "汪汪"
console.log(dog.color); // "黑色"

2.プロトタイプを使用して、

   const extend = (Target, Origin) => {
    
    
           // Origin.call(Target)
            function Fun() {
    
     }
            Fun.prototype = Origin.prototype
            Target.prototype = new Fun()
            //Target.prototype = Object.create(Origin.prototype)
            Target.prototype.constructor = Target
            Target.prototype.uber = Origin.prototype
        }
        Father.prototype.b = 1
        function Father() {
    
    
            this.a=2
        }

        function Son() {
    
    
            // Father.call(this)
        }
        extend(Son, Father)
        var son = new Son();
        var father = new Father();
        console.log(son.b)
        console.log(son.a)

3.寄生複合継承

function Animal(color) {
    
    
  this.color = color;
  this.name = 'animal';
  this.type = ['pig', 'cat'];
}
Animal.prototype.greet = function(sound) {
    
    
  console.log(sound);
}
function Dog(color) {
    
    
  Animal.apply(this, arguments);
  this.name = 'dog';
}
/* 注意下面两行 */

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.getName = function() {
    
    
  console.log(this.name);
}
var dog = new Dog('白色');   
var dog2 = new Dog('黑色');     
dog.type.push('dog');   
console.log(dog.color);   // "白色"
console.log(dog.type);   // ["pig", "cat", "dog"]
console.log(dog2.type);  // ["pig", "cat"]
console.log(dog2.color);  // "黑色"
dog.greet('汪汪');  //  "汪汪"

Object.create（）のシャローコピーの機能は次のとおりです。

function create(obj) {
    
    
  function F() {
    
    };
  F.prototype = obj;
  return new F();
}

ここでもう1つ注意すべき点は、AnimalのプロトタイプがコピーされてDog.prototypeに割り当てられているため、Dog.prototypeのコンストラクタープロパティも書き直されているため、この問題を修正する必要があります。Dog.prototype.constructor = Dog;

クロージャを使用して変数を民営化する

const inherit = (() => {
    
    
    let F = function () {
    
    }
    return (Target,Origin) => {
    
    
        F.prototype= Origin.prototype
        Target.prototype = new F()
        Target.prototype.constructor = Target
        Target.prototype.uber = Origin.prototype
    }
})()

継承の包括的な分析