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。

一、纯粹的函数调用

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

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

二、做为对对象的方法调用

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

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。

三、构造函数

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

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

p.name  //‘张三’l
p.sayName  //'张三'复制代码

四、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