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

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

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

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

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

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

• 對于對象的方法，this指向?qū)嵗瘜ο螅▽?yīng)于實(shí)例化對象默認(rèn)返回this的情況）。

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

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

下面分開來具體說說：

函數(shù)的定義，如提綱中提到的可以分為兩種：直接定義（window下，內(nèi)部定義），對象的方法（或?qū)ο笤偷姆椒ǎ南旅娴氖纠a中可以看到函數(shù)fn1與fn2以及對象的方法doFunction在函數(shù)使用name時(shí)name的值來自相應(yīng)的域。

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的值時(shí)將“name”用“this.name”來代替會(huì)出現(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;

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

 關(guān)于函數(shù)的調(diào)用方法，我用下面的方示例說明提綱中的第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;

調(diào)用時(shí)call和apply的使用是為了改變被調(diào)用函數(shù)的this指向。with的使用是為了改變被調(diào)用函數(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的使用并不方便，需要在被調(diào)用函數(shù)中添加with，有人可能想能不能向下面那樣調(diào)用來整體改變變量作用域而不去改變被調(diào)用函數(shù)呢？

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

很遺憾，不可以！所以在一些成熟的框架中隨處可見call和apply的使用，卻很少用到with，在用JSHint檢測js語法的時(shí)候with處都標(biāo)了小紅點(diǎn)，在一些js編碼指導(dǎo)中也建議盡量少用with，因?yàn)閣ith改變了變量的默認(rèn)查詢鏈，所以會(huì)給后期的維護(hù)人員一些困惑，還有性能方面的一些考慮，請慎用with。

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

最新評論