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 相关文章推荐
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 Javascript
Javascript验证上传图片大小[前台处理]
Jul 18 Javascript
JS判断变量是否为空判断是否null
Jul 25 Javascript
浅析Javascript中“==”与“===”的区别
Dec 23 Javascript
由ReactJS的Hello world说开来
Jul 02 Javascript
基于js实现投票的实例代码
Aug 04 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
讲解vue-router之什么是编程式路由
May 28 Javascript
vue给组件传递不同的值方法
Sep 29 Javascript
webpack 从指定入口文件中提取公共文件的方法
Nov 13 Javascript
vue实现的下拉框功能示例
Jan 29 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 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操作mysql数据库分表的方法
2016/06/09 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
javascript控制层显示或隐藏的方法
2015/07/22 Javascript
javascript实现简单的分页特效
2015/08/12 Javascript
正则表达式优化JSON字符串的技巧
2015/12/24 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
详解AngularJs路由之Ui-router-resolve(预加载)
2017/06/13 Javascript
Vue实现左右菜单联动实现代码
2018/08/12 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
浅谈django model的get和filter方法的区别(必看篇)
2017/05/23 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
简单介绍python封装的基本知识
2019/08/10 Python
python简单实现插入排序实例代码
2020/12/16 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
详解CSS3媒体查询响应式布局bootstrap 框架原理实战(推荐)
2020/11/16 HTML / CSS
HTML5 Canvas——用路径描画线条实例介绍
2013/06/09 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
2013年员工自我评价范文
2013/12/27 职场文书
《和田的维吾尔》教学反思
2014/04/14 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
人事局接收函
2015/01/31 职场文书
《草船借箭》教学反思
2016/02/23 职场文书
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python