首先看一个构造函数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. springboot学习章节-spring常用配置

    1.Scope package com.zhen.highlights_spring4.ch2.scope; import org.springframework.context.annotation ...

  2. Linux平台搭建-----C语言

    下面内容是新手上路,各位高手路过勿喷!因为我第一次发布,可能页面设置或者其他做的不好,还请见谅~该文章只是作为我学习C语言的笔记以及记录学习进程的. 零基础学习C语言---搭建Linux平台开发环境 ...

  3. 关于 数据库 my_slq的 安装及其卸载

    安装的时候 注意事项 自定后 根据电脑的系统版本 选择32  或者64  然后选择→方向键 密码默认是123456  或者  123123 查看装的数据库是否安装好了 如何完全卸载 mysql 数据库 ...

  4. MySQL:数据表基本操作

    数据表基本操作 注意点: 1.数据表中已经有数据时,轻易修改数据类型,有可能因为不同的数据类型的数据在机器 中存储的方式及长度并不相同,修改数据类型可能会影响到数据表中已有的数据类型. 2.  数据表 ...

  5. 惊不惊喜, 用深度学习 把设计图 自动生成HTML代码 !

    如何用前端页面原型生成对应的代码一直是我们关注的问题,本文作者根据 pix2code 等论文构建了一个强大的前端代码生成模型,并详细解释了如何利用 LSTM 与 CNN 将设计原型编写为 HTML 和 ...

  6. Java学习笔记26(异常)

    异常的定义: Java代码在运行过程中发生的问题就是异常 异常类:出现问题就会常见异常类对象,并抛出异常的相关信息,异常的位置,原因 异常体系: Throwable类是java中所有错误或异常的父类 ...

  7. Python 实例方法

    class Computer: # 实例方法 def play(self): print("电脑可以扫雷") # 在定义实例方法的时候. 必须给出一个参数 self # 形参的第一 ...

  8. [工作日志] 2018-11-21 主要: 改bug 自测 :校验图片后缀名

    正则表达式 用以下方式去校验图片的后缀 String reg = ".+(.JPEG|.jpeg|.JPG|.jpg)$";String imgp= "Redocn_20 ...

  9. linux系统nginx的https的跳转

    环境:系统ubuntu16 申请证书是腾讯云免费证书 首先我在安装nginx SSL证书的时候犯了个错误,nginx是需要安装SSl的模块不然没法配置完成.需要安装一个 http_ssl_module ...

  10. tmux学习

    1.基本命令: http://blog.chinaunix.net/uid-26285146-id-3252286.html (重要) http://blog.csdn.net/longxibendi ...