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);

巴特西

Javascript 6 种继承

最新文章

热门文章