JavaScript this使用场景

JavaScript中this的含义非常丰富，可以是指向全局对象、当前对象或者任意对象，这完全取决于函数的调用方式.

• 作为函数调用
• 作为对象方法调用
• 作为构造函数调用
• apply和call

函数调用

函数也可以直接被调用，此时this绑定到全局对象。在浏览器中此时的this指向window对象。

function thisDemo1 (x) {
  this.x = x // this指向全局变量
}
thisDemo1(10)
console.log(x) // 10

当函数thisDemo1被调用时，this指向的是全局变量，当执行其中的赋值语句时，相当于隐式的声明了一个全局变量x，这显然不是我们希望的。

对象方法

在JavaScript中，函数也是对象，因此函数可以作为一个对象属性，此时这个函数就称为这个对象的属性方法。this指向这个对象。

var Base = {
  a: 213,
  say: function () {
    console.log(this.a)
  }
}
Base.say() // 213

构造函数

js支持面向对象编程，与传统的面向对象语言不同，js没有类的概念，它是通过原型链实现继承。相应的，js的构造函数也很特殊，如果不使用new关键字调用，其和普通的函数一样。作为一项约定俗成的准则，构造函数以大写字母开头，提醒调用者使用正确的方式调用。如果调用正确，this将绑定到新创建的对象上。

function A (x, y) {
  this.x = x;
  this.y = y;
}

var a = new A(1,2)
console.log(a.x) // 1,this指向对象a(实例化的A)

apply和call

这两个方法可以切换函数执行的上下文环境。区别是apply的第二个参数是一个数组，call则是和通常传参一样

function Point (x, y) {
  this.x = x;
  this.y = y;
  this.change = function (x, y) {
    this.x = x;
    this.y = y;
  }
}

var point  = new Point(1, 2)
console.log(point.x) // 1
point.change(3, 4)
console.log(point.x) // 3

var obj = {
  x: 0,
  y: 0
}
point.change.call(obj, 10, 10)

console.log(point) // 3,4
console.log(obj) // 10,10

apply和call方法的第一个参数决定了执行方法的上下文环境，例如上面的call方法的第一个参数是obj,则change方法中的this指向的就是obj