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 相关文章推荐
jQuery 页面 Mask实现代码
Jan 09 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
javascript回调函数的概念理解与用法分析
May 27 Javascript
Js自定义多选框效果的实例代码
Jul 05 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
vue引入ueditor及node后台配置详解
Jan 03 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 17 Javascript
jQuery实现推拉门效果
Oct 19 jQuery
使用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性能的原理介绍
2012/09/05 PHP
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
js如何设置在iframe框架中指定div不显示
2013/12/04 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
js初始化验证实例详解
2016/11/26 Javascript
使用nodejs爬取前程无忧前端技能排行
2017/05/06 NodeJs
利用Node.js检测端口是否被占用的方法
2017/12/07 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
uni-app实现获取验证码倒计时功能
2020/11/01 Javascript
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
itchat接口使用示例
2017/10/23 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
python做反被爬保护的方法
2019/07/01 Python
Python实现汇率转换操作
2020/05/03 Python
win10安装python3.6的常见问题
2020/07/01 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
大学生党员承诺书
2014/05/20 职场文书
经理任命书模板
2014/06/06 职场文书
维稳工作情况汇报
2014/10/27 职场文书
模范教师事迹材料
2014/12/16 职场文书
会计人员岗位职责
2015/02/03 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
2015秋季运动会通讯稿
2015/07/18 职场文书
信息技术远程培训心得体会
2016/01/09 职场文书