资讯专栏INFORMATION COLUMN

javascript的对象与继承

jone5679 / 883人阅读

摘要:的构造函数是什么它是一个普通的函数它内部用了关键字它有一个属性,这个是一个对象当然,其实每一个函数都有属性这个上面是可以被继承的属性可被继承的属性以上是一个从原型对象生成实例对象的例子。

1: JavaScript的构造函数是什么?
1: 它是一个普通的函数
2: 它内部用了this关键字
3: 它有一个prototype属性,这个prototype是一个对象(当然,其实每一个函数都有prototype属性)
4: 这个prototype上面是可以被继承的属性

function Apple(price, colour){
    this.price = price;
    this.colour = colour;
}
Apple.prototype.type = "fruit"; //可被继承的属性

var appleRed = new Apple(10, "red");
var appleGreen = new Apple(20, "green");

appleRed.colour;//red
appleGreen.colour;//green
appleRed.type; //fruit
appleGreen.type;//fruit

以上是一个从原型对象(Apple)生成实例对象(appleGreen, appleRed)的例子。接下来看看基于构造函数继承:
首先假设有两个构造函数:

function Fruit(){
    this.taste = "sweet";
}

function Apple(color){
    this.color = "red"
}

我们希望Apple能继承Fruit,怎么做?总共有5种继承方法:
1: 构造函数绑定
在子构造函数中,在父构造器身上调用call或者apply方法

function Fruit(){
    this.taste = "sweet";
}

function Apple(color){
    Fruit.apply(this, arguments);
    this.color = "red"
}

var appleRed = new Apple("red");
appleRed.taste;// "sweet"

2: prototype赋值
实例化一个父对象,然后把它赋给子构造函数的prototype属性

function Fruit(){
    this.taste = "sweet";
}

function Apple(color){
    this.color = "red"
}

Apple.prototype = new Fruit();
Apple.prototype.constructor = Apple;//特别注意这一行

var appleRed = new Apple("red");
appleRed.taste;//"sweet"
appleRed.constructor === Apple;//true

每一个实例都有一个constructor,继承自构造函数的prototype的constructor属性。在执行了

Apple.prototype = new Fruit();

之后,相当于是把Apple的prototype这个对象整个覆盖了,这个时候 Apple.prototype.constructor是Fruit这个方法。这样子就意味这appleRed.constructor也是Fruit,这样继承就混乱了,因为appleRed明明是由Apple这个构造方法实例化出来的。所以我们要把Apple正确的constructor重新设置回去:

Apple.prototype.constructor = Apple;

3: 把父构造函数的prototype直接赋给子构造函数的prototype

function Fruit(){}
Fruit.prototype.taste = "sweet";

function Apple(color){
    this.color = "red"
}

Apple.prototype = Fruit.prototype;
Apple.prototype.constructor = Apple;

var appleRed = new Apple("red");
appleRed.taste;//"sweet"
Fruit.prototype.constructor === Apple;//true

虽然实现了继承,但是现在Apple和Fruit的prototype指向了同一段内存,任何对Apple.prototype的修改都会影响到Fruit.prototype,所以代码最后一行的这种结果,是我们不愿意看到的。
4: 利用一个空的中介构造函数
其实第四种是第二种和第三种的结合

function Fruit(){}
Fruit.prototype.taste = "sweet";

function Apple(color){
    this.color = "red"
}

var F = function(){};
F.prototype = Fruit.prototype;
Apple.prototype = new F();
Apple.prototype.constructor = Apple;

var appleRed = new Apple("red");
appleRed.taste;//"sweet"
appleRed.constructor === Apple;//true

1: 中介构造函数的prototype=父构造函数的prototype;
2: 子构造函数的prototype=中介构造函数的一个实例;
3: 把子构造函数的constructor复原为自己
5: copy继承
就是把父构造函数的prototype上的所有属性和方法拷贝进子构造方法。

function Fruit(){}
Fruit.prototype.taste = "sweet";

function Apple(color){
    this.color = "red"
}

function extend(child, parent){
    var c = child.prototype;
    var p = parent.prototype;
    for(var i in p){
        c[i] = p[i]
    }
}
extend(Apple, Fruit);//调用继承方法
var appleRed = new Apple("red");
appleRed.taste;//"sweet"

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

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

相关文章

  • 理解JavaScript核心知识点:原型

    摘要:首先,需要来理清一些基础的计算机编程概念编程哲学与设计模式计算机编程理念源自于对现实抽象的哲学思考,面向对象编程是其一种思维方式,与它并驾齐驱的是另外两种思路过程式和函数式编程。 JavaScript 中的原型机制一直以来都被众多开发者(包括本人)低估甚至忽视了,这是因为绝大多数人没有想要深刻理解这个机制的内涵,以及越来越多的开发者缺乏计算机编程相关的基础知识。对于这样的开发者来说 J...

    iKcamp 评论0 收藏0
  • 彻底搞懂JavaScript继承

    摘要:这正是我们想要的太棒了毫不意外的,这种继承的方式被称为构造函数继承,在中是一种关键的实现的继承方法,相信你已经很好的掌握了。 你应该知道,JavaScript是一门基于原型链的语言,而我们今天的主题 -- 继承就和原型链这一概念息息相关。甚至可以说,所谓的原型链就是一条继承链。有些困惑了吗?接着看下去吧。 一、构造函数,原型属性与实例对象 要搞清楚如何在JavaScript中实现继承,...

    _ivan 评论0 收藏0
  • 继承原型

    摘要:既然构造函数有属于自己的原型对象,那么我们应该能让另一个构造函数来继承他的原型对象咯我们在构造函数内部执行了函数并改变了函数内部的指向其实这个指向的是实例化之后的对象。 我们在讨(mian)论(shi)JavaScript这门语言时,总是绕不过的一个话题就是继承与原型链。那么继承与原型链到底是什么呢? 我很喜欢的一个聊天模式是:我不能说XX是什么,我只能说XX像什么。也就是说我不直接跟...

    My_Oh_My 评论0 收藏0
  • SegmentFault 技术周刊 Vol.32 - 七夕将至,你对象”还好吗?

    摘要:很多情况下,通常一个人类,即创建了一个具体的对象。对象就是数据,对象本身不包含方法。类是相似对象的描述,称为类的定义,是该类对象的蓝图或原型。在中,对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中,对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了,离年底老妈老爸...

    李昌杰 评论0 收藏0
  • SegmentFault 技术周刊 Vol.32 - 七夕将至,你对象”还好吗?

    摘要:很多情况下,通常一个人类,即创建了一个具体的对象。对象就是数据,对象本身不包含方法。类是相似对象的描述,称为类的定义,是该类对象的蓝图或原型。在中,对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中,对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了,离年底老妈老爸...

    Lyux 评论0 收藏0
  • SegmentFault 技术周刊 Vol.32 - 七夕将至,你对象”还好吗?

    摘要:很多情况下,通常一个人类,即创建了一个具体的对象。对象就是数据,对象本身不包含方法。类是相似对象的描述,称为类的定义,是该类对象的蓝图或原型。在中,对象通过对类的实体化形成的对象。一类的对象抽取出来。注意中,对象一定是通过类的实例化来的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 马上就要到七夕了,离年底老妈老爸...

    AaronYuan 评论0 收藏0

发表评论

0条评论

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