js继承

js各种继承方式介绍

1.原型链继承

function Parent () {
  this.name = 'kevin';
}
 
Parent.prototype.getName = function () {
  console.log(this.name);
}
 
function Child () {
 
}
Child.prototype = new Parent();
 
var child1 = new Child();
 
console.log(child1.getName()) // kevin

2.构造继承

function Parent () {
  this.names = ['kevin', 'daisy'];
}
 
function Child () {
  Parent.call(this);
}
 
var child1 = new Child();
 
child1.names.push('yayu');
 
console.log(child1.names); // ["kevin", "daisy", "yayu"]
 
var child2 = new Child();
 
console.log(child2.names); // ["kevin", "daisy"]

3.组合继承

function Parent (name) {
    this.name = name;
    this.colors = ['red', 'blue', 'green'];
}

Parent.prototype.getName = function () {
    console.log(this.name)
}

function Child (name, age) {
    Parent.call(this, name);
    this.age = age;
}

Child.prototype = new Parent();

var child1 = new Child('kevin', '18');

4.寄生继承

function createAnother(original){
    var clone = Object.create(original);    //通过调用函数创建一个新对象
    clone.sayHi = function(){               //以某种方式来增强这个对象
        alert("Hi");
    };
    
    return clone;                        //返回这个对象
}

var person = {
    name: "Bob",
    friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi();

5.寄生组合式继承

 function Parent(name) {
            this.name = name;
            this.colors = ['red', 'blue', 'green'];
        }

        Parent.prototype.getName = function () {
            console.log(this.name);
        }

        function Child(name, age) {
            Parent.call(this, name);
            this.age = age;
        }

        function object(o) {
            function F() { }
            F.prototype = o;
            return new F();
            // 通过构造一个介于 Parent 与 Child 之间的对象，并使该对象的 prototype 属性指向 Parent 的 prototype对象，
            // 来避开通过调用 Parent 构造函数的方式来产生一个 prototype 指向Parent prototype对象的对象。
        }

        function prototype(child, parent) {
            // 不直接child.prototype=parent.prototype呢？
            // 原因 : 当我们想给 Child 的prototype里面添加共享属性或者方法时，如果其 prototype 指向的是 Parent 的 prototype，那么在 Child 的 prototype 里添加的属性和方法也会反映在 Parent 的 prototype 里面，
            // 这明显是不合理的，这样做的后果是当我们只想使用 Parent 时，也能看见 Child 往里面扔的方法和属性。
            // 所以需要每个构造函数都需要持有自己专用的prototype对象
            var prototype = object(parent.prototype);
            prototype.constructor = child;
            child.prototype = prototype;
        }

        prototype(Child, Parent);

        var child1 = new Child('kevin', '18');

        console.log(child1);

这种方式的高效率体现它只调用了一次Parent构造函数，并且因此避免了在 Parent.prototype 上面创建不必要的、多余的属性。与此同时，原型链还能保持不变；因此，还能够正常使用 instanceof 和 isPrototypeOf。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

js各种继承方式介绍

推荐阅读更多精彩内容