首先看一个构造函数User,我们在调用User创建一个实例的的时候,一般都是要写上new操作符的。在这里说明一下,如果使用new关键字调用构造函数,那么构造函数里面的this总是是指向一个全新的对象(即User的实例),如果不是使用new的话,那么this就指向global对象。User构造函数的定义如下:
function User(name, passwordHash) {
this.name = name;
this.passwordHash = passwordHash;
}
 User构造函数的正确的调用方法应该如下:
var u = new User("baravelli", "d8b74df393528d51cd19980ae0aa028e");
但是,假如调用者因为粗心,忘记了加上new关键字来调用,那结果会怎样呢?我们一起来测试一下:
var u = User("baravelli", "d8b74df393528d51cd19980ae0aa028e");
u; // undefined
this.name; // "baravelli"
this.passwordHash; // "d8b74df393528d51cd19980ae0aa028e"
 
结果构造函数竟然返回了undefined!!这也很正常的,因为不用new关键字,直接调用他的话,那就跟调用普通函数没有任何区别了,而User里面又没有return语句,所以返回值当然是undefined了。更加糟糕的是,如果不加new调用,User的里面的this就会指向全局对象了,那么它就会破坏全局对象,试想一下,假如全局对象本身就存在了name和passwordHash这两个变量,那么他们的值就会被修改了,这个危害是很大的。
 
如果,构造函数User里面开启了ES5的严格模式,那么不使用new操作符就会因为this绑定失败而抛出错误(注意:严格模式下是不允许this指向全局对象的),如下:
function User(name, passwordHash) {
"use strict";
this.name = name;
this.passwordHash = passwordHash;
} var u = User("baravelli", "d8b74df393528d51cd19980ae0aa028e");
// error: this is undefined
这样的话,会抛出一个类型错误// error: this is undefined。但是,这个构造函数依然是很脆弱的,因为它只有在加new操作符的时候才可以正常工作。假如我们实现了一个构造函数,加不加new关键字都可以正常工作那就健壮多了!其实,实现起来也并不太难,我们只要在User构造函数里面判断this是否指向User的实例就行了,如果不是就创建一个User实例,如下:
function User(name, passwordHash) {
if (!(this instanceof User)) {
return new User(name, passwordHash);
}
this.name = name;
this.passwordHash = passwordHash;
}
 
现在,不管你用不用new关键字来调用构造函数,他都可以正常工作了,测试一下:
var x = User("baravelli", "d8b74df393528d51cd19980ae0aa028e");
var y = new User("baravelli",
"d8b74df393528d51cd19980ae0aa028e");
x instanceof User; // true
y instanceof User; // true
 
  但是上述实现方法还具有一个缺点,因为它两次调用了User构造函数(在不使用new关键字的时候),所以,降低了性能!而且,还有一个问题,就是对于可变参数的构造函数,它实现起来就会很困难的了。一种较优的办法就是借助于ES5的Object.create方法:
function User(name, passwordHash) {
var self = this instanceof User ? this : Object.create(User.prototype);
self.name = name;
self.passwordHash = passwordHash;
return self;
}
 这种方法,借助了Object.create方法,把User.prototype作为参数,创建了一个继承了User的新对象。但是,这种方法也是有缺陷的,我们前面已经说过 了,Object.create是ES5的新标准,在一些旧的环境下可能无法工作。所以,我们还要判断Object.create是否存在。,如果不存在,则手动的去实现它:
if (typeof Object.create === "undefined") {
Object.create = function(prototype) {
function C() { }
C.prototype = prototype;
return new C();
};
}
最后,需要提醒的是,如果你的构造函数一定要使用new关键字的,那么必须要写文档说明,以免别人调用的时候没有用new操作符,产生意想不到的结果!

如何优化JavaScript的构造函数的更多相关文章

  1. 优化javaScript代码,提高执行效率

    今天看完书,总结了一下可以如何优化 JavaScript . 1.合并js文件 为优化性能,可以把多个js文件(css文件也可以)合并成极少数大文件.跟十个5k的js文件相比,合并成一个50k的文件更 ...

  2. 深入理解Javascript中构造函数和原型对象的区别

    在 Javascript中prototype属性的详解 这篇文章中,详细介绍了构造函数的缺点以及原型(prototype),原型链(prototype chain),构造函数(constructor) ...

  3. Javascript中构造函数的返回值问题和new对象的过程

    首先明确一点:javascript中构造函数是不需要有返回值的,这一点跟java很类似.可以认为构造函数和普通函数的最大差别就是:构造函数中没有return语句,普通函数可以有return语句:构造函 ...

  4. 解决JavaScript中构造函数浪费内存的问题!

    解决JavaScript中构造函数浪费内存的问题! 把构造函数中的公共的方法放到构造函数的原型对象上! // 构造函数的问题! function Gouzaohanshu(name, age, gen ...

  5. Javascript正则构造函数与正则表达字面量&&常用正则表达式

    本文不讨论正则表达式入门,即如何使用正则匹配.讨论的是两种创建正则表达式的优劣和一些细节,最后给出一些常用正则匹配表达式. Javascript中的正则表达式也是对象,我们可以使用两种方法创建正则表达 ...

  6. JavaScript使用构造函数获取变量的类型名

    在JavaScript中,如何准确获取变量的类型名是一个经常使用的问题. 但是常常不能获取到变量的精确名称,或者必须使用jQuery 中的方法,这里 我通过 typeof ,jQuery.type 和 ...

  7. Javascript中构造函数与new命令

    典型的面向对象编程语言(比如C++和Java),存在“类”(class)这个概念.所谓“类”就是对象的模板,对象就是“类”的实例.但是,在JavaScript语言的对象体系,不是基于“类”的,而是基于 ...

  8. Javascript中构造函数与new命令2

    典型的面向对象编程语言(比如C++和Java),存在"类"(class)这个概念.所谓"类"就是对象的模板,对象就是"类"的实例.但是,在J ...

  9. Javascript将构造函数扩展为简单工厂

    一般而言,在Javascript中创建对象时需要使用关键字new(按构造函数去调用),但是某些时候,开发者希望无论new关键字有没有被显式使用,构造函数都可以被正常调用,即构造函数同时还具备简单工厂的 ...

随机推荐

  1. how to istall virtualbox on centos

    https://tecadmin.net/install-oracle-virtualbox-on-centos-redhat-and-fedora/

  2. elk之logstash

    环境: centos7 jdk8 1.创建Logstash源 rpm --import https://artifacts.elastic.co/GPG-KEY-elasticsearch touch ...

  3. <Spark><Spark Streaming>

    Overview Spark Streaming为用户提供了一套与batch jobs十分相似的API,以编写streaming应用 与Spark的基本概念RDDs类似,Spark Streaming ...

  4. day 67 django 之ORM 基础安装

    一 ORM的基础部分 1 ORM的概念 对象关系映射(Object Relational Mapping(映射),简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. 2   ...

  5. Linux:软件包安装

    软件包安装 一.rpm安装 1.挂载系统:mount /dev/cdrom/ /mnt/cdrom/ 2.进入相应的目录(Centos7 为Packages,有一些是Server):cd /mnt/c ...

  6. android 8.0 intent安装apk失败屏幕闪过

    需要做两处设置: 1.android8.0要加一条权限: <uses-permission android:name="android.permission.REQUEST_INSTA ...

  7. ubantu 常用命令

    1.显示日期与时间的命令:date 2.显示日历的命令:cal 3.简单好用的计算器:bc 4.热键“命令补全或文件补齐”:Tab 5.热键“中断目前程序”:Ctrl+C 6.热键“键盘输入结束(En ...

  8. 58-63用ssh远程连接linux系统

    一.注意 在CentOS7.6中,ifconfig来查询IP已经不再适用,要用ip add 二.vim编辑器 编辑:按[i]键可以进入到编辑状态,显示insert这样的字眼就对了 退出:按esc退出编 ...

  9. 2019-03-28-day021-抽象类与接口类

    今日内容 type和class 继承 抽象类 接口类 多态 java 鸭子类型 pickle模块 collections.namedtuple type和class ##type ##class pr ...

  10. Primise --(mongoose's default promise library)

    今天在学nodejs的时候,遇到一个错误;刚开始完全不知道说的是什么,为什么会出现这个错误 DeprecationWarning: Mongoose: mpromise (mongoose's def ...