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 相关文章推荐
jquery select(列表)的操作(取值/赋值)
Mar 16 Javascript
JSON格式化输出
Nov 10 Javascript
用js判断是否为360浏览器的实现代码
Jan 15 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
Sep 28 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
Angular value与ngValue区别详解
Nov 27 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 Javascript
Vue组件为什么data必须是一个函数
Jun 11 Javascript
vue实现移动端触屏拖拽功能
Aug 21 Javascript
jquery实现简易验证插件封装
Sep 13 jQuery
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
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
phpStorm+XDebug+chrome 配置详解
2019/04/01 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
jQuery的学习步骤
2011/02/23 Javascript
工作需要写的一个js拖拽组件
2011/07/28 Javascript
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
2014/01/13 Javascript
DOM 事件流详解
2015/01/20 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
2015/05/25 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
Javascript 实现微信分享(QQ、朋友圈、分享给朋友)
2016/10/21 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
如何自定义微信小程序tabbar上边框的颜色
2019/07/09 Javascript
小程序使用watch监听数据变化的方法详解
2019/09/20 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
HTML5中原生的右键菜单创建方法
2016/06/28 HTML / CSS
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
培训楼经理岗位责任制
2014/02/10 职场文书
农村文化活动总结
2014/08/28 职场文书
大学运动会通讯稿
2015/07/18 职场文书
mysql批量新增和存储的方法实例
2021/04/07 MySQL
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA
如何通过一篇文章了解Python中的生成器
2022/04/02 Python
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL