javascript中的this

在javascript中的this大致可以理解成谁调用的this就指向谁

全局环境中的this

alert(this);//window

函数中的this

var name = 'tom';
function say(){
  var name = 'bob'
  alert(this.name);
}
say();//tom

调用say()等价于window.say()，所以this最终指向window

对象中的this

var name = 'tom';
var obj = {
  name: 'bob',
  say: function(){
    alert(this.name);
  }
}
//第一种调用形式
obj.say();//bob; 对象直接调用所以this指向obj
//第二种调用形式
var tSay = obj.say;
tSay();//tom; 最终tSay还是通过window调用，所以最终this指代window对象

做为构造函数中的this

function A(){
  console.log(this);
}
var a = new A();// function A(){console.log(this)}

函数中的函数的this

var name = 'tom';
var obj = {
  name: 'bob',
  say: function(){
    function _say(){
      alert(this.name);
    }
    _say();
  }
}
obj.say();//tom 最终调用_say的是window 所以this指向window

apply、call可以改变this指向

var obj1 = {
  name: 'tom'
}
var obj2 = {
  name: 'bob',
  say: function(){
    alert(this.name);
  }
}
obj2.say.call(obj1);//tom 最终this指向obj1
obj2.say.apply(obj1);//tom 最终this指向obj1

通过apply、call可以改变this指向
call和apply实现的功能是相同，区别在于传参部分

call( thisArg [, arg1，arg2, … ] );  // 参数列表，arg1，arg2，...  
apply(thisArg [, argArray] );     // 参数数组，argArray 

在点击事件中的this

<div id="button">点击</div>

var obj = {
  name: 'bob',
  say: function(){
    alert(this.name);
  }
}
let oButton = document.getElementById('button');
oButton.onclick = obj.say;//undefined 因为最终调用say的是oButton，oButton没有定义name属性所以最终结果是undefined

我们可以通过ES5中引入的bind方法来解决这个问题

oButton.onclick = obj.say.bind(obj);//强制绑定obj.say的this指向为obj，所以最终结果是bob;

我们可以自己模拟bind方法，比如：

Function.prototype.bind = function(){  
  var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift();  
  return function(){  
    return fn.apply(object,  
      args.concat(Array.prototype.slice.call(arguments)));  
  };  
};