JavaScript函数构造函数链接使用apply()函数

时间:2012-10-17 20:45:13

标签: javascript html object constructor

我正在尝试理解Mozilla在构造函数链接上提出的一些代码。我已经对我认为理解的部分添加了评论,但我仍然不清楚这里发生的一切。有人可以逐行解释这段代码中发生了什么吗?

// Using apply() to chain constructors.
Function.prototype.construct = function (aArgs) {

    // What is this line of code doing?
    var fConstructor = this, fNewConstr = function () { fConstructor.apply(this, aArgs); };

    // Assign the function prototype to the new function constructor's prototype.
    fNewConstr.prototype = fConstructor.prototype;

    // Return the new function constructor.
    return new fNewConstr();
};

// Example usage.
function MyConstructor () {

    // Iterate through the arguments passed into the constructor and add them as properties.
    for (var nProp = 0; nProp < arguments.length; nProp++) {
        this["property" + nProp] = arguments[nProp];
    }
}

var myArray = [4, "Hello world!", false];
var myInstance = MyConstructor.construct(myArray);

// alerts "Hello world!"
alert(myInstance.property1); 

// alerts "true"
alert(myInstance instanceof MyConstructor); 

// alerts "MyConstructor"
alert(myInstance.constructor); 

The original code can be found here.

1 个答案:

答案 0 :(得分:2)

基本上,这是一种调用构造函数的替代方法,它使您有机会将构造函数调用包装在另一个函数中。我将专注于您感到困惑的路线。 fConstructor设置为this,它引用我们的原始构造函数,在此示例中为MyConstructorfNewConstr是将覆盖原始构造函数的构造函数。在fNewConstr范围内,您可以实现MyConstructor中未找到的其他代码。在fNewConstr内,我们使用函数apply方法调用fConstructor,将this作为上下文传递,并将aArgs数组传递给构造方法。然后我们将fNewConstr的原型设置为fConstructor原型以完成继承链。最后,我们返回fNewConstr的新实例。将new关键字前缀添加到函数调用中会创建一个新对象,将其原型设置为函数的原型,并在新项的上下文中调用该函数。由于我们将fConstructor方法应用于fNewConstr的上下文,因此结果与调用new MyConstructor()基本相同。合理?或者我需要了解更多细节。