详谈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 相关文章推荐
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
javascript 嵌套的函数(作用域链)
Mar 15 Javascript
关于jquery append() html时的小问题的解决方法
Dec 16 Javascript
JQuery触发radio或checkbox的change事件
Dec 18 Javascript
jquery实现动态菜单的实例代码
Nov 28 Javascript
js中文逗号转英文实现
Feb 11 Javascript
jQuery复制表单元素附源码分享效果演示
Sep 30 Javascript
SublimeText自带格式化代码功能之reindent
Dec 27 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
node+express制作爬虫教程
Nov 11 Javascript
React组件中的this的具体使用
Feb 28 Javascript
vue+element加入签名效果(移动端可用)
Jun 17 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
php 删除无限级目录与文件代码共享
2008/11/22 PHP
PHP开发负载均衡指南
2010/07/17 PHP
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
php银联网页支付实现方法
2015/03/04 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
php和vue配合使用技巧和方法
2019/05/09 PHP
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
JavaScript  cookie 跨域访问之广告推广
2016/04/20 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
JS对日期操作封装代码实例
2019/11/08 Javascript
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
Python自动连接ssh的方法
2015/03/07 Python
Swift中的协议(protocol)学习教程
2016/07/08 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
numpy.where() 用法详解
2019/05/27 Python
python系列 文件操作的代码
2019/10/06 Python
用python的turtle模块实现给女票画个小心心
2019/11/23 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
在python中求分布函数相关的包实例
2020/04/15 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
定义css设备类型-Media Queries图表简介及使用方法
2013/01/21 HTML / CSS
全球性的在线时尚男装零售商:boohooMAN
2016/12/17 全球购物
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
战友聚会主持词
2014/04/02 职场文书
沈阳故宫导游词
2015/01/31 职场文书
幼儿园中班教师个人工作总结
2015/02/06 职场文书