DIV CSS 佈局教程網

JavaScript 有一套完全不同於其它語言的對 this 的處理機制。 在五種不同的情況下 ，this 指向的各不相同。

有句話說得很在理 -- 誰調用它，this就指向誰

一、全局范圍內

在全局范圍內使用this ，它將指向全局對象（浏覽器中為 window）

var name = 'name1';
console.log(name);

this.name = 'name2';
console.log(name);
console.log(this.name);

window.name = 'name3';
console.log(name);
console.log(this.name);
console.log(window.name);

二、函數調用

直接調用一個函數，this 默認會指向全局 （浏覽器端為window)

var name = 'name1';
function sayName(){
 console.log(name);
 console.log(this);
}

sayName();
window.sayName();

可以看到

還有幾個常見的情況，根據誰調用方法就指向誰的原則，this的指向要細看

// 全局 name
var name = 'name1';

var obj = {
 name: 'name2',
 sayName: function(){
    // 調用它的時候 this指向全局
  return function(){
   console.log(this.name);
  };
 },
 changeName: function(){
    // 調用它的時候 this指向全局
  setTimeout(function(){
   this.name = 'name3';
  },0);
 }
};

obj.sayName()();
obj.changeName();
setTimeout(function(){
 console.log(name);
 console.log(obj.name);
},0);

像這些類似匿名的函數，默認都是被全局（浏覽器下的window）對象調用，要正確地讓obj調用，就要指代好

可以用that保持this再進行下一步，或者匿名函數傳值，或者使用call/apply/bind改變context等

var name = 'name1';

var obj = {
 name: 'name2',
 sayName: function(){
  var that = this;
  return function(){
   console.log(that.name);
  };
 },
 changeName: function(){
  var that = this;
  setTimeout(function(){
   that.name = 'name3';
  },0);
 }
};

obj.sayName()(); // name2
obj.changeName();
setTimeout(function(){
 console.log(name); // name1
 console.log(obj.name); // name3
},0);

三、作為對象方法的調用

其實就類似上頭提到的 obj.sayName()  obj.name 等

這時this會指向這個obj 

四、call/apply/bind 的調用

當使用 Function.prototype 上的 call 或者 apply ，bind 方法時，函數內的 this將會被 顯式設置為函數調用的第一個參數。

具體使用方法

我們可以稍微修改一下上頭的代碼，就可以看到this指向的改變

var name = 'name1';

var obj = {
 name: 'name2',
 sayName: function(){
  // 返回一個默認全局的函數
  return function(){
   console.log(this.name);
  };
 },
 changeName: function(){
  // 返回一個默認全局的函數
  setTimeout(function(){
   this.name = 'name3';
  // 然後將該函數綁定給this(當前obj對象)
  }.bind(this),0);
 }
};

// obj.sayName()這個函數，讓obj來調用
obj.sayName().call(obj);
// 讓this(也就是全局對象）來調用
obj.sayName().apply(this);

obj.changeName();
setTimeout(function(){
 // 輸出更改之後，全局name的值
 console.log(name);
 // 輸出更改之後，obj對象中 name的值
 console.log(obj.name);
},0);

五、作為構造函數調用

比如 new Foo();

先來看個簡單的例子：

var name = 'name1';
function Foo(){
 // 賦值this(當前對象)的name屬性值
 this.name = 'name2';
}

// new 構造函數產生一個實例
var foo = new Foo();

console.log(name);
console.log(foo.name);

// 直接調用該函數
Foo();
console.log(name);

可以看到，如果函數傾向於和 new 關鍵詞一塊使用，則我們稱這個函數為構造函數，當new 了之後，this則指向這個心創建的對象（這個new 的過程其實也涉及到了繼承機制）。

若直接調用這個函數，this就默認執行全局對象了。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。