javascript - 这个来自内部函数的指针

Question

我有 JavaScript 组件，具有以下架构:

var MyComponent = function(params)
{
    setup(params);


    this.doSomething()
    {
        // doing something
    };

    function setup(params)
    {
        // Setup

        // Interaction logic
        var _this = this; // "this" points to DOMWindow, not to created object
        $(".some-element").click(function(){
            _this.doSomething(); // it craches here, because of above
        });
    }
};

当某些事情发生时，由交互逻辑控制，有时我必须将执行转发给组件的“公共(public)”方法。

在这种情况下，“this”指针有问题。

示例代码演示:

var Item = function()
{
    this.say = function()
    {
        alert("hello");
    };
    this.sayInternal = function()
    {
        _sayInternal();
    };
    function _sayInternal()
    {
        this.say();
    };
};

测试它，

• 创建对象:

var o = new Item();

• 这很好用:

o.say();//提示“你好”

• 这会崩溃:

o.sayInternal();

我得到一个错误:

TypeError: Result of expression 'this.say' [undefined] is not a function.

我认为，会发生这样的行为，因为 _sayInternal() 函数是声明的(并且没有分配给对象，如“this.say = function()”)。这样，它在所有创建的对象之间共享，并像 C++ 中的静态函数一样工作。

这是真的吗？

Answer 1

不，sayInternal 不在创建的对象之间共享。但你是对的，创建的对象无权访问 sayInternal，因为它没有分配给它们。该函数仅对构造函数有效。

this 总是指调用函数的上下文。如果你像 func() 那样调用它，那么 this 指的是全局对象(在浏览器中是 window)。如果将函数设置为对象的属性并使用 obj.func() 调用它，则 this 将引用 obj。

如果您将“绑定(bind)”函数分配给变量并调用它:

var method = obj.func;
method();

然后 this 将再次引用全局对象。在 JavaScript 中，函数就像任何其他值一样，它们与分配给它们的对象没有特殊关系。

---

您可以使用 call 显式设置上下文或 apply :

var MyComponent = function(params)
{
    setup.call(this, params); // <- using `call`

    this.doSomething()
    {
        // doing something
    };

    function setup(params)
    {
        // Setup  
        // Interaction logic
        var _this = this; // "this" to new  created object
        $(".some-element").click(function(){
            _this.doSomething();
        });
    }
};

或者在你的其他例子中:

var Item = function()
{
    this.say = function()
    {
        alert("hello");
    };
    this.sayInternal = function()
    {
        _sayInternal.call(this);
    };
    function _sayInternal()
    {
        this.say();
    };
};

---

也就是说，这种将函数分配给对象的方法并不好，因为每个实例都会有自己的this.sayInternal 函数。所以对于上面的Item代码，每次创建一个实例都涉及创建三个函数，这是一种内存浪费。

利用prototype inheritance会是更好的方法:

var Item = function() {
};

Item.prototype = (function() {
    function _sayInternal() {
        this.say();
    };

    return {
        say: function() {
            alert("hello");
        },
        sayInternal: function(){
            _sayInternal.call(this);
        }
    }
}());

这样，_sayInternal 只创建一次，所有实例都继承(引用)原型(prototype)，所以 say 和 sayInternal 也只存在一次。 立即函数 的“技巧”使得_sayInternal 只能由say 和sayInternal 访问。