JavaScript 构造函数参数答案

【问题标题】：JavaScript constructor argumentsJavaScript 构造函数参数
【发布时间】：2016-08-06 03:17:08
【问题描述】：

谁能向我解释一下 JavaScript 构造函数是如何工作的？具体来说，我说的是以下场景：

在我的 Webside 代码中，我有两个元素，我需要使用 MutationObserver 进行观察。我试着只用一个观察者来做这件事，但这没有用。所以我提出了以下解决方案：

var observer = new MutationObserver(function (mutations) { /*Code to do stuff */ });
var observer2 = new MutationObserver(function (mutations) { /*Code to do stuff */ });

然后我给了他们一些观察：

observer.observe(document.getElementById("textarea1"), {attributs: true, attributeFilter: ['style'] });
observer2.observe(document.getElementById("textarea2"), {attributs: true, attributeFilter: ['style'] });

有了这个观察者，我想改变风格，因为否则我会得到一个无限循环，我告诉观察者 .disconnect()，改变风格，然后让它重新开始观察。

因为 "textarea1" 和 "textarea2" 基本相同（但内容不同），我不想有两次相同的代码，唯一的区别是要调用的特定观察者对象。

所以我尝试了以下方法：

var observer = new MutationObserver(function (mutations) {
        mutate(mutations, observer);
    });
var observer2 = new MutationObserver(function (mutations) {
        mutate(mutations, observer2);
    });
function mutate(mutations, observer) {
/*do stuff with mutations and observer*/
}

而且效果很好。

这是我真正不明白的事情：如果构造函数的结果是我想要使用的参数，我如何将某些东西作为参数传递给构造函数...？

【问题讨论】：

标签： javascript constructor arguments

【解决方案1】：

您可以通过在实际使用之前声明变量来做到这一点。

例子：

var observer, observer2, mutate;

observer = new MutationObserver(function (mutations) {
    mutate(mutations, observer);
});

observer2 = new MutationObserver(function (mutations) {
    mutate(mutations, observer2);
});

mutate = function (mutations, observer) {
    /*do stuff with mutations and observer*/
}

较新版本的 Javascript 实际上会为您执行此操作，这个概念称为提升。这就是它起作用的原因。

【讨论】：

【解决方案2】：

所有var 声明都被提升，这意味着您的代码相当于：

var observer;

observer = new ...

变量名observer从一开始就存在于作用域中。

从那里你所拥有的是：

var observer;

function () {
    foo(observer);
}

这是完全合法的代码。您正在定义一个函数，该函数在调用时会对父作用域中的变量 observer 执行某些操作。该变量仅在调用时进行评估，因此它的值是什么当时很重要。因为它是在您为observer 分配了一些东西之后某个时候被调用的，所以它工作得很好。

类似的说明性示例：

var foo;

setTimeout(function () { alert(foo); });

foo = 'bar';

这会提醒bar，因为在执行回调时，foo 持有值'bar'。

【讨论】：