继承

1.原型链 (问题:原型属性会被所有实例共享)

//利用原型让一个引用类型继承另一个引用类型的属性和方法
//蹦使用对象字面量创建原型方法,否则会重写原型链
function SuperType(){
    this.property = true;
}
SuperType.prototype.getSuperValue = function(){
    return this.property;
};

function SubType(){
    this.subproperty = false;
}
//inherit from SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
    return this.subproperty;
};

var instance = new SubType();
console.log(instance.getSuperValue());   //true
console.log(instance.getSubValue());   //true

console.log(instance instanceof Object);      //true
console.log(instance instanceof SuperType);   //true
console.log(instance instanceof SubType);     //true

console.log(Object.prototype.isPrototypeOf(instance));    //true
console.log(SuperType.prototype.isPrototypeOf(instance)); //true
console.log(SubType.prototype.isPrototypeOf(instance));   //true

2.借用构造函数 (解决原型属性会被所有实例共享 问题:函数无法复用)

//借用构造函数 (解决原型属性会被所有实例共享 问题:函数无法复用)
function SuperType(){
    this.colors = ["red", "blue", "green"];
}
function SubType(){
    //inherit from SuperType 重点
    SuperType.call(this);
}

var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors);    //"red,blue,green,black"
var instance2 = new SubType();
console.log(instance2.colors);    //"red,blue,green"

3.组合式继承 //调用两次SuperType的构造函数

//组合式继承 //调用两次SuperType的构造函数
function SuperType(name){
    this.name = name;
    this.colors = ["yellow","red"];
}
SuperType.prototype.sayName = function () {
    console.log(this.name);
}

function SubType(name){
    //inherit from SuperType passing in an argument
    //可以接收参数,只接收superType中定义的参数及参数个数,如name
    SuperType.call(this, "Nicholas"); //调用SuperType的构造函数
    //解决同一个subtype实例共享colors属性的问题
//        SuperType.call(this);
    //instance property
    this.age = 29;
}
//继承方法
SubType.prototype = new SuperType(); //调用SuperType的构造函数
SubType.prototype.sayHi = function () {
    console.log("hi");
}
var instance = new SubType();
instance.colors.push("blue");
var instance2= new SubType();
var supinstance = new SuperType("super");

console.log(instance.name);    //"Nicholas";
console.log(instance.colors); //["yellow", "red", "blue"]
console.log(instance2.colors); //["yellow", "red"]
console.log(supinstance.colors); // ["yellow", "red"]
console.log(instance.age);     //29

4.原型式继承

//原型式继承
function object(o) {
    function F() {
        
    }
    F.prototype = o;
    return new F();
}
var person = {
    name:'Tom',
    friends:['a','b','c']
};
var ooperson = object(person);
ooperson.name= 'Jony';
ooperson.friends.push("d");
var o2person = object(person);
o2person.name= 'Jony';
o2person.friends.push("e");
console.log(o2person.friends);
console.log(o2person.name);

5.寄生式继承

//寄生式继承
function createobject(o) {
   var clone = object(o)
    clone.sayHi = function () {
        console.log("hi");
    };
    return clone;
}
var person = {
    name:'Tom',
    friends:['a','b','c']
};
var createperson = createobject(person);
createperson.sayHi();

6.寄生组合式继承 只调用了一次SuperType的构造函数

//寄生组合式继承 只调用了一次SuperType的构造函数
function inheritPrototype(SuperType,SubType) {
    var o = object(SuperType.prototype); //创建对象
    o.prototype.constructor = SubType; //增强对象
    SubType.prototype = o; //指定对象
}
function SuperType(name){
    this.name = name;
    this.colors = ["yellow","red"];
}
SuperType.prototype.sayName = function () {
    console.log(this.name);
}

function SubType(name,age){
    SuperType.call(this,name);//调用SuperType的构造函数
    //instance property
    this.age = age;
}
//继承方法
inheritPrototype(SuperType,SubType);
SubType.prototype.sayHi = function () {
    console.log("hi");
}
var instance = new SubType();
instance.colors.push("blue");
var instance2= new SubType();
var supinstance = new SuperType("super");

你可能感兴趣的:(继承)