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异步请求数据实例代码
Dec 28 Javascript
javascript中的toFixed固定小数位数 简单实例分享
Jul 12 Javascript
JavaScript中的console.group()函数详细介绍
Dec 29 Javascript
实例详解ECMAScript5中新增的Array方法
Apr 05 Javascript
jQuery实现的自动加载页面功能示例
Sep 04 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 Javascript
vue2.x数组劫持原理的实现
Apr 19 Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 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
PHP.MVC的模板标签系统(四)
2006/09/05 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
Eclipse去除js(JavaScript)验证错误
2014/02/11 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
JavaScript实现找质数代码分享
2015/03/24 Javascript
Angular实现form自动布局
2016/01/28 Javascript
JavaScript中的ParseInt("08")和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
使用python实现省市三级菜单效果
2016/01/20 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
Python微信库:itchat的用法详解
2017/08/14 Python
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
python处理csv中的空值方法
2018/06/22 Python
Python微信操控itchat的方法
2019/05/31 Python
python利用faker库批量生成测试数据
2020/10/15 Python
平面设计自荐信
2013/10/07 职场文书
理工科学生的自我评价
2013/12/15 职场文书
护士求职简历自我评价
2015/03/10 职场文书
MySQL COUNT函数的使用与优化
2021/05/10 MySQL