如何优化JavaScript的构造函数

  首先看一个构造函数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操做符,产生意想不到的结果!
相关文章
相关标签/搜索