js函数中的this

前两篇文章“执行环境和作用域”和“js中的闭包”，我对谈了执行环境、作用域、作用域链和闭包的理解。但当牵涉到对象中的方法时，前面谈的东西就不那么适用了。先来看一个例子：

var name = 'a';
function getName(){
  console.log(name);
}
var o1 ={
  name: 'a1',
  getName: getName
}
var o2 ={
  name: 'a2',
  getName: getName
}
o1.getName()    // 'a'
o2.getName()    // 'a'

上面的代码中，o1.getName()和o2.getName()都输出‘a’，根据"作用域的规则"很好解释。但问题是：我们既然使用了这种方式调用函数，肯定更希望gentName方法访问的是对象内部的‘name’属性。这时，就需要修改外部定义的getName方法了。前面谈过在函数执行时，会动态的创建一个活动对象，这个活动对象，被作为变量对象，推进执行环境栈中。同时，还会创建“arguments”对象和绑定this对象，arguments对象最为变量对象的第一个属性，保存着传入函数中的参数；this对象根据函数的执行环境动态地绑定。有句很经典的判断this指向的话：谁调用了函数，this就指向谁。

这样，只要把getName函数修改成下面的代码，就可以实现访问对象中name属性的效果：

function getName(){
  console.log(this.name)
}

依靠上面经典的话，可以在很多情况下判断this的指向，但还有一些情况不使用。下面就分类来说下this。

1、纯粹的函数调用

这是函数最通常的用法。这时，不论函数是在全局作用域下执行，还是在函数中执行，this都是指向全局对象，也就是window对象。例如：

var person = 'xiaoming'
function f1(){
  var person = 'xiaohong'
  function f2(){
    console.log(this.person)
  }
  f2()
}
f1();  // 'xiaoming'

2、作为对对象的方法调用

在函数作为对象的方法调用时，上面的那句经典的话，就很适用了。这里来看一个很典型的例子：

var age = 18;
var obj = {
  age : 21,
  fn: functoin(){
    console.log(this.age)
  }
}
(false || obj.fn)()   //  18

在上面的代码中，在对象中的fn方法执行之前，会先执行‘||’运算，相当于：

(false || function(){
  console.log(this.age)
})()

实际上，也就是fn方法在全局作用域中执行。所以，结果是18。

3、构造函数

构造函数中的this，指向对象的实例。例如：

function People(name){
  this.name = name
}
People.prototyope.sayName() = function(){
  console.log(this.name)
}
var p = new People('张三');

p.name  //‘张三’l
p.sayName  //'张三'

4、call、apply和bind

call、apply和bind方法都是函数对象中的方法，用来动态地改变函数中this的指向，只是用法不同。call和apply被调用时，不仅改变函数中this指向，而且执行该函数，但bind仅仅是改变函数中this的指向，并不执行。如下：

var x = 2;
var y = 3;
function getY(){
  console.log(this.y)
} 
var o = {
  x: 1,
  y: 4,
  getX: function(){
    console.log(this.x)
  }
}
o.getX.call()    //2
getY.bind(o)()    // 4

call、apply和bind方法在未传入指定对象时，默认传入window 对象，因此，o.getX.call() 输出结果是2。使用bind方法时，仅仅改变函数中this指针的指向，而要执行需要在后面添加'()'。call 和 apply方法在使用时，除了第一个指定this对象的参数外，后面还可以添加原油函数的其他参数，call方法接受单个参数的罗列，而apply方法接受数组格式的参数(arguments对象也可以)。如下：

fn.call(o, param1,param2)
fn.call(o,[param1,param2])

注意点

this的指向是不确定的，不要在函数中包含多层的this。在必要时，可以将this赋值给其他的变量，再使用。例如：self，that等。例如：

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

避免回调函数中的this：回调函数中的this往往会改变指向，最好避免使用。例如：
```
var o = new Object();
o.f = function () {
console.log(this === o);
}
o.f() // true
```
上面的代码是没什么问题的，但当把 o.f 作为事件处理的回调函数就不一样了。例如：
```
$('#button').on('click', o.f);
```

写在结尾：
如果觉得我写的文章对你有帮助，欢迎扫码关注我的公众号：海痕笔记
微信号：haihenbiji