（JS基础）this 的指向

定义

this是一个指针，指向的是函数执行的环境对象。

举例说明 this 的指向

普通函数

普通函数内的this指向执行环境对象，例子中的执行环境是window。

var a = 'window'
function fn(){
  let a = 'fn'
  return this.a
}
fn();        // 'window'复制代码

构造函数建立的对象的方法内

构造函数建立的对象的方法内的this指向该对象，例子中的this指向是obj。

function Fn(){
  this.a = 'Fn'
  this.getA = function(){
    return this.a
  }
}
var obj = new Fn()    // {a:'Fn',getA(){return this.a}}
obj.a;        // 'Fn'
obj.getA()    // 'Fn'复制代码

对象中的方法内

对象中的方法内的this指向对象自己，即对象为该方法的执行环境。其本质是上例子的语法糖。

var a = 'window'
var obj = {
  a: 'obj',
  getA(){
    return this.a
  }
}
obj.getA();    // 'obj'复制代码

改变this指向

函数赋值

赋值可能会使函数内的this指向发生改变。

var a = 'window'
var obj1 = {
  a: 'obj1',
  getA: null
}
var obj2 = {
  a: 'obj2',
  getA(){
    return this.a
  }
}
console.log(obj2.getA())    // 'obj2'
obj1.getA = obj2.getA
console.log(obj1.getA())    // 'obj1'
var getA = obj2.getA
console.log(getA())         // 'window'复制代码

apply()

apply(thisArg, [argsArray])方法可改变运行函数的上下文，第一个参数传入"运行函数的上下文"；第二个参数为可选参数，原方法的参数。

let x = 500;
let obj1 = { x: 100 }
let obj2 = {
  x: 10,
  add(y, z) {
    return this.x + y + z
  }
}
// 也能够传入匿名对象
let a = obj2.add.apply(obj1, [3, 4]);         // a=107
let b = obj2.add.apply({ x: 200 }, [20, 30]); // b=250
// 第一个参数为指定对象时，默认为全局对象
let b = obj2.add.apply(null, [20, 30]);       // b=550
let b = obj2.add.apply(undefined, [20, 30]);  // b=550
复制代码

call()

call(thisArg, arg1, arg2, ...)的用法与apply()基本一致，第一个参数也相同，不一样的只是把第二个参数拆开列出。一样是上面的例子，使用call()以下：

let a = obj2.add.call(obj1, 3, 4);         // a=107复制代码

bind()

bind(thisArg[, arg1[, arg2[, ...]]])用于建立一个新的函数，在调用时设置this关键字为提供的值。并在调用新函数时，将给定参数列表做为原函数的参数序列的前若干项。例子以下：

let obj1 = { x: 100 }
let obj2 = {
  x: 10,
  add(y, z) {
    return this.x + y + z
  }
}
let fn = obj2.add.bind(obj1, 2);   // fn是一个函数，且设置了第一个参数为2
fn(3);    // 105复制代码

Function.prototype.apply.call(func, this, Args)

Function.prototype.apply.call(func, args)用于将任意函数绑定任意参数对象执行。如：

let obj = { a: 1 }
function fn() {
  console.log(this.a);
}
Function.prototype.apply.call(fn, obj);   // 1复制代码

要理解该函数并不难，其实相似这种内置对象的原型对象的方法都是同样的思路：

默认状况下，咱们经过实例对象调用该方法（如，fn.apply()）。对于apply()来讲，fn就是方法的"调用者"，即this的指向对象。

当把Function.prototype.apply做为一个函数总体，则需为其提供"this"和"thisArgs"。"this"就是相似于fn的函数对象；"thisArgs"就是相似于fn.apply()的参数。

若是文字表述太无力，请看下面例子：

let obj = { c: 100 }
function fn(a, b) {
  console.log(a + b + (this.c || 0))
}
// 如下结果都是 103
fn.call(obj, 1, 2);
fn.apply(obj, [1, 2]);
Function.prototype.apply.call(fn, obj, [1, 2]);
Function.prototype.apply.apply(fn, [obj, [1, 2]]);
Function.prototype.call.call(fn, obj, 1, 2);
Function.prototype.call.apply(fn, [obj, 1, 2]);复制代码