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 相关文章推荐
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
Bootstrap3学习笔记(二)之排版
May 20 Javascript
分享JavaScript监听全部Ajax请求事件的方法
Aug 28 Javascript
详谈JavaScript的闭包及应用
Jan 17 Javascript
php输出全部gb2312编码内的汉字方法
Mar 04 Javascript
JavaScript+CSS相册特效实例代码
Sep 07 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 Javascript
微信小程序当前时间时段选择器插件使用方法详解
Dec 28 Javascript
node.js命令行教程图文详解
May 27 Javascript
vue vant Area组件使用详解
Dec 09 Javascript
前端开发之便利店收银系统代码
Dec 27 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
《OVERLORD》第四季,终于等到你!
2020/03/02 日漫
PHP文件上传实例详解!!!
2007/01/02 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
php实现保存周期为1天的购物车类
2017/07/07 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
基于jquery的返回顶部效果(兼容IE6)
2011/01/17 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
2014/06/14 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
python requests 使用快速入门
2017/08/31 Python
Django实现组合搜索的方法示例
2018/01/23 Python
Python实现针对json中某个关键字段进行排序操作示例
2018/12/25 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
用什么库写 Python 命令行程序(示例代码详解)
2020/02/20 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
Python常用断言函数实例汇总
2020/11/30 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
低碳生活倡议书
2014/04/14 职场文书
计生专干事迹
2014/05/28 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
小班上学期幼儿评语
2014/12/30 职场文书
2019年妇科护士的自我鉴定(3篇)
2019/09/26 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
MySQL 数据 data 基本操作
2022/05/04 MySQL
Python使用pandas导入xlsx格式的excel文件内容操作代码
2022/12/24 Python