Javascript 6 种继承

1.原型链继承

// 1.原型链继承的两个问题===》在借用构造函数中可以解决下下面的两个问题
//problem： 在创建子类型的实例时,不能向超类型的实例传递参数(在这里就是不能向a()里传递参数)
function a(light) {
this.light1=light;
}
function b(light) {
this.light=light;
}
b.prototype=new a(); //在这里就会引出属性被其它实例共享的问题
var c=new b(123);
console.log(c.light);
console.log(c.light1);

// problem：属性是引用类型的值时,修改引用类型后,继承后会被所有实例共享
function c() {
this.color=["red","blue","pink"]
}
function d() {

}
d.prototype=new c();
var instance1=new d();
instance1.color.push("black")
var instance2=new d();
console.log(instance1);
console.log(instance2);

2.构造函数继承

// 借用构造函数的两个问题
// 1.方法属性必须定义在借用构造函数之后,否则,重新定义的属性会被超类型的属性覆盖
// 2.函数方法只能定义在构造函数中,没有函数复用的说法了
function a(name) {
this.city="北京";
this.name=name;
this.countries=["美国","中国","英国"]
}
function b(name,age) {
this.city="上海";
a.call(this,name);
this.age=age;
// this.city="上海";应该写在这里
}
var s1=new b("bob",25);
console.log(s1);
s1.countries.push("india");
console.log(s1.city);

3.组合继承

// 组合继承(构造函数中定义属性,原型对象中定义方法) 创建的实例会分别拥有自己的属性 会使用相同的方法。
// 避免了原型链继承与构造函数继承的缺陷,宗旨，原型链继承共享的属性和方法,构造函数继承实例属性。
function supertype(name) {
this.name = name;
this.colors = ["red", "blue"]
}
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.constructor = subtype;
subtype.prototype.sayage = function() {
console.log(this.age)
}

var instance1 = new subtype("jack", 10);
instance1.colors.push("black");
console.log(instance1.colors);
instance1.sayname();
instance1.sayage();

var instance2 = new subtype("tom", 20);
console.log(instance2.colors);
instance2.sayname();
instance2.sayage();

 

4.原型式继承

// 原型式继承
// 1.problem：包含引用类型的属性都会被共享
function object(o) {
function f() {}
f.prototype=o;
return new f();

}
var person={
name:"jack",
friends:["a","b","c"]
};
var anotherperson= object.create(person);
anotherperson.name="tom";
anotherperson.friends.push("d");

var otherperson=object.create(person,{
name:{
value:"gg" //2.object.create的第二个参数会覆盖原型对象上的同名属性
}
})
console.log(anotherperson.name);
console.log(otherperson.name);

 

5.寄生式组合继承

// 最完美的继承,继生式组合继承
function supertype(name) {
this.name1 = name;
this.colors = ["red", "blue"]
}
supertype.prototype.sayname = function() {
console.log(this.name) //3.这里的方法可以不用定义在构造函数中了，注意不要在原型对象中定义属性
}

function subtype(name, age) {
supertype.call(this, name); //4.这里的借用构造函数可以为每个实例创建一个属性副本,构造函数supertype只被调用一次，可以放在构造函数中
this.name = name;
this.age = age;
}

function inheritprototype(subtype,supertyper) {
var prototype=object.create(supertype.prototype); //5.object.create 就相当于给被继承的构造函数转变为一个对象副本,避免supertype被多次调用
prototype.constructor=subtype;
subtype.prototype=prototype;
}

inheritprototype(subtype,supertype);

var instance1=new subtype("张三"); //2.可以向超类型的属性传递参数
console.log(instance1.name);
var instance2=new subtype("张三");
console.log(instance2.name1);

instance1.colors.push("pink");//1.解决了引用类型值会被共享的问题
console.log(instance1.colors); 
console.log(instance2.colors);