Javascript函数存储在数组中与变量中

Question

在这个例子中，为什么将函数引用推送到数组上不会改变 scope execution context of this 而将函数引用分配给新变量确实会改变 scope execution context of this?

(function() {
    function Car(year) {
        this.year = year;
    }

    Car.prototype = {
        logYear: function() {
            console.log(this.year);
        }
    };

    var ford = new Car('Ford', 1999);

    ford.logYear();

    var cbs = [];

    cbs.push(ford.logYear);

    for(var x = 0; x < cbs.length; x++) {
        cbs[x](); // -> 1999 #1
        var callback = cbs[x];
        callback(); // -> undefined #2
    }
})()

这是因为对数组中函数的引用指向 ford 对象上的原始函数，其中 this 仍然定义为实例 (#1) 并且变量赋值将 this 更改为指向包装 IIFE block (#2)?

如果我需要从各种对象收集一堆这样的方法并在其他地方调用它们，这是一个好的模式吗？

这个引用调用与 console.error.bind(console) 这样的例子有什么关系？

谢谢!

-- 更新

感谢@Satyajeet对于很好的解释和澄清。

抛开拼写错误和复制错误，我首先问这个问题的原因是我怀疑 Satyajeet 确认了什么，但我正在处理的应用程序并没有反射(reflect)这种行为(或者我认为如此)。

事实证明，在应用程序中，我正在执行与上述代码类似的过程，我调用了 cbs.push(ford.logYear);，将来自不同对象的多个方法添加到一个数组中。

在应用程序中的某一时刻，我调用了所有这些方法，并期望它们的行为方式与在执行上下文 范围内调用它们时的行为方式相同 原始对象...它们确实如此，因为方法交互的值没有附加到 this，它们被捕获在闭包中。

参见示例 plunker here

-- 更新 2

修复了 execution context 和 scope 的使用，使问题/答案的每个部分都准确。

Answer 1

忽略你深夜复制粘贴的错误，并重新定义你的 Car 函数为

function Car(name, year) {
    this.name = name;
    this.year = year
}

#1 实际上更多的是关于Array 是如何工作的问题，而不是关于context 和scope( *#2)

您在数组中调用函数，因此在 javascript 中，数组的每个元素都是该数组对象的属性。例如

var a = [];
a.push('Some value'); // a.0 is a property 

但是你不能调用 a.0 因为在 javascript 中不能用点符号引用以数字开头的属性，必须使用括号符号访问

因此，当您调用 cbx[0]() 时，它本质上与 cbx.0() 相同。JavaScript 中 Scope 和 Execution context 的作用就在这里。已经有很多关于 javascript 中的范围和上下文的好文章和答案。就像this , 所以我认为不值得在这里解释所有这些。

但基本上 this 直到函数执行才定义(this 取决于 Execution context 而不是作用域)。

所以你的 #1 将打印 undefined 因为 cbs[0]() 等同于 cbs.0(), 而this(Execution context)设置为Array本身，也就是[function]。 (你只有一个函数在里面)。

并且您的#2 也将打印undefined，因为那里的执行上下文是全局(在浏览器的情况下是窗口对象)。第三个问题的答案是，您需要将执行上下文显式硬绑定(bind)到您的函数。

cbs.push(ford.logYear.bind(ford));

你的第 4 个问题是我认为只是 ES5 的 bind 方法的另一个用例，没什么特别的。通常使用它是因为浏览器实现要求 console.error 的执行上下文 (this) 必须设置为 window.console。