javascript中this指針探討

　　javascript是一門類java語言有很多跟java相類似的特點，但也僅是類似而已，真正使用中還是有很大的差別。this指針常常讓很多初學者抓狂，本人也曾為此困惑不解，查找過很多資料，今天在這里總結一下，希望能幫助后來者更快馴服這只攔路虎。網上有很多講解this指針的文章其中不乏精品，以我看來了解this指針關鍵在於掌握javascript中函數的四種調用模式。那么什么是調用？調用指的是跟在任何產生一個函數值的表達式之后使用"()"，obj.f()這種方式成為調用，obj.f這種方式稱為訪問。

　　一、方法調用模式：

　　在該調用模式中函數作為一個對象的方法被調用：obj.fun()。當函數以此種形式被調用時this指針綁定到調用該方法的對象上即obj。

var myObj = {
  value: 0,
  increase: function(){
    this.value++;
    console.log(this.value);
  }
};
// this綁定到myObj對象上
myObj.increase(); // 1

myObj2 = {
  value: 10
};
myObj2.increase = myObj.increase;// myObj2與myObj的increase指向同一函數引用地址
// this綁定到myObj2對象上
myObj2.increase(); // 11

　　所以在將一個html元素的某一事件綁定某一函數時，若函數中使用this指針，則this指針會被綁定到該元素上。

var ele1 = document.getElementById('id');
ele1.addEventListener('click', myObj.increase, false);
// 該綁定相當於
ele1.onclick = myObj.increase;
// 事件觸發時即相當於調用click方法
ele1.click(); // 與上文中myObj2.increase一個道理，若ele1中沒有value屬性則會報錯

 

　　二、函數調用模式：

　　當函數沒有當做方法調用即沒有被一個對象通過點語法，這時它被當做一個函數來調用。以此模式調用函數時，this被綁定到全局對象。

var value = -10;
var myObj = {
  value: 0,
  increase: function(){
    this.value++;
    console.log(this.value);
  }
};
// this綁定到myObj對象上
myObj.increase(); // 1

var gInc = myObj.increase;
gInc(); // -9 this綁定到window對象上

　　所以在方法中使用內部函數時要特別注意，下例中other函數中的this並未綁定到myObj對象上

var value = -10;
var myObj = {
  value: 0,
  increase: function(){
    this.value++;
    console.log(this.value);
    var other = function(){
      this.value++;
      console.log(this.value); 
    };
    other();// -9， 這時other中的this綁定到window對象上
  }
};
// this綁定到myObj對象上
myObj.increase(); // 1

var gInc = myObj.increase;
gInc(); // -8
///////////////
//1
//-9
//-8
//-7

　　幸運的是我們可以使用以下方式來在other中訪問myObj對象：

var myObj = {
  value: 0,
  increase: function(){
    this.value++;
    console.log(this.value);
    var that = this;
    var other = function(){
      that.value++;
      console.log(that.value); 
    };
    other();// -9， 這時other中的this綁定到window對象上
  }
};
// this綁定到myObj對象上
myObj.increase(); // 1
//////////////
//1
//2

　　作為瀏覽器兼容性中很重要的一條：element.attachEvent綁定事件方法，當該事件觸發時this指針並未綁定到element對象上，而是綁定到了window對象上，原因在於IE中事件觸發時，響應函數是以一個獨立函數即函數調用模式來調用的

 

　　三、構造器模式調用：

　　如果在一個函數前面加上new調用則成為構造器模式調用。使用new運算符，會產生一個連接到該函數prototype的新對象，this指針則被綁定到這個新對象上。

var P = function(n){
  this.name = n;
}
P.prototype.getName = function(){
  console.log(this.name);
}
var p = new P('woodtree'); // 這時P中的this對象唄綁定p指向的對象引用上
p.getName();// woodtree

　　同時new運算符還會改變函數的返回值。以函數調用模式調用P即P()返回undefined，而通過new運算符則返回一個新對象。new運算符類似於以下Function.prototype.create函數：

var P = function(n){
  this.name = n;
}
P.prototype.getName = function(){
  console.log(this.name);
}
var p = new P('woodtree');
p.getName();

Object.prototype.create = Object.create || function(proto){
  var F = function(){};
  F.prototype = proto;
  return new F();
}

Function.prototype.create = function(){
  var that = object.create(this.prototype);
  var obj = this.apply(that, arguments);

  return obj || that;
}
var p2 = P.create('hello new');
p2.getName(); // hello new

 

　　四、apply、call模式調用：

　　javascript中函數對象繼承自Object亦可以擁有方法。call跟apply允許我們選擇this的綁定對象。這兩個方法的區別在於apply第二個參數必須是一個數組或者類數組對象即擁有length屬性(arguments、NodeList、HTMLElementCollection等)，而call除了第一個參數為要綁定this的對象外，后可跟無數的參數，參數之間用逗號間隔。

var P = function(n){
  this.name = n;
}
P.prototype.getNameAndAge = function(age){
  console.log(this.name + age);
}

P.prototype.getNameAndAge.call({
  name: 'catboat'
}, 99);
P.prototype.getNameAndAge.apply({
  name: 'lanuch'
}, [99]);

 

　　通過使用apply與call方法我們可以自行實現ES5中的bind函數

var P = function(n){
  this.name = n;
}
P.prototype.getNameAndAge = function(age, age2){
  console.log(this.name + age + age2);
}

P.prototype.getNameAndAge.call({
  name: 'catboat'
}, 99);
P.prototype.getNameAndAge.apply({
  name: 'lanuch'
}, [99]);

Function.prototype.bindContext = function(that){
  var _method = this,
  slice = Array.prototype.slice,
  args = slice.call(arguments, 1);

  return function(){
    _method.apply(that, Array.prototype.concat.apply(args, arguments));
  }
};

var f1 = P.prototype.getNameAndAge.bindContext({
  name: 'barque'
}, 88);
f1(9);

　　同樣我們也可以解決IE中事件觸發時，this指針問題（以下代碼來自《Javascript框架設計》）：

var addEvent = document.addEventListener ? function(el, type, fn, capture){
  return el.addEventListener(type, fn, capture);
} : function(el, type, fn){
  el.attachEvent('on' + type, fn.bindContext(el, event));
}