javascript 将共享属性迁移到原型中去的实现方法


Posted in Javascript onAugust 31, 2016

当我们用一个构造函数创建对象时,其属性就会被添加到this中去。并且被添加到this中的属性实际上不会随着实体发生改变,这时,我们这种做法显得会很没有效率。例如:

function her(){
  this.name = 'Anna';
}

这意味着每次我们new her()创建一个实例对象的时候都会生成一个全新的name属性,并在内存中拥有属于该属性自己的存储空间。而事实上,我们可以将name属性添加到原型上去,这样一来所有实例都可以共享这个name属性了:

function her(){}
her.prototype.name = 'Anna';

这样一来,我们再用new her()创建对象的时候,name属性就不再是新对象的私有属性了,而是被添加到该对象的原型中去了。虽然这种做法会很有效率,但这也是针对实例对象中的不可变属性而言的,这是一定的不然的话改一下这个属性,所有被创建的新对象的这个属性都会被改变,这可不是我们想要的啊~~~。对象的公有属性尤其适合这种方法。

下面,我们来改进以前的一个例子:

function her(){};
her.prototype.name = 'Anna';
her.prototype.toString = function(){
  return this.name;
}

function his(){};
his.prototype = new her();
his.prototype.constructor = his;
his.prototype.sex = 'women';

如您所见,通常我们在进行原型对象扩展之前,我们现完成了相关继承工作的构建,否则his.prototype中后续新的属性方法有可能会抹掉继承来的东西。

function child(f, m){
  this.eat = f;
  this.don = m;
}
child.prototype = new his();
child.prototype.constructor = child;
child.prototype.name = 'Jok';
child.prototype.fun = function(){
  return this.eat + this.don
}

如您所见,实际上调用toString()这个方法的区别仅仅在于幕后的少量操作。主要区别也就是属性,方法的查找工作将更多地发生在her.prototype中。

以上这篇javascript 将共享属性迁移到原型中去的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js自带函数备忘 数组
Dec 29 Javascript
JS打开新窗口的2种方式
Apr 18 Javascript
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
微信小程序WebSocket实现聊天对话功能
Jul 06 Javascript
JavaScript引用类型Object常见用法实例分析
Aug 08 Javascript
实例介绍JavaScript中多种组合继承
Jan 20 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 Javascript
angular异步验证器防抖实例详解
Mar 31 Javascript
JS前端使用canvas实现物体的点选示例
Aug 05 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 #Javascript
原生js实现tab选项卡切换
Mar 23 #Javascript
jquery的checkbox,radio,select等方法小结
Aug 30 #Javascript
Javascript日期格式化format函数的使用方法
Aug 30 #Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 #Javascript
AngularJS轻松实现双击排序的功能
Aug 30 #Javascript
jQuery simpleModal插件的使用介绍
Aug 30 #Javascript
You might like
PHP 读取文件的正确方法
2009/04/29 PHP
PHP重定向的3种方式
2013/03/07 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
PHP实现的mysql操作类【MySQL与MySQLi方式】
2017/10/07 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
判断js对象是否拥有某一个属性的js代码
2013/08/16 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
2013/10/23 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
微信小程序如何连接Java后台
2019/08/08 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
python二叉树的实现实例
2013/11/21 Python
python中__slots__用法实例
2015/06/04 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
matplotlib中legend位置调整解析
2017/12/19 Python
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
python实现屏保程序(适用于背单词)
2019/07/30 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
八年级数学教学反思
2014/01/31 职场文书
财务会计自荐信范文
2014/02/21 职场文书
企业新年寄语
2014/04/04 职场文书
舞蹈专业求职信
2014/06/13 职场文书
仓管员岗位职责
2015/02/03 职场文书
大二学年个人总结
2015/03/03 职场文书
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL