资讯专栏INFORMATION COLUMN

20170607-面向对象02-继承

lushan / 2220人阅读

摘要:继承原型链原型链是实现继承的主要方法。临时的构造函数将传入的对象作为这个构造函数的原型返回新实例以为原型创建一个新实例不仅属于所有,而且也会被共享。上诉例子只调用了一次构造函数,因此避免了在上面创建不必要的多余的属性。

继承 1 原型链

原型链是实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。

构造函数、原型和实例的关系

每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。

function SuperType(){
    this.property = true;
}
SuperType.prototype.getSuperValue = function(){
    return this.property;
}

function SubType(){
    this.subproperty = false;
}
// 使SubType继承SuperType的实例 本质是重写原型对象
SubType.prototype = new SuperType();
SubType.prototype.getValue = function(){
    return this.subproperty;
}
var instance = new SubType();
alert(instance.getSuperValue());//true


注意 :==instance.constructor现在指向的是SuperType,这是因为原来SubType的原型指向了另一个对象--SuperType的原型,而这个原型对象的constructor属性指向的是SuperType==

默认的原型 Objec

确定原型与实例的关系

instanceof:用这个操作符来测试实例与原型链中出现过的构造函数,结果就会返回true

alert(instance instanceof Object); //true
alert(instance instanceof SuperType); //true
alert(instance instanceof SubType); //true

使用isPrototypeOf()方法,只要是原型链中出现的原型,都可以说是该原型链所派生的实例的原型

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

通过原型链实现继承时,不能使用对象字面量创建原型方法,因为这样会重写原型链

function SuperType(){
    this.property = true;
}
SuperType.prototype.getSuperValue = function(){
    return this.property;
}

function SubType(){
    this.subproperty = false;
}
SubType.prototype = new SuperType();
// 使用对象字面量创建原型方法,会重写原型链
SubType.prototype = {
    getSubValue: function(){
        return this.subproperty;
    }
};
var instance = new SubType();
alert(instance.getSuperValue());//error!!

原型链的问题

包含引用类型值的原型属性会被所有实例共享,因此在构造函数中定义属性而不是在原型对象中定义属性。
在通过原型来实现继承时,原型实际上会变成另一个类型的实例。于是,原先的实例属性也就变成了现在的原型属性了。

function SuperType(){
    this.color = ["red", "blue", "green"];
    this.name = "Nicholas";
}
function SubType(){
}
SubType.prototype = new SuperType();

var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); //"red","blue","green","black"
instance1.name = "Tom";
alert(instance1.name); //"Tom"

var instance2 = new SubType();
// colors是引用类型,会被所有实例共享
alert(instance2.colors); // "red","blue","green","black"
alert(instance2.name); //"Nicholas"

没有办法在不影响所有对象实例的情况下,给超类型的构造函数传递参数

function SuperType(name){
    this.name = name;
}
function SubType(name){
}
// ??如何向超类型的构造函数传递参数??
SubType.prototype = new SuperType();

var instance2 = new SubType(name);

综合以上情况,实践中很少会多带带使用原型链

2.借用构造函数

在子类型构造函数的内部调用超类型构造函数。

function SuperType(){
    this.colors=["red","blue","green"];
}
function SubType(){
    //
    superType.call(this);
}

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

bar instance2 = new SubType();
alert(instance2.colors); //"red,blue,green"

使用这种方式,可以在子类型构造函数中向超类型构造函数传递参数。

function SuperType(name){
    this.name=name;
}
function SubType(){
    Super.call(this,"Nicholas");
    this.age = 29;
}

var instance = new SubType();
alert(instance.name);//"Nicholas"

相关问题:

会出现与构造函数模式相同的问题——方法都在构造函数中定义,函数复用就无从谈起了。而且在超类型的原型中定义的方法,对于子类型也是不可见的。

3.组合继承——JavaScrip最常用的继承模式

使用原型链实现对原型属性和方法的继承(通过在原型上定义方法实现了函数复用),通过借用构造函数来实现对实例属性的继承(保证每个实例都有自己的属性,而且可以向超类的构造函数传递参数)。

function SuperType(name){
    this.name=name;
    this.colors=["red","blue","green"];
}

SuperType.prototype.sayName = function(){
    alert(this.name);
};

function SubType(name,age){
    SuperType.call(this,name);
    this.age = age;
}
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function(){
    alert(this.age);
};

var instance1 = new SubType("Nicholas",29);
instance1.sayName(); //"Nicholas"
instance1.sayAge(); //29

var instance2 = new SubType("Greg",27);
instance2.sayName(); //"Greg"
instance2.sayAge(); //27
4 原型式继承

借助原型可以基于已有的对象创建新对象,同时还不必因此创建自定义类型。

function object(o){
    // 临时的构造函数
    function F(){}
    // 将传入的对象作为这个构造函数的原型
    F.prototype = o;
    // 返回新实例
    return new F();
}
var person = {
    name:"Nicholas",
    friends:["shelby","court","van"]
};
// 以person为原型创建一个新实例
var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");

var yetAnotherPerson = object(person);
yetAnotherPerson.name = "linda";
yetAnotherPerson.friends.push("barbie");

alert(person.friends); //"shelby,court,van,rob,barbie"

person.friends不仅属于person所有,而且也会被anotherPerson、yetAnotherPerson共享。

ECMAScript5通过Object.create()方法规范化了原型式继承,这个方法接受两个参数:一个用作新对象原型的对象,另一个(可选的)为新对象定义额外属性的对象。只传入一个参数的情况,和object()方法相同。

// Object.create()只用一个参数
var person = {
    name: "Nicholas",
    friends: ["shelby","court","van"]
};
var anotherPerson = Object.create(person);
// Object.create()用两个参数
var person = {
    name: "Nicholas",
    friends: ["shelby","court","van"]
};
var anotherPerson = Object.create(person, {
    name:{
        value: "Greg"
    }
});
alert(anotherPerson.name); //Greg

var yetAnotherPerson = Object.create(person, {
    // 为新对象定义新的friends属性,该属性会覆盖原型属性中的friends
    friends:{
        value: ["1","2","3"]
    }
});
alert(yetAnotherPerson.friends); //"1,2,3"
// 但是原型对象中的friends属性仍然被共享
alert(person.friends); //"shelby,court,van"
alert(anothorPerson.friends); //"shelby,court,van"
5.寄生式继承
function createAnother(original){
    var clone = object(original);
    // 不能做到函数复用,导致效率降低
    // 添加新函数,增强对象
    clone.sayHi = function(){
        alert("hi");
    }
    return clone;
}

var person = {
    name: "Nicholas",
    friends: ["shelby","court","van"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"
6.寄生组合式继承

组合继承无论在什么情况下,都会调用两次超类型构造函数:一次是在创建子类型原型的时候,另一次是在子类型构造函数内部。

function SuperType(name){
    this.name=name;
    this.colors=["red","blue","green"];
}
SuperType.prototype.sayName = function(){
    alert(this.name);
};
function SubType(name,age){
    SuperType.call(this,name);   //第二次调用SuperType()
    this.age=age;
}
SubType.prototype = new SuperType(); //第一次调用SuperType()

第一次调用SuperType构造函数时,SubType.prototype(SubType的原型)会得到两个属性:name和colors。当调用SubType构造函数时,又会调用一次SuperType构造函数,这一次又在新对象上创建了实例属性name和colors。于是这两个属性就屏蔽了原型中的两个同名属性

为了避免创建两次相同的属性,解决方法——寄生组合式继承。其基本思想是:不必为了指定子类型的原型而调用超类型的构造函数,我们所需要的无非就是超类型原型的一个副本而已。

function inheritPrototype(subType, superType){
    var prototype = object(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}

function SuperType(name){
    this.name=name;
    this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName=function(){
    alert(this.name);
};
function SubType(name,age){
    SuperType.call(this,name);
    this.age=age;
}
inheritPrototype(SubType,SuperType);
SubType.prototype.sayAge=function(){
    alert(this.age);
};

上诉例子只调用了一次SuperType构造函数,因此避免了在SubType.prototype上面创建不必要的、多余的属性。寄生组合式继承是引用类型最理想的继承范式
相比之下,第二段程序少了SubType.prototype = new SuperType();这使得SubType.prototype中没有了name和colors属性,实现了避免了在SubType.prototype上面创建不必要的、多余的属性的目的。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/83389.html

相关文章

  • 20170607-面向对象03-判断对象类型的方法

    摘要:这种方法也存在这样的问题如果修改了构造函数的原型对象,之前创建的对象无法通过这种方式来确定类型修改构造函数的原型对象会导致之前创建的对象无法通过这种方式判断类型判断对象继承自哪些父类型使用使用 判断对象类型的方法 使用原型对象上的constructor属性来判断 每个对象的原型上都有一个constructor属性,指向了其构造函数 注意:对象没有constructor属性(除非自己添加...

    zhoutao 评论0 收藏0
  • 20170607-面向对象01-创建对象

    摘要:原型对象的问题省略了为构造函数传递参数,导致了所有实例在默认情况下都取得相同的属性值。即使有其他代码会给这个对象添加方法或数据成员,但也不可能有别的方法访问传入到构造函数中的原始数据。 创建对象 1.Object构造函数 创建一个Object的实例,然为其添加属性和方法(早期创建对象的模式) var person = new Object(); person.name = Nichol...

    NusterCache 评论0 收藏0
  • 20170607-私有变量

    摘要:私有变量任何在函数中定义的变量,都可以认为是私有变量,因为在不能再函数的外部访问这些变量。我们把有权访问私有变量和私有函数的公有方法称为特权方法。模块模式模块模式是为单例创建私有变量和特权方法。 私有变量 任何在函数中定义的变量,都可以认为是私有变量,因为在不能再函数的外部访问这些变量。私有变量包括函数的参数、函数中定义的变量和函数。我们把有权访问私有变量和私有函数的公有方法称为特权方...

    trilever 评论0 收藏0
  • 从-1开始的ES6探索之旅02:小伙子,你对象咋来的?续篇 - 你的对象班(class)里来的?

    摘要:这是因为子类没有自己的对象,而是继承父类的对象,然后对其进行加工。 温馨提示:作者的爬坑记录,对你等大神完全没有价值,别在我这浪费生命温馨提示-续:你们要非得看,我也拦不住,但是至少得准备个支持ES6的Chrome浏览器吧?温馨提示-再续:ES6简直了,放着不用简直令人发指! 书接上回,即便是程序员,也还是能够通过自己的努力辛辛苦苦找到合适对象的,见前文《javascript对象不完全...

    incredible 评论0 收藏0
  • JS对象(1)重新认识面向对象

    摘要:对象重新认识面向对象面向对象从设计模式上看,对象是计算机抽象现实世界的一种方式。除了字面式声明方式之外,允许通过构造器创建对象。每个构造器实际上是一个函数对象该函数对象含有一个属性用于实现基于原型的继承和共享属性。 title: JS对象(1)重新认识面向对象 date: 2016-10-05 tags: JavaScript 0x00 面向对象 从设计模式上看,对象是...

    superw 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<