为什么JS中的'this'别名错误？

Question

在标题为“this的面孔”一节中阅读Principles of writing consistent, idiomatic JavaScript，它表明JavaScript中的别名this“容易出错”。

我个人尝试尽可能使用_.bind()（或类似的东西），但有人知道为什么别名this容易出错吗？

Answer 1

this有四种含义可以依赖于它的调用方式。因此，必须注意跟踪哪个this被使用，我至少可以想到this个问题至少3/4。

作为方法

调用

在obj.myFunc()中，this绑定到obj。

如果在回调中传递myFunc，那么这可能会很吓人，因为它会忘记它曾经是对象的一部分并且是独立调用的。参见例如What does 'var that = this;' mean in JavaScript?通常的解决方法。

作为独立函数调用

在普通myFunc()中，this绑定到全局对象。

作为构造函数

调用

作为new myFunc()调用（非常不同！所有打算用new调用的函数都应该大写，因此看起来像一个伪类）。创建一个新对象，将其绑定到this并（可能）返回该对象。

当然，如果你放弃new，你将绑定到全局对象，这可能会破坏很多东西并使你的程序处于非常破碎的状态。大写惯例非常很重要，让JSLint（IIRC）能够解决这个问题。

使用apply（或call）

调用

调用myFunc.apply(obj, args)，其中this绑定到obj。请注意，这甚至具有安全隐患，因为任何调用者都可以将this替换为自己的欺骗对象。

Answer 2

this在任何地方都是别名会容易出错，因为（在开发人员中）很难记住在给定情况下this所指的确切内容。这很容易导致开发人员使用this认为它指的是一个元素，而实际上它是完全不同的东西。例如：

$('#something').click ( function (e) {
    //this refers to the clicked element
    var _this = this;  //Tracking a reference to the clicked element `this`
    $.each(someArray, function(index, value) {
       //this refers to the current element being iterated in someArray
       $.ajax({
          url : 'some/path',
          success: function (res) {
             //this refers to the ajax request
             //_this still references the clicked element
          } 
       })
    })
})

此外，如果您需要从另一个this的范围内访问一个this（例如，在ajax调用中单击此元素），您必须以某种方式保留对它的引用。我在代码中标记了这一点。