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高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
js实现网页自动刷新可制作节日倒计时效果
May 27 Javascript
jQuery的position()方法详解
Jul 19 Javascript
整理Javascript基础语法学习笔记
Nov 29 Javascript
js中遍历对象的属性和值的方法
Jul 27 Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 Javascript
vue实现自定义多选与单选的答题功能
Jul 05 Javascript
详解vue项目打包步骤
Mar 29 Javascript
layui的面包屑或者表单不显示的解决方法
Sep 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实现今天是星期几的几种写法
2013/09/26 PHP
php字符编码转换之gb2312转为utf8
2013/10/28 PHP
PHP生成随机密码类分享
2014/06/25 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
实现JavaScript中继承的三种方式
2009/10/16 Javascript
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
JavaScript之Vue.js【入门基础】
2016/12/06 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
2019/02/28 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
分享15个最受欢迎的Python开源框架
2014/07/13 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
Python实现字典按照value进行排序的方法分析
2017/12/23 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
python中的global关键字的使用方法
2019/08/20 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
python GUI库图形界面开发之PyQt5不规则窗口实现与显示GIF动画的详细方法与实例
2020/03/09 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
CSS3 box-sizing属性详解
2016/11/15 HTML / CSS
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
结婚喜宴主持词
2014/03/14 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
小学领导班子对照材料
2014/08/23 职场文书
群众路线对照检查材料思想汇报怎么写
2014/09/18 职场文书
部队个人年终总结
2015/03/02 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书