詳細介紹JavaScript函數的作用域與this指向

下面小編就為大家帶來一篇深入理解js函數的作用域與this指向。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧

函數的作用域與this指向是js中很重要的一部分，理清這點東西需要個邏輯，看看我的邏輯怎麼樣...

以下是個提綱，可以直接挑你有興趣的條目來閱讀。

• 函數的定義方式：直接定義（window下，內部定義），物件的方法，物件原型的方法；

• 函數的呼叫方式：直接調用，call/apply，with

• 對於直接定義的函數和物件的方法，作用域預設狀態下是它的定義處的作用域鏈。

• 對於直接定義的函數，this指向window。

• 對於物件的方法，this指向實例化物件（對應於實例化物件預設回傳this的情況）。

• 用call/apply改變方法的this指向

• 在函數或方法的定義時可以透過with改變其作用域鏈。

下面分開來具體說：

函數的定義，如提綱中提到的可以分為兩種：直接定義（ window下，內部定義），物件的方法（或物件原型的方法）。從下面的範例程式碼中可以看到函數fn1與fn2以及物件的方法doFunction在函數使用name時name的值來自對應的域。

 

var name = &#39;window下的name<br/>&#39;;
var resultCon;
function fn1() {
  resultCon.innerHTML += name;
}

function MyObj() {
  var name = &#39;MyObj下的name<br/>&#39;;
  this.doFunction = function() {
    resultCon.innerHTML += name;

在使用name的值時將「name」用「this.name」來取代會出現什麼情況呢，看下例：

var name = &#39;window下的name<br/>&#39;;
var resultCon;
function fn1() {
  resultCon.innerHTML += this.name;
}

function MyObj() {
  var name = &#39;MyObj下的name<br/>&#39;;
  this.doFunction = function() {
    resultCon.innerHTML += this.name;

從結果來看可以驗證提綱中的第4和5條，也可以看到this和作用域是兩套分離的鏈，遵循個自的變數查詢邏輯，具體的查詢邏輯在下面的效能分析會提到，如果是新手建議先看一下「js的作用域鏈」方面的基礎知識。

 關於函數的呼叫方法，我用下面的方範例說明提綱中的第2、6條：

var name = &#39;window下的name<br/>&#39;;
var resultCon;
function fn1() {
  resultCon.innerHTML += this.name;
}

function MyObj() {
  var name = &#39;MyObj下的name<br/>&#39;;
  this.doFunction = function() {
    resultCon.innerHTML += this.name;

呼叫時call和apply的使用是為了改變被呼叫函數的this指向。 with的使用是為了改變被呼叫函數中變數的查詢域。我們把上例中的call和name前的this去掉再加上with來示範with的作用。

var name = &#39;window下的name<br/>&#39;;
var resultCon;
function fn1(myScope) {
  with (myScope) {
    resultCon.innerHTML += name;
  }
}

function MyObj(myScope) {
  var name = &#39;MyObj下的name<br/>&#39;;

看到with的使用並不方便，需要在被呼叫函數中加入with，有人可能想能不能向下面那樣呼叫來整體改變變數作用域而不去改變被呼叫函數呢？

with (myScope) {
  fn1();
  fn2();
  var obj = new MyObj();
  obj.doFunction();
}

很遺憾，不行！所以在一些成熟的框架中隨處可見call和apply的使用，卻很少用到with，在用JSHint檢測js語法的時候with處都標了小紅點，在一些js編碼指導中也建議盡量少用with，因為with改變了變數的預設查詢鏈，所以會給後期的維修人員一些困惑，還有效能方面的一些考慮，請慎用with。

以上是詳細介紹JavaScript函數的作用域與this指向的詳細內容。更多資訊請關注PHP中文網其他相關文章！