继承

作者: 米诺zuo | 来源:发表于2018-05-06 16:00 被阅读8次

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

相关文章

  • 继承 继承

    属性拷贝 继承不单单能通过原型链实现,也能通过其他方式实现,属性拷贝就是其中一种方法。 通过属性拷贝也能实现继承子...

  • 继承(单继承,多继承)

    将共性的内容放在父类中,子类只需要关注自己特有的内容 python中所有的内容都是对象,所有的对象都直接或间接继承...

  • js继承方式

    类式继承 构造函数继承 组合继承 类式继承 + 构造函数继承 原型式继承 寄生式继承 寄生组合式继承 寄生式继承 ...

  • Python-学习之路-08 OOP -02

    单继承和多继承 单继承:每个类只能继承一个类 多继承:每个类可以继承多个类 单继承的多继承的优缺点 菱形继承/钻石...

  • 原型相关(二)

    1.继承 继承方式:接口继承(只继承方法签名)实现继承(继承实际的方法)ECMAScript只支持实现继承,并且主...

  • 继承

    继承的引入和概述 继承案例和继承的好处 继承的弊端 Java中继承的特点 继承的注意实现和什么时候使用继承 继承中...

  • Java面向对象三大特性之继承

    继承 一、继承的特点 Java只支持单继承单继承 多继承 单继承、多继承优缺点①单继承优点:提高了代码的复用性,让...

  • 7、面向对象的程序设计3(《JS高级》笔记)

    三、继承 许多OO语言都支持两种继承方式:接口继承和实现继承。接口继承只继承方法签名,而实现继承则继承实际方法。由...

  • 【重学前端】JavaScript中的继承

    JavaScript中继承主要分为六种:类式继承(原型链继承)、构造函数继承、组合继承、原型式继承、寄生式继承、寄...

  • js之继承

    文章主讲 JS 继承,包括原型链继承、构造函数继承、组合继承、寄生组合继承、原型式继承、 ES6 继承,以及 多继...

网友评论

      本文标题:继承

      本文链接:https://www.haomeiwen.com/subject/wfkurftx.html