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 CSS菜单功能 改进版
Dec 20 Javascript
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
Jquery中获取iframe的代码
Jan 11 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
js在IE与firefox的差异集锦
Nov 11 Javascript
浅谈js原生拖放
Nov 21 Javascript
原生js实现可拖拽效果
Feb 28 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
详解使用angular的HttpClient搭配rxjs
Sep 01 Javascript
基于node.js实现爬虫的讲解
Feb 18 Javascript
轻松学习JavaScript函数中的 Rest 参数
May 30 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 新手入门教程
2009/08/03 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
Webkit的跨域安全问题说明
2011/09/13 Javascript
Jquery submit()无法提交问题
2013/04/21 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
javascript Deferred和递归次数限制实例
2014/10/21 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
JavaScript静态类型检查工具FLOW简介
2015/01/06 Javascript
Javascript中typeof 用法小结
2015/05/12 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
HTML5 canvas 9绘制图片实例详解
2016/09/06 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
jQuery模拟淘宝购物车功能
2017/02/27 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
JS实现的倒计时恢复按钮点击功能【可用于协议阅读倒计时】
2018/04/19 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
微信小程序实现手指拖动选项排序
2020/04/22 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
[01:04:14]VP vs TNC 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python中实现延时回调普通函数示例代码
2017/09/08 Python
python3设计模式之简单工厂模式
2017/10/17 Python
Python 读写文件的操作代码
2018/09/20 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
浅谈CSS3中的变形功能-transform功能
2017/12/27 HTML / CSS
Jeep牧马人、切诺基和自由人零配件:4 Wheel Drive Hardware
2017/07/02 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
同步和异步有何异同,在什么情况下分别使用他们?
2012/12/28 面试题
Java实现学生管理系统(IO版)
2022/02/24 Java/Android