javascript-对象构造2(原型继承)

javascript中没有传统的面向对象模型,不存在类的概念。在js中从其他对象中继承的行为,称为原型式继承。

传统使用构造函数创建对象,每个对象都会重新存储构造函数中的属性和方法代码,造成存储冗杂。使用继承可以避免存储的冗杂。

继承原理:
在实例中查找属性和方法时,会首先查找创建该实例构造函数。若没有查到,则沿着继承链上移查找。

继承行为

原型:行为被继承的对象称为原型。

1. 使用构造函数构造一个对象

function Dog(name, breed, weight) {
    this.name = name;
    this.breed = breed;
    this.weight = weight;
}

2. 设置原型

使用prototype为对象添加原型,接下来可以为构造函数添加原型属性或行为。

Dog.prototype.species = "Canine";

Dog.prototype.bark = function() {
    if (this.weight>25) {
        console.log(this.name + "says Woof");
    } else {
        console.log(this.name + "says Yips");
    }
};

var spot = new Dog("lily", "zzz", 50);
  • 使用以上代码编写创建的Dog实例,都具有bark行为,但是bark代码只在原型中编写一次,不会存在于每个实例中。
  • 在创建实例后对原型修改添加行为和属性,已创建的实例也会随之改变。即原型是动态的。但是如果在实例中修改了行为和属性,则依旧采用实例中的值。
  • 任何情况下,可重写原型的属性和方法,为此只需要在对象实例中提供他们即可。

如何判断属性或行为归属问题hasOwnProperty

每个对象都有这个方法,如果属性在对象中定义则返回true,如果属性在原型中定义则返回false。

spot.hasOwnProperty("species");

返回false。

继承对象

如果不是简单的继承一个方法,需要继承一个对象该如何编写。

1. 创建一个继承要继承对象的实例

var aDog = new Dog()

这里没有传递任何实参,是因为只需要继承小狗原型的小狗队形,不关心细节。

2. 新建实例变成原型

function ShowDog(name, breed, weight, handle) {
    this.name = name;
    this.breed = breed;
    this.weight = weight;
    this.handle = handle;
}

ShowDog.prototype = new Dog(); 

将整个实例复制给要继承对象的构造函数原型。我们依旧可以为这个对象添加其他原型(包括要继承的对象,行为,属性)。

3. 创建继承对象的实例

var scotty = new ShowDog("scotty", "abc", 15, "cookie");

4. 修改细节

对于该方法创建的继承对象,其存在两个问题需要修改

4.1 构造函数的归属修改

使用继承的对象创建的构造函数,系统默认为它处于最初原型的构造函数的实例。可以使用以下代码修改:

ShowDog.prototype.constructor = ShowDog;

此后,使用ShowDog创建的实例,属于ShowDog的实例。若不修改,则属于Dog的实例。

4.2 代码重复

对于name, breed, weight的代码部分原型和继承对象是重复的,因此可以简化。

可以对继承对象进行修改:

function ShowDog(name, breed, weight, handle) {
    Dog.call(this, name, breed, weight);
    this.handle = handle;
}

使用call调用Dog,将实参传入到Dog构造函数中,this指向ShowDog实例的。

替换重复代码。格式为:

需要调用的函数(或对象).call(this, 实参);

注意

  • 对原型进行任何修改都会影响间接或直接继承该原型的所有实例。
  • 所有实例的最终原型都是Object。
  • 可以重写和扩展内置行为。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值