JavaScript中原型链存在的问题解析


Posted in Javascript onSeptember 25, 2016

我们知道使用原型链实现继承是一个goodway:)看个原型链继承的例子。

function A () {
this.abc = 44;
}
A.prototype.getAbc = function (){
return this.abc;
};
function B() {
}
B.prototype = new A(); // B通过A的实例完成了继承,形成了原型链(B的原型就是A的实例)
var b = new B();
b.getAbc();

关系如下:b(实例) ->B.prototype = new A() -> A.prototype ->Object.prototype

可是在这种看似“漂亮”的继承方法中确存在问题。

1. 最主要的问题来自包含引用类型值的原型,我们知道共享原型是存在问题的,抛出一个例子

function Person () { 
}
Person.prototype = {
friends = ["a","b"]; 
}
var person1 = new Person();
var person2 = new Person();
person1.friends.push("c");
console.log(person1.friends); // "a","b","c"
console.log(person2.friends); //"a","b","c"

通过引用实例改变了原型中本来中的值,同时也影响了其他实例。(这就是为什么引用类型值要定义在构造函数中而非原型中的原因)

在原型链中同样也会有同样的情况出现:

function A () {
this.numbers = [1,2,3];
}
function B() {
}
B.prototype = new A();
var b = new B();
var a = new A();
b.numbers.push(4); 
b.numbers; //1234
var b2 = new B(); 
b2.numbers; //1234
a.numbers; //123

我们看到出现了和上面一样的情况(在通过原型来继承时,原型实际上会变成另一个类型的实例。于是原先的实例属性也就顺理成章的变成了现在原型属性了)。

可是我们看到A的实例a.numbers;依然是123,说明在B继承A的实例时是复制了A实例中的所有属性(包括prototype指针,形成原型链)并非引用(其实这里有疑问,是因为继承的是A()的实例所以才不会影响A()创建其他实例的表现吗?)。

2.在创建子类实例时,不可以在不影响所有对象实例的情况下给超类传递参数。

function A (light) {
this.light1 = light;
};
function B (light) {
this.light = light;
};
//给B赋值的同时,想给A赋值,无法实现
B.prototype = new A();
var C = new B(123);
console.log(C.light);
console.log(C.light1);

想实现这个需要手动调用A的构造函数,会影响其他实例

function A (light) {
this.light1 = light;
};
function B (light) {
this.light = light;
A.call(this,light);//手动调用A的构造方法
};
//给B赋值的同时,给A赋值
B.prototype = new A();
var C = new B(123);
console.log(C.light);
console.log(C.light1);

以上所述是小编给大家介绍的JavaScript中原型链存在的问题解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS解密入门 最终变量劫持
Jun 25 Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
js复制到剪切板的实例方法
Jun 28 Javascript
JS弹出层的显示与隐藏示例代码
Dec 27 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
利用jsonp与代理服务器方案解决跨域问题
Sep 14 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
Jun 25 Javascript
详解在create-react-app使用less与antd按需加载
Dec 06 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 Javascript
微信小程序 setData 对 data数据影响问题
Apr 18 Javascript
JS创建自定义对象的六种方法总结
Dec 15 Javascript
JavaScript制作颜色反转小游戏
Sep 25 #Javascript
JavaScript实现简单的日历效果
Sep 25 #Javascript
javascript实现根据汉字获取简拼
Sep 25 #Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 #Javascript
微信小程序前端源码逻辑和工作流
Sep 25 #Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 #Javascript
原生JS实现网络彩票投注效果
Sep 25 #Javascript
You might like
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
PHP中操作ini配置文件的方法
2013/04/25 PHP
PHP中执行cmd命令的方法
2014/10/11 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
php抽象类用法实例分析
2015/07/07 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
PHP对象相关知识总结
2017/04/09 PHP
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
JS array 数组详解
2009/03/22 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
JS 事件绑定、事件监听、事件委托详细介绍
2016/09/28 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
Vue——前端生成二维码的示例
2020/12/19 Vue.js
python在命令行下使用google翻译(带语音)
2014/01/16 Python
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
python数据结构之链表详解
2017/09/12 Python
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
Django Rest framework之权限的实现示例
2018/12/17 Python
python的launcher用法知识点总结
2020/08/07 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
美国高级工作服品牌:Carhartt
2018/01/25 全球购物
Nike香港官网:Nike HK
2019/03/23 全球购物
英国最大的宠物商店:Pets at Home
2019/04/17 全球购物
解释下列WebService名词:WSDL、SOAP、UDDI
2012/06/22 面试题
精彩的推荐信范文
2013/11/26 职场文书
设计师个人求职信范文
2014/02/02 职场文书
电大会计学自我鉴定
2014/02/06 职场文书
幼儿园教学随笔感言
2014/02/23 职场文书
自我推荐信怎么写
2015/03/24 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
同意报考证明
2015/06/17 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书