js的继承方式 2021/3/4

类式继承

1.原型链继承

 //parent构造函数
function Parent(name) {
	this.name = name || 'Adam';
}

//给原型增加方法
Parent.prototype.say = function () {
	return this.name;
};

//空的child构造函数
function Child(name) {}

//继承
function inherit(C, P) {
	C.prototype = new P();
}
inherit(Child, Parent);
var kid = new Child();
console.log(kid.say());

缺点：（1）.这种模式的一个缺点是既继承了（父对象）“自己的属性”，也继承了原型中的属性。大部分情况下你可能并不需要“自己的属性”，因为它们更可能是为实例对象添加的，并不用于复用。
（2）.在使用这个inherit()函数时另外一个不便是它不能够让你传参数给子构造函数，这些参数有可能是想再传给父构造函数的。
（3）子元素对父元素不是独立的拷贝
2.构造函数继承

//父构造函数
function Parent(name) {
	this.name = name || 'Adam';
}

//在原型上添加方法
Parent.prototype.say = function () {
	return this.name;
};

//子构造函数
function Child(name) {
	Parent.apply(this, arguments);
}

var kid = new Child("Patrick");
	kid.name; // "Patrick"
typeof kid.say; // "undefined"

缺点：这种模式的一个明显的弊端就是无法继承原型。如前面所说，原型往往是添加可复用的方法和属性的地方，这样就不用在每个实例中再创建一遍。
优点：获得了父对象自己成员的拷贝，不存在子对象意外改写父对象属性的风险。
3.组合继承

//父构造函数
function Parent(name) {
	this.name = name || 'Adam';
}

//在原型上添加方法
Parent.prototype.say = function () {
	return this.name;
};

//子构造函数
function Child(name) {
	Parent.apply(this, arguments);
}
Child.prototype = new Parent();

var kid = new Child("Patrick");
kid.name; // "Patrick"
kid.say(); // "Patrick"
delete kid.name;
kid.say(); // "Adam"

优缺点：这样做的好处是子对象获得了父对象自己的成员，也获得了父对象中可复用的（在原型中实现的）方法。子对象也可以传递任何参数给父构造函数。这种行为可能是最接近Java的，子对象继承了父对象的所有东西，同时可以安全地修改自己的属性而不用担心修改到父对象。

一个弊端是父构造函数被调用了两次，所以不是很高效。最后，（父对象）自己的属性（比如这个例子中的name）也被继承了两次。
4.圣杯模式

function inherit(C, P) {
	var F = function () {};
	F.prototype = P.prototype;
	C.prototype = new F();
	C.uber = P.prototype;
	C.prototype.constructor = C;
}

这种模式通常情况下都是一种很棒的选择，因为原型本来就是存放复用成员的地方。

原型继承

1.原型继承

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

2.寄生式继承

// 寄生式继承  可以理解为在原型式继承的基础上增加一些函数或属性
        var ob = {
            name: 'xiaopao',
            friends: ['lulu','huahua']
        }

        function CreateObj(o){
            function F(){};  // 创建一个构造函数F
            F.prototype = o;
            return new F();
        }

        // 上面CreateObj函数 在ECMAScript5 有了一新的规范写法，Object.create(ob) 效果是一样的 , 看下面代码
        var ob1 = CreateObj(ob);
        var ob2 = Object.create(ob);
        console.log(ob1.name); // xiaopao
        console.log(ob2.name); // xiaopao

        function CreateOb(o){
            var newob = CreateObj(o); // 创建对象 或者用 var newob = Object.create(ob)
            newob.sayName = function(){ // 增强对象
                console.log(this.name);
            }
            return newob; // 指定对象
        }

        var p1 = CreateOb(ob);
        p1.sayName(); // xiaopao

3.组合继承

// 寄生组合式继承
function Parent(name){
            this.name = name;
            this.colors = ['red', 'blue', 'green'];
        }

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

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

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

        // Child.prototype = new Parent(); // 这里换成下面
        function prototype(child,parent){
            var prototype = CreateObj(parent.prototype);
            prototype.constructor = child;
            child.prototype = prototype;
        }
        prototype(Child,Parent);

        var child1 = new Child('xiaopao', 18);
        console.log(child1); 

优点： 这种方式的高效率体现它只调用了一次Parent构造函数，并且因此避免了再Parent.prototype上面创建不必要的，多余的属性。普遍认为寄生组合式继承是引用类型最理想的继承方式