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实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
js兼容的placeholder属性详解
Aug 18 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
javascript数据类型验证方法
Dec 31 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
js实现String.Fomat的实例代码
Sep 02 Javascript
Angular2使用Augury来调试Angular2程序
May 21 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
Sep 12 Javascript
Vue实现数据表格合并列rowspan效果
Nov 30 Javascript
在vue中利用v-html按分号将文本换行的例子
Nov 14 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 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实现定时执行任务的方法
2014/10/05 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
laravel框架模板之公共模板、继承、包含实现方法分析
2019/08/30 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
laravel 字段格式化 modle 字段类型转换方法
2019/09/30 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
YUI 读码日记之 YAHOO.lang.is*
2008/03/22 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
vue-cli如何添加less 以及sass
2017/07/06 Javascript
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
vue基础之事件v-onclick="函数"用法示例
2019/03/11 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
Python简单定义与使用二叉树示例
2018/05/11 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
对python中的argv和argc使用详解
2018/12/15 Python
Python3操作读写CSV文件使用包过程解析
2020/04/10 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
Python OpenCV中的numpy与图像类型转换操作
2020/12/11 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
新锐科技Java程序员面试题
2016/07/25 面试题
生物制药自我鉴定
2014/01/25 职场文书
保护环境倡议书500字
2014/05/19 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
领导欢迎词致辞
2015/01/23 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
详解Redis集群搭建的三种方式
2021/05/31 Redis
详解Python内置模块Collections
2022/03/22 Python