详谈js原型继承的一些问题


Posted in Javascript onSeptember 06, 2017

当我们使用原型链继承时,需要谨慎的定义原型上的方法和属性,因为这可能带来意外的结果。

一、谨慎的定义原型上的方法。

当我们想为一个构造函数的原型上定义一个方法时,一定要在更改原型后再定义,否则新的原型对象上不会有定义的这个方法,导致与我们预期的结果不同。例:

function superObj(){}
superObj.prototype.sayHi=function sayHi(){
  console.log('hi');
};
superObj.prototype={
  name:'Poly'
};
var obj=new superObj();
obj.sayHi();//报错!! superObj.sayHi is not a function

正确操作如下

function superObj(){}
superObj.prototype={
  name:'Poly'
};
superObj.prototype.sayHi=function sayHi(){
  console.log('hi');
};
var obj=new superObj();
obj.sayHi();// 'hi'

二、不要使用对象字面量给原型创建属性/方法。

使用对象字面量,就会新创建一个对象,并把新对象的引用地址赋值给构造函数的prototype。例

function superObj(){}
superObj.prototype={
  sayHi:function sayHi(){
    console.log('hi');
  }
}

正确操作如下:

function superObj(){}
superObj.prototype.sayHi=function sayHi(){
  console.log('hi');
}

三、对象实例与原型存在直接对应关系。

意思就是说当一个对__proto__就会保存原型的引用地址,即使构造函数的prototype发生改变,也不会对之前创建的实例中的__proto__产生影响。例

function superObj(){}
superObj.prototype.say=function() {
  console.log('hello');
}
var obj=new superObj();
superObj.prototype={
  say:function() {
    console.log('world');
  }
};
var obj2=new superObj();
obj.say();//'hello'
obj2.say();//'world'

四、最好不要给原型上定义值为引用类型的属性。

如果在原型上定义值为引用类型的属性,那么所有实例都会共享该属性值(引用类型值,指向同一个对象),当其中一个实例修改该引用类型上的值或属性时,所有实例上的都会发生改变。因此值为引用类型的属性,最好在构造函数中定义。例

function superObj(){}
superObj.prototype.ary=[1,2,3];
var obj1=new superObj();
var obj2=new superObj();
obj1.ary[0]=0;//obj1.ary和obj2.ary指向的是同一个数组,当obj1修改此数组时,obj2.ary也会发生改变
console.log(obj2.ary[0]);//0

如果不想让实例共享同一个引用对象,那么就应该在构造函数中进行定义。例

function superObj(){
  this.ary=[1,2,3];
}
var obj1=new superObj();
var obj2=new superObj();
obj1.ary[0]=0;//obj1.ary和obj2.ary指向的不是同一个数组,所以修改obj1.ary不会影响obj2.ary
console.log(obj2.ary[0]);//1

以上这篇详谈js原型继承的一些问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 标题的自动翻转实现代码
Oct 14 Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 Javascript
node.js实现多图片上传实例
Jun 03 Javascript
javascript包装对象实例分析
Mar 27 Javascript
JS获取图片高度宽度的方法分享
Apr 17 Javascript
介绍JavaScript中Math.abs()方法的使用
Jun 14 Javascript
JS递归遍历对象获得Value值方法技巧
Jun 14 Javascript
javascript学习之json入门
Dec 22 Javascript
vue组件通信传值操作示例
Jan 08 Javascript
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
vue组件三大核心概念图文详解
May 30 Javascript
vue路由教程之静态路由
Sep 03 Javascript
浅谈react.js中实现tab吸顶效果的问题
Sep 06 #Javascript
vue组件初学_弹射小球(实例讲解)
Sep 06 #Javascript
node.js-v6新版安装具体步骤(分享)
Sep 06 #Javascript
Angular2里获取(input file)上传文件的内容的方法
Sep 05 #Javascript
浅谈angular4生命周期钩子
Sep 05 #Javascript
webpack踩坑之路图片的路径与打包
Sep 05 #Javascript
js实现鼠标跟随运动效果
Aug 02 #Javascript
You might like
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
广告显示判断
2006/08/31 Javascript
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
Javascript string 扩展库代码
2010/04/09 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
JS实现控制表格内指定单元格内容对齐的方法
2015/03/30 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
微信小程序多音频播放进度条问题
2018/08/28 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
2018/08/31 Javascript
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
pandas dataframe的合并实现(append, merge, concat)
2019/06/24 Python
python中count函数简单用法
2020/01/05 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
Django日志及中间件模块应用案例
2020/09/10 Python
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
PHP两种查询函数array/row的区别
2013/06/03 面试题
"火柴棍式"程序员面试题
2014/03/16 面试题
体育学院毕业生自荐信
2013/11/03 职场文书
三方合作协议书范本
2014/04/18 职场文书
市场营销战略计划书
2014/05/06 职场文书
教师节标语大全
2014/10/07 职场文书
社区灵活就业证明
2014/11/03 职场文书
班主任工作实习计划
2015/01/16 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
Python音乐爬虫完美绕过反爬
2021/08/30 Python
linux下安装redis图文详细步骤
2021/12/04 Redis
HTML常用标签超详细整理
2022/03/19 HTML / CSS
「睡美人」爱洛公主粘土人开订
2022/03/22 日漫