[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 ...
随机推荐
- .NetCore~C#6的一些新特性
回到目录 在进行.netCore平台后,由于它的版本在.net4.6,C#6之后,所以它的语法也有一些新的特性,主要表现在以下几个方面 只读属性初始化 static string Hello => ...
- Spring Boot 系列(四)静态资源处理
在web开发中,静态资源的访问是必不可少的,如:图片.js.css 等资源的访问. spring Boot 对静态资源访问提供了很好的支持,基本使用默认配置就能满足开发需求. 一.默认静态资源映射 S ...
- Domains域
一个域是一个criteria(度量标准)列表,每个criterion(标准尺度)是一个三元列表或者元组:field_name,operator,value. field_name(str) 当前模型的 ...
- C#中的Infinity和NaN
C#中double和float类型有两个特殊值: Infinity(无穷大):5.0 / 0.0 = Infinity NaN(not a number):0.0 / 0.0 = NaN 计算表达式 ...
- Spring源码情操陶冶-AbstractApplicationContext#obtainFreshBeanFactory
前言-阅读源码有利于陶冶情操,本文承接前文Spring源码情操陶冶-AbstractApplicationContext 约束: 本文指定contextClass为默认的XmlWebApplicati ...
- iOS TextView输入长度限制 设置placeholder
textView在使用中通常会有2个功能是最常用的 设置placeholder 限制输入长度 TYLimitedTextView刚好是为了解决这个2个问题而诞生的,下面讲解TYLimitedTextV ...
- MySQL学习笔记(六):索引
本文主要介绍MySQL 中关于索引的一些问题,例如:索引的作用:怎么创建索引:设计索引的原则:怎么优化索引等等. 一:索引概述 索引一般是通过排序,然后查找时可以二分查找,这一特点来达到加速查找的目的 ...
- <EffectiveJava>读书笔记--01继承的使用注意
1, 父类的构造器方法中不能调用能够被子类重写的方法. 分析: 当初始化一个子类时, 首先要初始化父类, 即调用父类的构造方法; 如果父类的构造方法中调用了可被重写的其它方法, 那么此时调用的其实是该 ...
- python 一个包中的文件调用另外一个包文件 实例
python不同文件夹中模块的引用调用顺序,被调用的模块中①有类的 模块.类().方法() ②无类的:模块.方法() test包中testIm.py 调用 test1包中testIm1.py中的方 ...
- JavaScript预处理
在预处理阶段js引擎会扫描代码中用var定义的变量和用声明的方式定义的函数 用声明方式定义函数 function a(){ alert('hello world'); } 用函数表达式定义函数 var ...