1. 程式人生 > >javascript中this的理解整理----面試中經常會問道關於this的理解

javascript中this的理解整理----面試中經常會問道關於this的理解

在javascript中this的指向確實也是困擾我之久,每每遇到這種面試題,都不想思考,好吧~~~決定好好整理一下.

  1. this的指向只有在函式呼叫的時候才可以確定到底指向誰(在函式的定義的時候是沒有辦法確認的),實際上的this會指向呼叫它的物件. 通常在瀏覽器的環境下,宣告的全域性變數或全域性的函式,都是window物件的一個屬性,所以通常全域性函式的呼叫的this都會指向window物件
  2. this不一定指向函式的作用域.有時候函式是否可以呼叫成功取決於環境(這裡屬於摘抄) window,在chrome console環境裡是沒有問題的.
function foo(){
   var a = 2;
   this.bar();
   console.log(this);
}
function bar(){
   console.log(this.a);
   console.log(this);
}
foo();

在這裡插入圖片描述 nodejs,在node環境下,宣告的function 不會放在global全域性物件下,因此在foo函式裡呼叫this.bar函式 在這裡插入圖片描述 呼叫bar函式,要省去前面的this,然後執行這段程式碼輸出為undefined 在這裡插入圖片描述

關於this需要注意的地方

  • 通常情況下的繫結方式 當函式呼叫屬於獨立呼叫(不帶函式引用的呼叫),在非嚴格模式下繫結到全域性物件,在使用了嚴格模式(use strict)下繫結到undefined

在這裡插入圖片描述

非嚴格模式下,在瀏覽器window全域性物件下會將a繫結到window.a 在這裡插入圖片描述

非嚴格模式下,node環境中不會將a繫結到global,因此下面輸出undefined 在這裡插入圖片描述 在實際的開發過程中,兩種模式不要混用,切記

  • 當一個函式為某個物件的屬性時,此時的this指向該物件本身(this通常指的是上下文) 在這裡插入圖片描述

  • 強制改變this--------call()、apply()方法,ES5中也提供了內建的方法 Function.prototype.bind

  • new 繫結:建構函式的this的指向為新構造出的物件的本身 關於箭頭函式,不會有上面任何一種的this繫結方式箭頭函式會繼承自外層函式呼叫的this繫結(箭頭函式不繫結自己的this,arguments等) 如果將箭頭函式外層的this進行繫結,那麼教頭函式的this也被繫結,且不被修改.