上文,通过基本的对象创建问题了解了构造函数,本文,我们接着上文继续了解构造函数的基本特性,以及优缺点.

每个对象上面都有一个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高手之路]构造函数的基本特性与优缺点的更多相关文章

  1. [js高手之路]原型对象(prototype)与原型链相关属性与方法详解

    一,instanceof: instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型. 我在之前的两篇文章 [js高手之路]构造函数的基本特性与优缺点 [js高手 ...

  2. [js高手之路]从原型链开始图解继承到组合继承的产生

    基于javascript原型链的层层递进查找规则,以及原型对象(prototype)的共享特性,实现继承是非常简单的事情 一.把父类的实例对象赋给子类的原型对象(prototype),可以实现继承 f ...

  3. [js高手之路]设计模式系列课程-组合模式+寄生组合继承实战新闻列表

    所谓组合模式,就是把一堆结构分解出来,组成在一起,现实中很多这样的例子,如: 1.肯德基套餐就是一种组合模式, 比如鸡腿堡套餐,一般是是由一个鸡腿堡,一包薯条,一杯可乐等组成的 2.组装的台式机同理, ...

  4. [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)

    还记得我们上文中的index.html文件吗? 那里面的script标签还是写死的index.bundle.js文件,那么怎么把他们变成动态的index.html文件,这个动态生成的index.htm ...

  5. [js高手之路] es6系列教程 - promise常见用法详解(resolve,reject,catch,then,all,race)

    关于promise我在之前的文章已经应用过好几次,如[js高手之路]Node.js+jade+express+mongodb+mongoose+promise实现todolist,本文就来讲解下pro ...

  6. [js高手之路] javascript面向对象写法与应用

    一.什么是对象? 对象是n个属性和方法组成的集合,如js内置的document, Date, Regexp, Math等等 document就是有很多的属性和方法, 如:getElementById, ...

  7. [js高手之路] 设计模式系列课程 - jQuery的extend插件机制

    这里在之前的文章[js高手之路] 设计模式系列课程 - jQuery的链式调用与灵活的构造函数基础上增加一个extend浅拷贝,可以为对象方便的扩展属性和方法, jquery的插件扩展机制,大致就是这 ...

  8. [js高手之路] es6系列教程 - 迭代器,生成器,for...of,entries,values,keys等详解

    接着上文[js高手之路] es6系列教程 - 迭代器与生成器详解继续. 在es6中引入了一个新的循环结构for ....of, 主要是用来循环可迭代的对象,那么什么是可迭代的对象呢? 可迭代的对象一般 ...

  9. [js高手之路] es6系列教程 - 对象功能扩展详解

    第一:字面量对象的方法,支持缩写形式 //es6之前,这么写 var User = { name : 'ghostwu', showName : function(){ return this.nam ...

随机推荐

  1. ELK日志框架(2):log4net.ElasticSearch+ Kibana实现日志记录和显示

    环境说明 1. windows server 2012 R2 64位 2. log4net.ElasticSearch 3. kibana-5.5.0-windows-x86.zip 架构说明 数据采 ...

  2. visual studio问题集合

    1.当前断点不会命中,还没有为该文档加载任何符号 打开visual 2010 工具->选项->调试->符号: 一.手动加载 点击 加载所有符号 即可.二.自动加载 点击"指 ...

  3. [Oracle]高水位标记(HWM)

    (一)高水位标记(High Water Mark,HWM)的概念 所谓高水位标记,是指一个已经分配的段中,已经使用的空间与未使用的空间的分界线.在表的使用过程中,随着数据的不断增多(insert),H ...

  4. CJOJ 1131 机器分配 / Luogu 2066 机器分配 (动态规划)

    CJOJ 1131 机器分配 / Luogu 2066 机器分配 (动态规划) Description Luogu: 总公司拥有高效设备M台,准备分给下属的N个分公司.各分公司若获得这些设备,可以为国 ...

  5. Unity strip engine code可能会使程序崩溃

    最近正在做新大厅的红包推荐口令快速领金币入口拍卖行之类的功能,同事把我的捕鱼整合到他的项目中时出现了闪退的问题,经排查是因为strip engine code选项. Strip engine code ...

  6. Mybitis配置文件中的别名以及mapper中的namespace

    1 基本知识 MyBatis中如果每次配置类名都要写全称也太不友好了,我们可以通过在主配置文件中配置别名,就不再需要指定完整的包名了. 别名的基本用法: <configuration> & ...

  7. (转)spring学习之@ModelAttribute运用详解

    @ModelAttribute使用详解 1 @ModelAttribute注释方法 例子(1),(2),(3)类似,被@ModelAttribute注释的方法会在此controller每个方法执行前被 ...

  8. 深入理解 JavaScript(三)

    强大的原型和原型链 前言 JavaScript 不包含传统的类继承模型,而是使用 prototypal 原型模型. 虽然这经常被当作是 JavaScript 的缺点被提及,其实基于原型的继承模型比传统 ...

  9. Linux 服务器如何配置网站以及绑定域名

    因为域名没有备案,国内地区不能直接域名访问.前段时间在阿里云租购了一台的香港服务器,添加子域名时解析的时发现不能添加直接解析至端口,找了些资料,发现了Nginx绑定域名的方法,在这里做个记录. 1.香 ...

  10. 创建 overlay 网络 - 每天5分钟玩转 Docker 容器技术(50)

    上一节我们搭建好实验环境,配置并运行了consul,今天开始创建 overlay 网络. 在 host1 中创建 overlay 网络 ov_net1: -d overlay 指定 driver 为 ...