JavaScript中this关键字详解（二）

使用注意点

避免多层 this

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

var o = {
  f1: function () {
    console.log(this);//object
    var f2 = function () {
      console.log(this);//window
    }();
  }
}
​
o.f1()
// Object
// Window

上面代码包含两层this，结果运行后，第一层指向对象o，第二层指向全局对象，因为实际执行的是下面的代码。

var temp = function () {
  console.log(this);
};
​
var o = {
  f1: function () {
    console.log(this);
    var f2 = temp();
  }
}

一个解决方法是在第二层改用一个指向外层this的变量。

var o = {
  f1: function() {
    console.log(this);
    var that = this;//2010年前后盛行 入门js hack 弥补
    var f2 = function() {
      console.log(that);
    }();
  }
}
​
o.f1()
// Object
// Object

上面代码定义了变量that，固定指向外层的this，然后在内层使用that，就不会发生this指向的改变。

事实上，使用一个变量固定this的值，然后内层函数调用这个变量，是非常常见的做法，请务必掌握。

JavaScript 提供了严格模式，也可以硬性避免这种问题。严格模式下，如果函数内部的this指向顶层对象，就会报错。

var counter = {
  count: 0
};
​
counter.inc = function () {
  'use strict';//严格模式
  this.count++
};
​
var f = counter.inc;
f() //此时this指向window，window中并不存在这个方法
// TypeError: Cannot read property 'count' of undefined

上面代码中，inc方法通过'use strict'声明采用严格模式，这时内部的this一旦指向顶层对象，就会报错。

 

避免数组处理方法中的 this

数组的map和foreach方法，允许提供一个函数作为参数。这个函数内部不应该使用this。

var o = {
  v: 'hello',
  p: [ 'a1', 'a2' ],
  f: function f() {
      //解决方案： var that = this
    this.p.forEach(function (item) {
      console.log(this.v + ' ' + item);
    });
  }
}
​
//第二层this嵌套直接指向windows
​
o.f()
// undefined a1
// undefined a2

上面代码中，foreach方法的回调函数中的this，其实是指向window对象，因此取不到o.v的值。原因跟上一段的多层this是一样的，就是内层的this不指向外部，而指向顶层对象。

解决这个问题的一种方法，就是前面提到的，使用中间变量固定this。

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当作foreach方法的第二个参数，固定它的运行环境。

var o = {
  v: 'hello',
  p: [ 'a1', 'a2' ],
  f: function f() {
    this.p.forEach(function (item) {
      console.log(this.v + ' ' + item);
    }, this);//此时this绑定在o上，固定当前运行环境
  }
}
​
o.f()
// hello a1
// hello a2

避免回调函数中的 this

回调函数中的this往往会改变指向，最好避免使用。

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

上面代码中，点击按钮以后，控制台会显示false。原因是此时this不再指向o对象，而是指向按钮的 DOM 对象，因为f方法是在按钮对象的环境中被调用的。这种细微的差别，很容易在编程中忽视，导致难以察觉的错误。

为了解决这个问题，可以采用下面的一些方法对this进行绑定，也就是使得this固定指向某个对象，减少不确定性。

 

绑定 this 的方法

this的动态切换，固然为 JavaScript 创造了巨大的灵活性，但也使得编程变得困难和模糊。有时，需要把this固定下来，避免出现意想不到的情况。JavaScript 提供了call、apply、bind这三个方法，来切换/固定this的指向。

Function.prototype.call()

函数实例的call方法，可以指定函数内部this的指向（即函数执行时所在的作用域），然后在所指定的作用域中，调用该函数。

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

上面代码中，全局环境运行函数f时，this指向全局环境（浏览器为window对象）；call方法可以改变this的指向，指定this指向对象obj，然后在对象obj的作用域中运行函数f。

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
//指向obj
a.call(obj) // 456

上面代码中，a函数中的this关键字，如果指向全局对象，返回结果为123。如果使用call方法将this关键字指向obj对象，返回结果为456。可以看到，如果call方法没有参数，或者参数为null或undefined，则等同于指向全局对象。

 

如果call方法的参数是一个原始值，那么这个原始值会自动转成对应的包装对象，然后传入call方法。

var f = function () {
  return this;
};
​
f.call(5)
// Number {[[PrimitiveValue]]: 5}

上面代码中，call的参数为5，不是对象，会被自动转成包装对象（Number的实例），绑定f内部的this。

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

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

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

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

上面代码中，call方法指定函数add内部的this绑定当前环境（对象），并且参数为1和2，因此函数add运行后得到3。

call方法的一个应用是调用对象的原生方法。

var obj = {};
obj.hasOwnProperty('toString') // false
//是不是你自己的属性  valueof和tostring都属于object上
​
// 覆盖掉继承的 hasOwnProperty 方法  不可行
obj.hasOwnProperty = function () {
  return true;
};
obj.hasOwnProperty('toString') // true
​
//解决方法：call绑定
//表示将父类object里面的tostring方法通过call绑定在了obj上
Object.prototype.hasOwnProperty.call(obj, 'toString') // false

上面代码中，hasOwnProperty是obj对象继承的方法，如果这个方法一旦被覆盖，就不会得到正确结果。call方法可以解决这个问题，它将hasOwnProperty方法的原始定义放到obj对象上执行，这样无论obj上有没有同名方法，都不会影响结果。

Function.prototype.apply()

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

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

apply方法的第一个参数也是this所要指向的那个对象，如果设为null或undefined，则等同于指定全局对象。第二个参数则是一个数组，该数组的所有成员依次作为参数，传入原函数。原函数的参数，在call方法中必须一个个添加，但是在apply方法中，必须以数组形式添加。

function f(x, y){
  console.log(x + y);
}
​
f.call(null, 1, 1) // 2
f.apply(null, [1, 1]) // 2

上面代码中，f函数本来接受两个参数，使用apply方法以后，就变成可以接受一个数组作为参数。

利用这一点，可以做一些有趣的应用。

（1）找出数组最大元素

JavaScript 不提供找出数组最大元素的函数。结合使用apply方法和Math.max方法，就可以返回数组的最大元素。

var a = [10, 2, 4, 15, 9];
Math.max.apply(null, a) // 15

（2）将数组的空元素变为undefined

通过apply方法，利用Array构造函数将数组的空元素变成undefined。

Array.apply(null, ['a', ,'b'])
// [ 'a', undefined, 'b' ]

空元素与undefined的差别在于，数组的forEach方法会跳过空元素，但是不会跳过undefined。因此，遍历内部元素的时候，会得到不同的结果。

var a = ['a', , 'b'];
​
function print(i) {
  console.log(i);
}
​
a.forEach(print)
// a
// b
​
Array.apply(null, a).forEach(print)
// a
// undefined
// b

（3）转换类似数组的对象

另外，利用数组对象的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属性，以及相对应的数字键。

（4）绑定回调函数的对象

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

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()方法）不仅绑定函数执行时所在的对象，还会立即执行函数，因此不得不把绑定语句写在一个函数体内。