JavaScript中的this关键字-学习笔记

简单地说，this就是属性或方法当前所在的对象。

1 this的使用场合

this主要有以下几种使用场合：

1. 全局环境：全局环境下使用this，则this指定就是顶层对象window。测试如下：

   this === window //true
   
   function f() {
       console.log(this === window);
   }
   f() //true
   

2. 构造函数：构造函数中的this，指的是实例对象。具体请参考JavaScript面向对象之对象-学习笔记一文的内容。

3. 对象的方法：若对象的方法里包含this，则this的指向就是方法运行时所在的对象。

   如下例子所示：this的指向是可变的，随着f所在的的对象不同，this的指向也会跟着发生变化。

   function f() {
     return '姓名：'+ this.name;
   }
   
   var A = {
     name: '张三',
     describe: f
   };
   
   var B = {
     name: '李四',
     describe: f
   };
   
   A.describe() // "姓名：张三"
   B.describe() // "姓名：李四"
   

2 如何避免this指向的动态切换

函数内部this的指向，就是函数执行时所在的作用域。

2.1 谨慎使用this

先来看一个例子：

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

o.f()

测试结果表明：第一层this指向的为对象o，第二层指向的却是全局变量Window。

Object
Window

解决方法有如下2种：

1. 在第二层改用一个指向外层this的变量：

   var o = {
     f1: function() {
       console.log(this);
       var that = this; // 将外层this赋值给另一个变量
       var f2 = function() {
         console.log(that);
       }();
     }
   }
   

   另外，我们在使用数组的forEach方法时，可以将this作为forEach方法的第2个参数，固定它的运行环境。

   var o = {
     v: 'hello',
     p: [ 'a1', 'a2' ],
     f: function f() {
       this.p.forEach(function (item) {
         console.log(this.v + ' ' + item);
       }, this); //将this作为第二个参数，则将运行环境固定为当前对象
     }
   }
   

2. 使用严格模式：即在函数内部加上'use strict';语句，这样我们直接不加对象进行调用时会报错，这样就避免了this指向顶层对象Window。

综上，我们应该尽量避免以下情况的出现：

1. 在代码中出现多层this（例如本节开始测试的例子）；
2. 避免在回调函数中使用this，例如数组的map、forEach方法的回调函数作为参数时，或者按钮绑定的事件中的回调函数。

2.2 绑定this

JavaScript 提供了call、apply、bind这三个方法，来切换或固定this的指向。

2.2.1 Function.prototype.call()方法

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

var n = 123;
var obj = { n: 456 };

function a() {
  console.log(this.n);
}

测试结果如下：在参数为空或者为undefined时，默认指向全局作用域window。

a.call() // 123
a.call(null) // 123
a.call(undefined) // 123
a.call(window) // 123
a.call(obj) // 456

call方法可以接受多个参数，第一个参数为this所要指向的那个对象，后面的参数则时函数调用时所需的参数。举例如下：

function add(a, b) {
  return a + b;
}

add.call(this, 1, 2) // 3

call方法的还有一个应用就是：调用对象的原生方法。

例如：我们改写了对象的hasOwnProperty方法，此时若还想用它原来的实现，则可以这样做：显然toString方法属于继承的方法，最终结果返回false。

var obj = {};
Object.prototype.hasOwnProperty.call(obj, 'toString');

2.2.2 Function.prototype.apply()方法

apply方法的作用与call方法类似，也是改变this指向，然后再调用该函数。与call方法唯一的区别就是，它可以接受一个数组作为函数的参数。

直接先上一个例子：f函数本来接受两个参数，使用apply方法以后，就变成可以接受一个数组作为参数。

function f(x, y){
  console.log(x + y);
}
//若用call方法，我们可以这样调用
f.call(null,1,1);
//若用apply方法，则可以传入一个数组作为参数
f.apply(null,[1,1]);

下面是关于apply方法的一些有趣的应用：

1. 找出数组最大元素：

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

2. 将数组空元素变为undefined：这样就避免了数组的forEach方法在遍历时会跳过的空元素了。

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

3. 转换类似数组的对象：

   注：类似数组的对象：必须含有length属性，或者含有数字类型的键，即满足其一或两者都有。

   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]
   

2.2.3 Function.prototype.bind()方法

bind()方法用于将函数体内的this绑定到某个对象，并返回一个新函数。

来看一个例子：此时的this指向的是Window，因此报错；

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

var func=counter.inc();
func();//Uncaught TypeError: func is not a function

此时可以借助bind方法：

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

var func=counter.inc().bind(counter);
func();
counter.count //1

bind也可以将方法绑定到其他对象：bind()方法将inc()方法内部的this，绑定到obj对象。结果调用func函数以后，递增的就是obj内部的count属性。

var counter = {
  count: 0,
  inc: function () {
    this.count++;
  }
};
var obj = {
  count: 100
};

var func = counter.inc.bind(obj);
func();
obj.count // 101

同call方法一样，bind方法可以接受多个参数，它会将这些参数绑定原函数的参数。如果bind方法的第一个参数是null或undefined，等于将this绑定到全局对象。

另外，在本小节开头也说过，由于bind方法会返回一个新函数，因此在绑定事件时会出现解绑无效的情况：

ele.addEventListener('click',obj.method.bind(obj));
element.removeEventListener('click', obj.method.bind(obj));

应改写为：

var listener = obj.method.bind(obj);
element.addEventListener('click', listener);
element.removeEventListener('click', listener);

2.2.4 call()和bind()的结合使用

举例如下：

var arr=[1,2,3]
arr.slice(0,1);

//可以改写为
Array.prototype.slice.call(arr,0,1);

//上面的本质上如下：即将Array.prototype.slice绑定到Function.prototype.call方法所在的对象
var slice=Function.prototype.call.bind(Array.prototype.slice);
slice(arr,0,1);

上面的方法也可以用于数组的其他方法，例如push方法或pop方法等。