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操作checkbox遇到的问题解决
Jun 29 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
JS平滑无缝滚动效果的实现代码
May 06 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
Nov 10 Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 Javascript
JS简单获得节点元素的方法示例
Feb 10 Javascript
详解如何用VUE写一个多用模态框组件模版
Sep 27 Javascript
微信小程序生成海报分享朋友圈的实现方法
May 06 Javascript
微信小程序实现抖音播放效果的实例代码
Apr 11 Javascript
uni-app如何页面传参数的几种方法总结
Apr 28 Javascript
Vue自动构建发布脚本的方法示例
Jul 24 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 radio 单选框获取与保持值的实现代码
2010/05/15 PHP
php析构函数的简单使用说明
2015/08/24 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
js Form.elements[i]的使用实例
2011/11/13 Javascript
判断日期是否能跨月查询的js代码
2014/07/25 Javascript
浅谈页面装载js及性能分析方法
2014/12/09 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
jQuery可见性过滤选择器用法示例
2016/09/09 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
2016/12/30 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
微信小程序实现的picker多级联动功能示例
2019/05/23 Javascript
javascript 易错知识点实例小结
2020/04/25 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
Sanic框架配置操作分析
2018/07/17 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
python单例模式的应用场景实例讲解
2021/02/24 Python
CSS3 box-sizing属性详解
2016/11/15 HTML / CSS
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
大学生未来职业生涯规划书
2014/02/15 职场文书
美容院店长岗位职责
2014/04/08 职场文书
2014年自愿离婚协议书范本
2014/09/25 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
开展批评与自我批评发言材料
2014/10/17 职场文书
学习走群众路线心得体会
2014/11/05 职场文书
网吧员工管理制度
2015/08/05 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL