[JS] JS中this的使用

[david2tdw]

JavaScript 中函数的调用有以下几种方式：

1. 作为对象方法调用
2. 作为函数调用
3. 作为构造函数调用
4. 使用 apply 或 call 调用

[david2tdw]

作为对象方法调用

var point = {
  x: 0,
  y: 0,
  moveTo: function(x, y) {
    this.x = this.x + x
    this.y = this.y + y
  }
}

point.moveTo(1, 1) // moveTo中的this 绑定到当前对象，即 point 对象
console.log(point)

深入浅出 JavaScript 中的 this

[david2tdw]

作为函数调用

函数也可以直接被调用，此时 this 绑定到全局对象。相当于隐式的声明了一个全局变量

function makeNoSense(x) {
  this.x = x
}

makeNoSense(5)
x // x 已经成为一个值为 5 的全局变量

[david2tdw]

为了避免上述问题，可以使用内部函数， 在内部函数中this依然会指向全局对象，这时候可以使用that = this使this指向外层对象。

var point = {
  x: 0,
  y: 0,
  moveTo: function(x, y) {
    var that = this
    // 内部函数
    var moveX = function(x) {
      that.x = x
    }
    // 内部函数
    var moveY = function(y) {
      that.y = y
    }
    moveX(x)
    moveY(y)
  }
}
point.moveTo(1, 1)
point.x //==>1
point.y //==>1

深入浅出 JavaScript 中的 this

[david2tdw]

作为构造函数调用

所谓构造函数，就是通过这个函数，可以生成一个新对象。这时，this就指这个新对象。

var x = 2
function test() {
  this.x = 1
}

var obj = new test()
x // 2

Javascript 的 this 用法

[david2tdw]

使用 apply 或 call 调用

在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。 apply 和 call 允许切换函数执行的上下文环境（context），即 this 绑定的对象。

var x = 0
function test() {
  console.log(this.x)
}

var obj = {}
obj.x = 3
test() // 指向全局对象
test.call(obj) // 改变this指向obj
test.apply(obj) // 改变this指向obj