这个 JavaScript 习语的基础是什么：var self = this？

Question

我在WebKit HTML 5 SQL Storage Notes Demo的源代码中看到了以下内容：

function Note() {
  var self = this;

  var note = document.createElement('div');
  note.className = 'note';
  note.addEventListener('mousedown', function(e) { return self.onMouseDown(e) }, false);
  note.addEventListener('click', function() { return self.onNoteClick() }, false);
  this.note = note;
  // ...
}

作者在某些地方（函数体）使用self，在其他地方（方法参数列表中定义的函数体）使用this。这是怎么回事？现在我已经注意到了一次，我会开始到处看到它吗？

Answer 1

看到这个article on alistapart.com。 （编者：文章自最初链接后已更新）

self 被用于维护对原始this 的引用，即使上下文正在发生变化。这是事件处理程序中经常使用的一种技术（尤其是在闭包中）。

编辑：请注意，现在不鼓励使用self，因为window.self 存在并且如果您不小心可能会导致错误。

您对变量的称呼并不特别重要。 var that = this; 很好，但这个名字并没有什么神奇之处。

在上下文中声明的函数（例如回调、闭包）将可以访问在相同范围或更高范围内声明的变量/函数。

例如一个简单的事件回调：

function MyConstructor(options) {
  let that = this;

  this.someprop = options.someprop || 'defaultprop';

  document.addEventListener('click', (event) => {
    alert(that.someprop);
  });
}

new MyConstructor({
  someprop: "Hello World"
});

Answer 2

该变量由方法中定义的内联函数捕获。函数中的this 将引用另一个对象。这样，您可以使函数在外部范围内持有对this 的引用。

Answer 3

是的，你会在任何地方看到它。通常是that = this;。

看看self是如何在事件调用的函数中使用的？这些将有自己的上下文，因此self 用于保存进入Note() 的this。

self 仍然可供函数使用的原因，即使它们只能在 Note() 函数完成执行后执行，是由于 导致内部函数获取外部函数的上下文关闭。

Answer 4

还应注意，如果您不喜欢 var self = this 惯用语，还有一种替代代理模式可用于在回调中维护对原始 this 的引用。

由于可以使用function.apply 或function.call 在给定的上下文中调用函数，因此您可以编写一个包装器来返回一个函数，该函数使用给定的上下文使用apply 或call 调用您的函数。有关此模式的实现，请参阅 jQuery 的 proxy 函数。这是一个使用它的例子：

var wrappedFunc = $.proxy(this.myFunc, this);

然后可以调用wrappedFunc 并将您的this 版本作为上下文。

Answer 5

我认为不应该再以这种方式使用变量名“self”，因为现代浏览器提供了一个global variable self 指向普通窗口或 WebWorker 的全局对象。

为避免混淆和潜在冲突，您可以改写var thiz = this 或var that = this。

Answer 6

实际上 self 是对窗口 (window.self) 的引用，因此当您说 var self = 'something' 时，您会覆盖对自身的窗口引用 - 因为 self 存在于窗口对象中。

这就是为什么大多数开发者更喜欢var that = this 而不是var self = this;

无论如何； var that = this; 不符合良好实践...假设您的代码稍后将被其他开发人员修改/修改，您应该使用开发人员社区中最常见的编程标准

因此，您应该使用类似 var oldThis / var oThis / 等的东西 - 在您的范围内明确 // ..不是那么多，但会节省几秒钟和几个大脑周期

Answer 7

正如上面多次提到的，“self”只是用于在进入函数之前保留对“this”的引用。一旦在函数中，“this”指的是别的东西。

Answer 8

这是一个 JavaScript 怪癖。当函数是对象的属性（更恰当地称为方法）时，this 指的是对象。在事件处理程序的示例中，包含对象是触发事件的元素。当调用标准函数时，this 将引用全局对象。当您在示例中具有嵌套函数时， this 根本与外部函数的上下文无关。内部函数确实与包含函数共享范围，因此开发人员将使用 var that = this 的变体，以便在内部函数中保留他们需要的 this。

Answer 9

正如其他人所解释的，var self = this; 允许 closure 中的代码引用父范围。

然而，现在是 2018 年，ES6 得到了所有主要网络浏览器的广泛支持。 var self = this; 习语不像以前那么重要了。

现在可以通过使用arrow functions 来避免var self = this;。

在我们会使用var self = this的情况下：

function test() {
    var self = this;
    this.hello = "world";
    document.getElementById("test_btn").addEventListener("click", function() {
        console.log(self.hello); // logs "world"
    });
};

我们现在可以在没有var self = this 的情况下使用箭头函数：

function test() {
    this.hello = "world";
    document.getElementById("test_btn").addEventListener("click", () => {
        console.log(this.hello); // logs "world"
    });
};

箭头函数没有自己的this，只是假设封闭范围。

Answer 10

function Person(firstname, lastname) {
  this.firstname = firstname;

  this.lastname = lastname;
  this.getfullname = function () {
    return `${this.firstname}   ${this.lastname}`;
  };

  let that = this;
  this.sayHi = function() {
    console.log(`i am this , ${this.firstname}`);
    console.log(`i am that , ${that.firstname}`);
  };
}

let thisss = new Person('thatbetty', 'thatzhao');

let thatt = {firstname: 'thisbetty', lastname: 'thiszhao'};

thisss.sayHi.call(thatt);