javascript中this

在javascript中this变量有时候很迷惑人，如何指定this的值。
JavaScript 中的this指向执行的上下文，而不是定义的上下文。

• 全局作用域中是window

var x = 200;
var y = 300;

function foo() {
  console.log ( this.x, this.y, x, y );
}

// this的上下文是window 
foo();  // 输出: 200 300 200 300

• 函数作用域中

  • 严格模式返回undefined
  • 非严格模式返回全局对象
    
    • 浏览器返回window
    • Node返回global

• 对象方法是调用方法的对象

var x = 200;
var y = 300;

function foo() {
    console.log ( this.x, this.y, x, y );
}

var myObject = { x : 400, y : 400 }; 

myObject.foo = foo;

// 输出: 400 400 200 300
myObject.foo();

• 构造函数中是实例对象

function Person() {
      // 构造函数 Person() 定义的 `this` 就是新实例对象自己
      this.age = 0;
      setInterval(function growUp() {
        // 在非严格模式下，growUp() 函数定义了其内部的 `this`
        // 为全局对象, 不同于构造函数Person()的定义的 `this`
        this.age++; 
      }, 1000);
    }
var p = new Person();

1. 使用变量self保留this值

function Person() {
      var self = this;
      self.age = 0;
      setInterval(function growUp() {
        self.age++; 
      }, 1000);
}

2.使用bind方法进行绑定

function Person() {
      this.age = 0;
      function growUp() {
        this.age++; 
      }
      setInterval(growUp.bind(this), 1000);
}

3.使用箭头函数（arrows）,箭头函数会使用上下文的this作为this值

function Person() {
      this.age = 0;
      setInterval(() => {
        this.age++;
      }, 1000);
}