第七章 this关键字

• 涵义
• 使用场合
• 使用注意点
• 绑定this的方法

涵义

  this对象是在运行时基于函数的执行环境绑定的：在全局函数中，this等于window，而当函数被作为某个对象的方法调用时，this等于那个对象。不过匿名函数的执行环境具有全局性，因此其this对象通常指向window，这个地方可以这么理解，如果一个在函数体内的变量没有定义就表示是全局变量，那么函数没有命名也可以理解为全局函数，所以执行环境也是全局，可以暂时这么理解。
  简单来说this就是函数运行时所在的对象（环境）。this是会根据运行环境的不同而发生改变但是作用域链不会随着运行环境的改变而改变，只跟声明时所在的作用域有关。例：

var a = {
   name: 'nike',
   decript: function () {
       return this.name
   }
}
var b = {
    name: 'addidas'
}
b.decript = a.decript
b.decript()    //  addidas

通过上面例子我们可以看到decript方法所在的对象（运行环境）发生了改变，this的指向也就发生改变。下面的例子可以让我们理解的更透彻：

var a = {
   name: '张三',
   descript: function () {
       return this.name
   }
}
var name = '李四'
var f = a.descript
f()     // 李四

上述例子中a.descript是一个方法赋值给变量f，变量f的运行环境是全局，所以this.name就是李四，我们最终要看的是this所在函数的运行环境（对象）。

使用场合

（1）全局环境
全局环境使用this，它指的就是顶层对象window。
（2）构造函数
构造函数中的this，指的是实例对象。例：

var Obj =function (p) {
    this.p = p
}
var o = new Obj('hollo world')
// o.p = hollo world

上面定义了一个构造函数Obj，然后new这个构造函数赋值给o，因为new是调用的意思，所以就是调用构造函数赋值给o，运行环境也是在o中所以this指向的也是o。
（3）对象的方法

var obj ={
  foo: function () {
    console.log(this);
  }
};
obj.foo()    //    obj

使用注意点

（1）避免多层this
由于this的指向是不确定的，所以切勿在函数中包含多层this。

var name = 'nike'
var o = function () {
    var name = 'addidas'
    f1: function () {
      console.log(this.name)
      var f2 = function () {
        console.log(this.name)
      }()
  }
}
o.f1() 
addidas
nike

第一个this指向o，第二个因为是匿名函数所以指向的是window
javascript严格模式下，如果this指向window就会报错。
（2）避免数组处理方法中的this
数组中的map和forEach方法，允许提供一个函数作为参数，这个函数内部不应该使用this。

var o = {
   v: 'hello',
   p: ['a1', 'a2'],
   f: function f() {
      this.p.forEach(function (item) => {
        console.log(this.v + ' ' + item)
    })
  }
}
o.f()
undefined a1
undefined a2

第一个this指向的是o，第二个this指向的是window，因为是匿名函数，如果想要只要外层函数而不是顶层函数，可以用下面的方法：

var o = {
   v: 'hello',
   p: ['a1', 'a2'],
   f: function f() {
     var that = this
      this.p.forEach(function (item) => {
        console.log(that .v + ' ' + item)
    })
  }
}
o.f()
hello    a1
hello   a2

将this的值固定指向o就可以了，还有一种方法就是将this当做forEach的第二个参数，固定this的运行环境

var o = {
   v: 'hello',
   p: ['a1', 'a2'],
   f: function f() {
      this.p.forEach(function (item) => {
        console.log(this.v + ' ' + item)
    }, this)
  }
}
o.f()
hello    a1
hello   a2

上述两种方法都是固定this的运行环境
（3）避免回调函数中的this
回调函数中的this往往会改变指向，最好避免使用

var o = new Object()
o.f = function () {
    console.log(this === o) 
}
$('button').on('click', o.f)

上面代码中点击按钮显示false，原因是此时this不再指向o，而是指向按钮的dom对象，因为f方法是在按钮对象的环境中调用的。为了解决这个问题可以采用下面一些方法对this进行绑定，也就使得this固定指向某个对象，减少不确定性。

绑定this的方法

javascript提供了call、apply、bind这三个方法固定/切换this的指向。
（1）call()
函数实例的call方法，可以指定函数内部this的指向（即函数执行时所在的对象），然后在指定的对象中调用该函数。

var obj = {}
var f = function () {
   return this
}
f() === window       // true
f.call(obj) === obj   // true

上面代码中call方法中的参数应该是一个对象，如果参数为空、null和undefined，则默认传入全局对象。

var n = 123;
var obj = { n: 456 };
function a() {
  console.log(this.n);
}
a.call() // 123
a.call(null) // 123
a.call(undefined) // 123
a.call(window) // 123
a.call(obj) // 456

call方法还可以接受多个参数

func.call(thisValue, arg1, arg2, ...)

call的第一个参数就是this所要指向的那个对象，后面的参数则是函数调用时所需的参数。

function add(a, b) {
  return a + b;
}
add.call(this, 1, 2) // 3

(2)apply()
apply方法的作用与call方法类似，也是改变this指向，然后再调用该函数。唯一的区别就是，它接收一个数组作为函数执行时的参数，使用格式如下。

func.apply(thisValue, [arg1, arg2, ...])

利用apply方法的特点可以做一些有趣的东西，比如用这个方法找出数组中最大的元素。

var a = [0, 3, 5, 7, 9]
Math.max.apply(null, a)   // 9

转换类似数组的对象

利用数组对象的slice方法，可以将一个类似数组的对象（比如arguments对象）转为真正的数组。

Array.prototype.slice.apply({0: 1, length: 1}) // [1]
Array.prototype.slice.apply({0: 1}) // []
Array.prototype.slice.apply({0: 1, length: 2}) // [1, undefined]
Array.prototype.slice.apply({length: 1}) // [undefined]

上面代码的apply方法的参数都是对象，但是返回结果都是数组，这就起到了将对象转成数组的目的。从上面代码可以看到，这个方法起作用的前提是，被处理的对象必须有length属性，以及相对应的数字键。

绑定回调函数的对象

前面的按钮点击事件的例子，可以改写如下。

var o = new Object();
o.f = function () {
  console.log(this === o);
}
var f = function (){
  o.f.apply(o);
  // 或者 o.f.call(o);
};
// jQuery 的写法
$('#button').on('click', f);

点击按钮返回的是true，由于apply方法（或者call方法）不仅绑定函数执行时所在的对象，还会立即执行函数，因此不得不把绑定语句写在一个函数体内。更简洁的写法是采用下面介绍的bind方法。
（3）bind()
bind方法用于将函数体内的this绑定到某个对象，然后返回一个新函数。

var counter = {
  count: 0,
  inc: function () {
    this.count++;
  }
};
var func = counter.inc.bind(counter);
func();
counter.count // 1

我们可以看到用bind方法返回的是一个方法，并不会执行，这一点跟apply和call是不同的，后者会改变this指向并且立即执行但是bind只会改变this指向并不会执行。这三种方法是类似的。

利用bind改变forEach、map方法中的this指向

var obj = {
  name: '张三',
  times: [1, 2, 3],
  obj.print = function () {
  this.times.forEach(function (n) {
    console.log(this.name);
  }.bind(this));
};
};
obj.print()
// 张三
// 张三
// 张三

改变遍历方法中的this指向就用这种方式，也可以把bind(this)直接改为this或者call(this)、apply(this)

结合call方法使用

利用bind方法，可以改写一些 JavaScript 原生方法的使用形式，以数组的slice方法为例。

[1, 2, 3].slice(0, 1) // [1]
// 等同于
Array.prototype.slice.call([1, 2, 3], 0, 1) // [1]