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 相关文章推荐
javascript中有趣的反柯里化深入分析
Dec 05 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
JS中window.open全屏命令解析及使用示例
Dec 11 Javascript
jQuery中复合属性选择器用法实例
Dec 31 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
Oct 27 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
May 05 Javascript
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
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 根据key 给二维数组分组
2016/12/09 PHP
php基于ob_start(ob_gzhandler)实现网页压缩功能的方法
2017/02/18 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
PHP配置ZendOpcache插件加速
2019/02/14 PHP
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
解析Jquery取得iframe中元素的几种方法
2013/07/04 Javascript
Javascript中引用示例介绍
2014/02/21 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
sails框架的学习指南
2014/12/22 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
百度地图给map添加右键菜单(判断是否为marker)
2016/03/04 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
[41:41]TFT vs Secret Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
华为慧通面试题
2012/09/11 面试题
体育教育专业自荐信范文
2013/12/20 职场文书
单位人事专员介绍信
2014/01/11 职场文书
企业总经理职责
2014/02/02 职场文书
幼儿园教师教学反思
2014/02/06 职场文书
团日活动总结报告
2014/06/25 职场文书
学校百日安全生产活动总结
2014/07/05 职场文书
不听老师话的万能检讨书
2014/10/04 职场文书
小程序实现文字循环滚动动画
2021/06/14 Javascript