[js高手之路]构造函数的基本特性与优缺点
上文,通过基本的对象创建问题了解了构造函数,本文,我们接着上文继续了解构造函数的基本特性,以及优缺点.
每个对象上面都有一个constructor属性( 严格意义上来说,是原型上的,对象是通过查找到原型找到 constructor属性 ).后面讲到原型的时候,我会用示意图的方式说明
function CreateObj(uName) {
this.userName = uName;
this.showUserName = function () {
return this.userName;
}
}
var obj1 = new CreateObj('ghostwu');
var obj2 = new CreateObj('卫庄');
console.log( obj1.constructor === CreateObj ); //true
console.log( obj2.constructor === CreateObj ); //true
默认情况下,对象的constructor等于实例化对象的构造函数, constructor最初的作用是用来标识对象的,但是并不是特别准确,因为constructor能被修改,
识别对象一般用instanceof关键字.
什么是instanceof?
要理解这个关键字,需要搞清楚原型链,这里,我提前把他放出来
//假设instanceof运算符左边是L,右边是R
L instanceof R
//instanceof运算时,通过判断L的原型链上是否存在R.prototype
L.__proto__.__proto__ ..... === R.prototype ?
//如果存在返回true 否则返回false
注意:instanceof运算时会递归查找L的原型链,即L.__proto__.__proto__.__proto__.__proto__...直到找到了或者找到顶层为止。
所以一句话理解instanceof的运算规则为:
instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型。
console.log( obj1 instanceof Object ); //true
console.log( obj2 instanceof Object ); //true
console.log( obj1 instanceof CreateObj ); //true
console.log( obj2 instanceof CreateObj ); //true
obj1,obj2之所以是Object的实例,因为所有对象继承自Object
借用构造函数
一个空对象,可以借用现有的构造函数,完成属性和方法的复制
function CreateObj(uName) {
this.userName = uName;
this.showUserName = function () {
return this.userName;
}
}
var obj = new Object();
CreateObj.call( obj, 'ghostwu' );
console.log( obj.userName ); //ghostwu
console.log( obj.showUserName() ); //ghostwu
构造函数的优点与缺点
优点就是能够通过instanceof识别对象,缺点是每次实例化一个对象,都会把属性和方法复制一遍
var obj1 = new CreateObj('ghostwu');
var obj2 = new CreateObj('卫庄');
console.log( obj1.showUserName === obj2.showUserName ); //false
从以上执行结果,可以看出obj1.showUserName和obj.showUserName不是同一个【在js中,引用类型比较的是地址, 函数是一种引用类型】,而是存在两个不同
的内存地址,因为每个对象的属性是不一样的,这个没有什么问题,但是方法执行的都是一样的代码,所以没有必要复制,存在多份,浪费内存.这就是缺点
怎么解决构造函数的方法复制多次的问题?
function CreateObj(uName) {
this.userName = uName;
this.showUserName = showUserName;
}
function showUserName (){
return this.userName;
}
var obj1 = new CreateObj('ghostwu');
var obj2 = new CreateObj('卫庄');
console.log( obj1.showUserName === obj2.showUserName ); //true
把对象的方法指向同一个全局函数showUserName, 虽然解决了多次复制问题,但是全局函数非常容易被覆盖,也就是大家经常说的污染全局变量.
比较好的解决方案?
通过原型(prototype)对象,把方法写在构造函数的原型对象上
function CreateObj(uName) {
this.userName = uName;
}
CreateObj.prototype.showUserName = function(){
return this.userName;
}
var obj1 = new CreateObj('ghostwu');
var obj2 = new CreateObj('卫庄');
console.log( obj1.showUserName === obj2.showUserName ); //true
什么是原型对象,以及原型链?且听下回分解
[js高手之路]构造函数的基本特性与优缺点的更多相关文章
- [js高手之路]原型对象(prototype)与原型链相关属性与方法详解
一,instanceof: instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型. 我在之前的两篇文章 [js高手之路]构造函数的基本特性与优缺点 [js高手 ...
- [js高手之路]从原型链开始图解继承到组合继承的产生
基于javascript原型链的层层递进查找规则,以及原型对象(prototype)的共享特性,实现继承是非常简单的事情 一.把父类的实例对象赋给子类的原型对象(prototype),可以实现继承 f ...
- [js高手之路]设计模式系列课程-组合模式+寄生组合继承实战新闻列表
所谓组合模式,就是把一堆结构分解出来,组成在一起,现实中很多这样的例子,如: 1.肯德基套餐就是一种组合模式, 比如鸡腿堡套餐,一般是是由一个鸡腿堡,一包薯条,一杯可乐等组成的 2.组装的台式机同理, ...
- [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件,那么怎么把他们变成动态的index.html文件,这个动态生成的index.htm ...
- [js高手之路] es6系列教程 - promise常见用法详解(resolve,reject,catch,then,all,race)
关于promise我在之前的文章已经应用过好几次,如[js高手之路]Node.js+jade+express+mongodb+mongoose+promise实现todolist,本文就来讲解下pro ...
- [js高手之路] javascript面向对象写法与应用
一.什么是对象? 对象是n个属性和方法组成的集合,如js内置的document, Date, Regexp, Math等等 document就是有很多的属性和方法, 如:getElementById, ...
- [js高手之路] 设计模式系列课程 - jQuery的extend插件机制
这里在之前的文章[js高手之路] 设计模式系列课程 - jQuery的链式调用与灵活的构造函数基础上增加一个extend浅拷贝,可以为对象方便的扩展属性和方法, jquery的插件扩展机制,大致就是这 ...
- [js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解
接着上文[js高手之路] es6系列教程 - 迭代器与生成器详解继续. 在es6中引入了一个新的循环结构for ....of, 主要是用来循环可迭代的对象,那么什么是可迭代的对象呢? 可迭代的对象一般 ...
- [js高手之路] es6系列教程 - 对象功能扩展详解
第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.nam ...
随机推荐
- 【前端】用jQuery实现瀑布流效果
jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早 ...
- java用户界面窗口
java用户界面窗口 窗口框 代码如下: package Day08; import java.awt.Color;import java.awt.FlowLayout;import java.awt ...
- [luogu P2184] 贪婪大陆 [树状数组][线段树]
题目背景 面对蚂蚁们的疯狂进攻,小FF的Tower defence宣告失败……人类被蚂蚁们逼到了Greed Island上的一个海湾.现在,小FF的后方是一望无际的大海, 前方是变异了的超级蚂蚁. 小 ...
- 【css】圆角 +文本阴影
1. css3 圆角 http://www.cnblogs.com/lhb25/archive/2013/01/30/css3-border-radius.html 2. text shawdow ...
- Bean 的生命周期 之 后处理Bean
这里先把Bean 的生命周期总结一下,然后引出后处理Bean 首先,Bean 的生命周期总共有11步: 1.instantiate bean对象实例化 2.populate properties 封装 ...
- 亚马逊AWS EC2云实例AMI安装LNMP环境(1)——Nginx安装
概括:这里选择亚马逊EC2的Linux AMI实例,该Linux服务器是亚马逊预配置的Linux环境,内置多个YUM源,属于亚马逊首推的稳定Linux服务器.默认登录用户名为ec2-user,执行ro ...
- TCP 滑动窗口
滑动窗口协议 流量控制方法 PUSH 慢启动 隔一个报文段确认"的策略实际就是因为 delayed ack,同时接收到两个待确认的ACK包时,就立即发送确认包. 滑动窗口实例 解 ...
- [补档][JLOI 2017]聪明的燕姿
[NOI 2008]假面舞会 题目 阴天傍晚车窗外 未来有一个人在等待 向左向右向前看 爱要拐几个弯才来 我遇见谁会有怎样的对白 我等的人他在多远的未来 我听见风来自地铁和人海 我排着队拿着爱的号码牌 ...
- PDF修改器
亲测可用的绿色版PDF修改器供大家分享使用 下载地址:http://pan.baidu.com/s/1pLPnhQb
- 关于Spring事务<tx:annotation-driven/>的理解(Controller可以使用@Transactional)
在使用SpringMvc的时候,配置文件中我们经常看到 annotation-driven 这样的注解,其含义就是支持注解,一般根据前缀 tx.mvc 等也能很直白的理解出来分别的作用.<tx: ...