Javascript“this”范围根据调用方式给出不同的结果

Question

全部，

这是代码：

var Person = function (name) {

  this.name = name;

  this.printName = function(){
    console.log("My name is " + this.name);
  }

};


var p = new Person("Steve");

var funcRef = p["printName"];

p.printName();//Works

p["printName"]();//Works
funcRef();//returns incorrect value

在这里找到一个工作示例：http://plnkr.co/edit/57LS6oXPfqccAWf6uqQV?p=preview

我的问题是最后两个有什么区别？我以同样的方式访问对象方法，唯一的区别是它被调用的方式。

为什么会返回不同的结果？

我第一次在 javascript 中遇到这个问题。我知道它在不同的范围内，但我不知道它是如何与我想理解的对象分离的。

谢谢

史蒂夫

Answer 1

javascript在直接调用对象上的函数时绑定this关键字。

使用test.fn()，this 将是test 在fn 内。与test['fn']() 相同。但是如果你使用var fn = test.fn; fn()，this 将是fn 中的全局根（浏览器中的window）。

您可以在这样的函数中强制使用this：var fn = test.fn.bind(test);

更多信息在这里：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

Answer 2

案例1： 'this' 始终采用与其调用相关的对象的上下文。

在 p.printName() 中，上下文是 p，因此 'this' 引用了 'p' 所指的 Person 对象。

案例2： 但是，当您将 'funcRef' 指向 p 的方法时，它会丢失此上下文并且 'this' 引用全局对象。

全局对象可以根据您的 js 环境（如浏览器上下文或节点等）而有所不同。

这就是为什么您会看到不同的结果。

Answer 3

正如其他答案所说，this 在您调用该函数时被绑定。保持对对象的引用的一种常见方法是使用如下内容：

var Person = function (name) {

  var self = this; // Keep a reference to this object for later use
  self.name = name;

  self.printName = function(){
    console.log("My name is " + self.name);
  }

};

Answer 4

上面的答案已经解释了这个范围的行为方式，这里是“this”用法的最佳实践，使用“this”作为一个名为“self”的新变量，请参见下面的代码，这样您可以更好地控制和减少错误由于这个范围的错误使用。

var Person = function (name) {
  var self=this;
  self.name = name;

  self.printName = function(){
    console.log("My name is " + self.name);
  }
};