详谈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 相关文章推荐
js过滤数组重复元素的方法
Sep 05 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
js动态修改整个页面样式达到换肤效果
May 23 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
node.js学习之交互式解释器REPL详解
Dec 08 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
Apr 13 Javascript
vue.js简单配置axios的方法详解
Dec 13 Javascript
VUE + UEditor 单图片跨域上传功能的实现方法
Feb 08 Javascript
在vue中封装可复用的组件方法
Mar 01 Javascript
利用jsonp解决js读取本地json跨域的问题
Dec 11 Javascript
详解jenkins自动化部署vue
May 14 Javascript
vue 组件间的通信之子组件向父组件传值的方式
Jul 29 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 CURL使用详解
2019/03/21 PHP
详解PHP PDO简单教程
2019/05/28 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
javascript replace方法与正则表达式
2008/02/19 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
JavaScript变量声明详解
2014/11/27 Javascript
JavaScript中的继承方式详解
2015/02/11 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
详解用vue-cli来搭建vue项目和webpack
2017/04/20 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
Python基于requests实现模拟上传文件
2020/04/21 Python
python实现图片转字符画
2021/02/19 Python
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
大专生工程监理求职信
2013/10/04 职场文书
入党申请书自我鉴定
2013/10/12 职场文书
公积金转移接收函
2014/01/11 职场文书
离职证明标准格式
2014/09/15 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
离婚协议书包括哪些内容
2014/10/16 职场文书
社区母亲节活动总结
2015/02/10 职场文书
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python
详解JAVA的控制语句
2021/11/11 Java/Android
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android