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

每个对象上面都有一个constructor属性( 严格意义上来说,是原型上的,对象是通过查找到原型找到 constructor属性 ).后面讲到原型的时候,我会用示意图的方式说明

  1. function CreateObj(uName) {
  2. this.userName = uName;
  3. this.showUserName = function () {
  4. return this.userName;
  5. }
  6. }
  7. var obj1 = new CreateObj('ghostwu');
  8. var obj2 = new CreateObj('卫庄');
  9. console.log( obj1.constructor === CreateObj ); //true
  10. console.log( obj2.constructor === CreateObj ); //true

默认情况下,对象的constructor等于实例化对象的构造函数, constructor最初的作用是用来标识对象的,但是并不是特别准确,因为constructor能被修改,

识别对象一般用instanceof关键字.

什么是instanceof?

要理解这个关键字,需要搞清楚原型链,这里,我提前把他放出来

  1. //假设instanceof运算符左边是L,右边是R
  2. L instanceof R
  3. //instanceof运算时,通过判断L的原型链上是否存在R.prototype
  4. L.__proto__.__proto__ ..... === R.prototype
  5. //如果存在返回true 否则返回false

注意:instanceof运算时会递归查找L的原型链,即L.__proto__.__proto__.__proto__.__proto__...直到找到了或者找到顶层为止。

所以一句话理解instanceof的运算规则为:

instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型。

  1. console.log( obj1 instanceof Object ); //true
  2. console.log( obj2 instanceof Object ); //true
  3. console.log( obj1 instanceof CreateObj ); //true
  4. console.log( obj2 instanceof CreateObj ); //true

obj1,obj2之所以是Object的实例,因为所有对象继承自Object

借用构造函数

一个空对象,可以借用现有的构造函数,完成属性和方法的复制

  1. function CreateObj(uName) {
  2. this.userName = uName;
  3. this.showUserName = function () {
  4. return this.userName;
  5. }
  6. }
  7. var obj = new Object();
  8. CreateObj.call( obj, 'ghostwu' );
  9. console.log( obj.userName ); //ghostwu
  10. console.log( obj.showUserName() ); //ghostwu

构造函数的优点与缺点

优点就是能够通过instanceof识别对象,缺点是每次实例化一个对象,都会把属性和方法复制一遍

  1. var obj1 = new CreateObj('ghostwu');
  2. var obj2 = new CreateObj('卫庄');
  3.  
  4. console.log( obj1.showUserName === obj2.showUserName ); //false

从以上执行结果,可以看出obj1.showUserName和obj.showUserName不是同一个【在js中,引用类型比较的是地址, 函数是一种引用类型】,而是存在两个不同
的内存地址,因为每个对象的属性是不一样的,这个没有什么问题,但是方法执行的都是一样的代码,所以没有必要复制,存在多份,浪费内存.这就是缺点

怎么解决构造函数的方法复制多次的问题?

  1. function CreateObj(uName) {
  2. this.userName = uName;
  3. this.showUserName = showUserName;
  4. }
  5. function showUserName (){
  6. return this.userName;
  7. }
  8. var obj1 = new CreateObj('ghostwu');
  9. var obj2 = new CreateObj('卫庄');
  10. console.log( obj1.showUserName === obj2.showUserName ); //true

把对象的方法指向同一个全局函数showUserName, 虽然解决了多次复制问题,但是全局函数非常容易被覆盖,也就是大家经常说的污染全局变量.

比较好的解决方案?

通过原型(prototype)对象,把方法写在构造函数的原型对象上

  1. function CreateObj(uName) {
  2. this.userName = uName;
  3. }
  4. CreateObj.prototype.showUserName = function(){
  5. return this.userName;
  6. }
  7. var obj1 = new CreateObj('ghostwu');
  8. var obj2 = new CreateObj('卫庄');
  9. 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. 读Zepto源码之Event模块

    Event 模块是 Zepto 必备的模块之一,由于对 Event Api 不太熟,Event 对象也比较复杂,所以乍一看 Event 模块的源码,有点懵,细看下去,其实也不太复杂. 读Zepto源码 ...

  2. 华为OJ之放砝码

    题目描述: 现有一组砝码,重量互不相等,分别为m1.m2--mn:他们可取的最大数量分别为x1.x2--xn.现在要用这些砝码去称物体的重量,问能称出多少中不同的重量. 注: 称重重量包括0: 要对输 ...

  3. 基于Spring4的定时任务管理

    在项目中,有时会遇到定时任务的处理,下面介绍一下我的做法. 此做法基于Spring4,Spring框架搭建成功,另需引入quartz.jar,pom.xml文件中加入 <dependency&g ...

  4. div+css命名规范大全

    网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率, 我们开发DIV+CSS网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么 ...

  5. HDU1027 Ignatius and the Princess II

    Problem Description Now our hero finds the door to the BEelzebub feng5166. He opens the door and fin ...

  6. nopCommerce 3.9 大波浪系列 之 开发支持多店的插件

    一.基础介绍 nop支持多店及多语言,本篇结合NivoSlider插件介绍下如何开发支持多商城的小部件. 主要接口如下: ISettingService 接口:设置接口,可实现多店配置. (点击接口介 ...

  7. year:2017 month:7 day:20

    2017-07-20 JavaScript(Dom) 1:获取节点对象 document.getElementById("html元素的id") document.getEleme ...

  8. HDU5723 Abandoned country (最小生成树+深搜回溯法)

    Description An abandoned country has n(n≤100000) villages which are numbered from 1 to n. Since aban ...

  9. Wordpress解析系列之PHP编写hook钩子原理简单实例

    Wordpress作为全球应用最广泛的个人博客建站工具,有很多的技术架构值得我们学习推敲.其中,最著名最经典的编码技术架构就是采用了hook的机制. hook翻译成中文是钩子的意思,单独看这个词我们难 ...

  10. 创建Git版本库

    什么是版本库呢?版本库又名仓库,英文名repository,你可以简单理解成一个目录,这个目录里面的所有文件都可以被Git管理起来,每个文件的修改.删除,Git都能跟踪,以便任何时刻都可以追踪历史,或 ...