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

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

• 函數(shù)的定義方式：直接定義（window下，內部定義），對象的方法，對象原型的方法；

• 函數(shù)的調用方式：直接調用，call/apply，with

• 對于直接定義的函數(shù)和對象的方法，作用域默認狀態(tài)下是它的定義處的作用域鏈。

• 對于直接定義的函數(shù)，this指向window。

• 對于對象的方法，this指向實例化對象（對應于實例化對象默認返回this的情況）。

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

• 在函數(shù)或方法的定義時可以通過with改變其作用域鏈。

下面分開來具體說說：

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

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

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

在使用name的值時將“name”用“this.name”來代替會出現(xiàn)什么情況呢，看下例：

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

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

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

 關于函數(shù)的調用方法，我用下面的方示例說明提綱中的第2、6條：

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

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

調用時call和apply的使用是為了改變被調用函數(shù)的this指向。with的使用是為了改變被調用函數(shù)中變量的查詢域。我們把上例中的call和name前的this去掉再加上with來演示with的作用。

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

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

看到with的使用并不方便，需要在被調用函數(shù)中添加with，有人可能想能不能向下面那樣調用來整體改變變量作用域而不去改變被調用函數(shù)呢？

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

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

以上這篇深入理解js函數(shù)的作用域與this指向就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論