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 相关文章推荐
Javascript 入门基础学习
Mar 10 Javascript
js限制文本框为整数和货币的函数代码
Oct 13 Javascript
网页从弹窗页面单选框传值至父页面代码分享
Sep 29 Javascript
前端性能优化及技巧
May 06 Javascript
JS使用onerror捕获异常示例
Aug 03 Javascript
JS控制HTML元素的显示和隐藏的两种方法
Sep 27 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
一道面试题引发的对javascript类型转换的思考
Mar 06 Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 Javascript
Vue编程式跳转的实例代码详解
Jul 10 Javascript
JS实现滑动拼图验证功能完整示例
Mar 29 Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 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
一个颜色轮换的简单例子
2006/10/09 PHP
mysql limit查询优化分析
2008/11/12 PHP
php实现两表合并成新表并且有序排列的方法
2014/12/05 PHP
PHP解密支付宝小程序的加密数据、手机号的示例代码
2021/02/26 PHP
理解Javascript_03_javascript全局观
2010/10/11 Javascript
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
JS命令模式例子之菜单程序
2016/10/10 Javascript
javascript观察者模式实现自动刷新效果
2017/09/05 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
vue的无缝滚动组件vue-seamless-scroll实例
2017/12/18 Javascript
select标签设置默认选中的选项方法
2018/03/02 Javascript
vue实现添加与删除图书功能
2018/10/07 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
python开发简易版在线音乐播放器
2017/03/03 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
使用CSS变量实现炫酷惊人的悬浮效果
2019/04/26 HTML / CSS
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
英国床垫在线:Mattress Online
2016/12/07 全球购物
介绍一下SQL Server的全文索引
2013/08/15 面试题
大学毕业通用个人的求职信
2013/12/08 职场文书
优秀毕业自我鉴定
2014/02/15 职场文书
社团活动总结书
2014/06/27 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
党校学习心得体会范文
2014/09/09 职场文书
个人作风建设剖析材料
2014/10/11 职场文书
食品安全责任书范本
2015/05/09 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
spring cloud gateway中如何读取请求参数
2021/07/15 Java/Android