理解js中this的指向問題

在前端的飛速發展的過程中，各種框架層出不窮，但是當大家看到這些框架的原始碼時，大家也許會發現很多框架都有this 這個問題，由此看來this的指向是多麼的重要，但是關於this問題許多人對於他的指向問題一直都是很模糊，那麼就讓我們來一起看一下this的指向到底是怎麼樣的。

首先必須要說的是，this的指向在函式定義的時候是確定不了的，只有函式執行的時候才能確定this到底指向誰，實際上this的最終指向的是那個呼叫它的物件(這句話有些問題，後面會解釋為什麼會有問題，雖然網上大部分的文章都是這樣說的，雖然在很多情況下那樣去理解不會出什麼問題，但是實際上那樣理解是不準確的，所以在你理解this的時候會有種琢磨不透的感覺)，那麼接下來我會深入的**這個問題。

例子1：

function a();

var a = new fn;

console.log(a.user); //undefined

再看乙個

function fn()

this.user = '飛翔的企鵝';

return function(){};

var a = new fn;

console.log(a.user); //undefined

再來function fn()

this.user = '飛翔的企鵝';

return 1;

var a = new fn;

console.log(a.user); //飛翔的企鵝

function fn()

this.user = '飛翔的企鵝';

return undefined;

var a = new fn;

console.log(a.user); //飛翔的企鵝

什麼意思呢?

如果返回值是乙個物件，那麼this指向的就是那個返回的物件，如果返回值不是乙個物件那麼this還是指向函式的例項。

function fn()

this.user = '飛翔的企鵝';

return undefined;

var a = new fn;

console.log(a); //fn

還有一點就是雖然null也是物件，但是在這裡this還是指向那個函式的例項，因為null比較特殊。

function fn()

this.user = '飛翔的企鵝';

return null;

var a = new fn;

console.log(a.user); //飛翔的企鵝

知識點補充：

1.在嚴格版中的預設的this不再是window，而是undefined。

2.new操作符會改變函式this的指向問題，雖然我們上面講解過了，但是並沒有深入的討論這個問題，網上也很少說，所以在這裡有必要說一下。

function fn(){

this.num = 1;

var a = new fn();

console.log(a.num); //1

相信現在大家對於this的指向問題會有乙個全新的認識了吧,但是本人還是希望大家在實戰中，來多多體會this的奇特之處，畢竟**不是看出來的，只有運用上了才會明白，才會熟練的使用。

理解js中this的指向問題

例子1：

function a(){

var user = "飛翔的企鵝「

console.log(this.user); //undefined

console.log(this); //window

a();

按照我們上面說的this最終指向的是呼叫它的物件，這裡的函式a實際是被window物件所點出來的，下面的**就可以證明。

function a(){

var user = "飛翔的企鵝「

console.log(this.user); //undefined

console.log(this);　　//window

window.a();

和上面**一樣吧，其實alert也是window的乙個屬性，也是window點出來的。

例子2：

var o = {

user:" 飛翔的企鵝",

fn:function(){

console.log(this.user); //飛翔的企鵝

理解js中this的指向問題

對 js 中 this 指向的理解

徹底理解js中this的指向

徹底理解 JS 中 this 的指向

理解js中this的指向問題

對 js 中 this 指向的理解

徹底理解js中this的指向

徹底理解 JS 中 this 的指向

相關推薦