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

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

为什么 return 结果不同？

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

谢谢

史蒂夫

Answer 1

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

对于 test.fn()，this 将在 fn 内变为 test。与 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

案例一： '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);
  }
};

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

Javascript "this" scope giving different result depending on the way it is called

javascript

scope

this