JavaScript 原型 prototype 使用经验

本文详细探讨了JavaScript中通过new关键字创建对象时原型链的工作原理,包括如何重写原型、原型链被重写后的影响,以及如何通过动态修改原型来更新实例的行为。
初始化一个父类,并添加方法
1function Foo(){}
2Foo.prototype.sayName = function(){
3    return '初始原型';
4}
5
6var foo1 = new Foo();
7foo1.sayName() //'初始原型'
new方式重写原型;切断了新实例与原有原型之间的连接
 1function Bar(){}
2Foo.prototype = new Bar(); // 重写原型
3var foo2 = new Foo();
4foo2.sayName();            // error 报错;找不到这个方法
5
6Bar.prototype.sayName = function(){
7    return '第一次重写的原型';
8}
9
10// 动态
11foo2.sayName() // '第一次重写的原型'
12var foo3 = new Foo();
13foo3.sayName() // '第一次重写的原型'
覆盖重写原型后定义的方法
1Foo.prototype.sayName = function(){
2    return '覆盖了新原型的方法'
3}
4
5var foo4 = new Foo();
6foo4.sayName() // '覆盖了新原型的方法'
覆盖原型的方法,并不影响其他实例调用这个方法;
 1// 其他实例还会继续调用(覆盖前)原来的那个方法
2var bar = new Bar();
3bar.sayName() // '第一次重写的原型'
4
5// 对象字面量方式会重写原型对象; 切断了新实例与原有原型的连接
6Foo.prototype = {
7    getHeightfunction(){
8        return '高度是2m'
9    },
10    getWeightfunction(){
11        return '重量是1kg'
12    }
13}
14// 相当于 Foo.property = new Object(); 然后再定义方法...
15
16var foo5 = new Foo();
17foo5.sayName() // error报错;找不到这个方法
18// 但原有的实例 还是能连接到 原有的原型
19foo4.sayName() //'覆盖了新原型的方法'
20
21// 此时
22Foo.prototype.__proto__ == Object.prototype // true
prototype 的使用经验,主要是判断实例是在重写原型之前定义,还是重写原型之后定义的;
  1. 重写原型会切断 原有实例 与 现有原型 的连接
  2. 重写原型会切断 现有实例 与 原有原型 的连接
记住一句话

实例中的指针仅指向原型,而不指向构造函数

转载于:https://www.cnblogs.com/rencoo/p/9383826.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值