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 相关文章推荐
Prototype使用指南之ajax
Jan 10 Javascript
初步认识JavaScript函数库jQuery
Jun 18 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 Javascript
javascript闭包概念简单解析(推荐)
Jun 03 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
Nov 04 Javascript
微信小程序template模板实例详解
Oct 27 Javascript
如何开发出更好的JavaScript模块
Dec 22 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Apr 22 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
使用axios请求时,发送formData请求的示例
Oct 29 Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 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下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
使用PHP计算两个路径的相对路径
2013/06/14 PHP
php使用递归计算文件夹大小
2014/12/24 PHP
orm获取关联表里的属性值
2016/04/17 PHP
CI框架常用函数封装实例
2016/11/21 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
PHP读取文件,解决中文乱码UTF-8的方法分析
2020/01/22 PHP
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
jquery实现网站超链接和图片提示效果
2013/03/21 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
JavaScript保留两位小数的2个自定义函数
2014/05/05 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
实践中学习AngularJS表单
2016/03/21 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
2017/06/05 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
JavaScript实现的数字与字符串转换功能示例
2017/08/23 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
2018/07/09 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
[59:53]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第二场 3月6日
2021/03/11 DOTA
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
Python基础练习之用户登录实现代码分享
2017/11/08 Python
python使用response.read()接收json数据的实例
2018/12/19 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
房屋买卖协议书
2014/04/10 职场文书
考博专家推荐信
2014/05/10 职场文书
专业见习报告范文
2014/11/03 职场文书
公司捐书倡议书
2015/04/27 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python