原型

本文深入探讨JavaScript中的三种继承模式:纯原型链继承、借用构造函数继承及组合继承。通过具体示例展示了每种模式的工作原理及其优缺点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原型是JavaScript接触到的第一个比较重要的概念,发现一个写的比较好的文章,总结一下

转自:https://segmentfault.com/a/1190000006639939

1 先弄懂什么是prototype以及_proto_

_proto_:任何一个对象Object都有_proto_,它是每一个对象的私有属性,是天生自带的。
prototype:不是任何对象都有prototype,只有构造函数有prototype,是后天赋予的。

2 原型链查找:

调用一个对象的属性或方法,一但这个对象中没有,就去这个对象的_proto_中查找。这个对象的_proto_指向自己构造函数的prototype属性

3 继承

纯原型链继承,借用构造函数继承,组合继承

#纯原型链继承

function Father() {
    this.likeFood= ['牛排','饺子','啤酒','可乐']
}
Father.prototype.saylikeFood = function () {
    console.log(this.likeFood);  
};

function Son() {
}
Son.prototype = new Father();

var zhangsan = new Son();
zhangsan.likeFood.push('西瓜');
zhangsan.saylikeFood(); // ["牛排", "饺子", "啤酒", "可乐", "西瓜"]

纯原型链的继承方式,其实说白了就是把继承的对象的prototype等于继承自构造函数的实例。
但是这样的方式有问题。接着上面的代码的后面我们再写:

var lisi = new Son();
lisi.saylikeFood(); // ["牛排", "饺子", "啤酒", "可乐", "西瓜"]

看出问题了吧,zhangsan直接修改了其构造函数的likeFood
导致我们再实例的对象也收到了修改的影响,
因此这种继承方式有缺陷

#借用构造函数继承

function Father(name) {
    this.name = name;
    this.sayName = function () {
        console.log(this.name);
    }
}

function Son(name, age) {
    Father.call(this, name);//继使用call承了Father的属性
    this.age = age;
}

var zhangsan = new Son('zhangsan', 17);

这种继承方式并没有利用到原型以及原型链的概念,它主要利用call的特性,call的第一个参数传入this,后面的参数传入函数所需的参数。
这种方式归根结底其实就是在实例一个对象的时候,向这个对象的上面添加所需的属性和方法。

但是其实这种方式也有问题,什么问题呢?
按照这种方式,每次new一个对象,就是实例化一个对象,都会向这个对象身上添加一堆属性和方法。
添加属性是没问题的,但是每次在对象身上添加的方法,这个函数就要重写一次。
函数不能进行复用,这就是最大的问题!

#组合继承

function Father(name) {
    this.name = name;
}
Farther.prototype.sayName = function () {
    console.log(this.name);
}

function Son(name, age) {
    Farther.call(this, name);
    this.age = age;
}

Son.prototype = new Father();
Son.constructor = Son;
Son.prototype.sayage = function () {
    console.log(this.age);
}

var zhangsan = new Son();

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值