關於this,總結起來,主要有以下幾個途徑能夠被運用到。
1 物件方法中呼叫this:如果函式被當中物件的乙個方法進行呼叫,則this值指向該物件。
var person =
}person.
sayname()
;// this == person, alert: 'welcome alice'
在這裡,函式的this指向該物件(即 person);但是有一點需要注意,就是當物件的方法被賦予給乙個變數時,其則變為了函式觸發,此時的this為 window 或者 undefined(嚴格模式下),如下:
var person =
}var name =
'bob'
;var say = person.sayname;
// this == window || undefined
say();
// 'welcome bob' || throw an error: cannot read property 'name' of undefined(...)
2 函式內部使用
在函式內部當中使用了 this,即函式被當做方法使用,不同於 1 當中作為物件的方法使用,此時呼叫,是在全域性作用域下進行呼叫,即在window下進行呼叫,由定義可以知道,在全域性作用域下宣告乙個函式,其自動加為window的乙個屬性。this此時名正言順的會指向window,嚴格模式下為 undefined
function
saythis()
saythis
()
結合第一點,函式作為物件的乙個方法使用,這裡存在乙個小坑,即閉包;第一點當中存在乙個小坑,就是將物件的方法賦予給乙個變數的時候,其變為函式觸發,此時的 this 實際上是指向 window(非嚴格模式)。
那麼,當函式中返回乙個函式,此時在物件當中呼叫該方法,其就相當於是函式觸發,此時的 this,在不做任何上下文繫結的前提之下,其指向 window(非嚴格模式)。
var name =
'bob'
, person =;}
};person.
sayname()
();
當然,要解決這個問題的方法,很簡單,就是給他繫結乙個上下文。
var name =
'bob'
, person =
.bind
(this);
}};person.
sayname()
();
3 new 當中進行使用
我們知道在使用 new 方法建立物件的時候,會經過如下這些個過程:
function
person
(name, age)
var person1 =
newperson
('alice',29
);console.
log(person1.name)
;// alice
這裡要記得使用 new 運算子,否則,其只能算是普通的呼叫,而不是建立乙個新的例項物件。而當做普通函式呼叫的話,實際上即 第 2 種情況下,對函式普通呼叫,此時的 this 指向 window
function
person
(name, age);}
var person1 =
newperson
('alice');
console.
log(person1.name)
;// bob
console.
log(person1.age)
;// undefined
var a =
, func2:
function()
.(a)
,100);
}}; a.
func2()
// cherry
使用 call
var a =
, func2:
function()
.call
(a),
100);}
};a.
func2()
// cherry
使用 bind
var a =
, func2:
function()
.bind
(a)(),
100);}
};a.
func2()
// cherry
var a =
}var b = a.fn;
b.(a,[1,
2])// 3
var a =
}var b = a.fn;
b.call
(a,1,2
)// 3
bind()方法建立乙個新的函式, 當被呼叫時,將其this關鍵字設定為提供的值,在呼叫新函式時,在任何提供之前提供乙個給定的引數序列。
bind 是建立乙個新的函式,我們必須要手動去呼叫:
var a =
}var b = a.fn;
b.bind
(a,1,2
)()// 3
5 箭頭函式
眾所周知,es6 的箭頭函式是可以避免 es5 中使用 this 的坑的。箭頭函式的 this 始終指向函式定義時的 this,而非執行時。,箭頭函式需要記著這句話:「箭頭函式中沒有 this 繫結,必須通過查詢作用域鏈來決定其值,如果箭頭函式被非箭頭函式包含,則 this 繫結的是最近一層非箭頭函式的 this,否則,this 為 undefined」。
var name =
"windowsname"
;var a =
, func2:
function()
,100);
}}; a.
func2()
// cherry
this指向理解
首先必須要說的是,this的指向在函式定義的時候是確定不了的,只有函式執行的時候才能確定this到底指向誰,實際上this的最終指向的是那個呼叫它的物件 例子1 functiona a 按照我們上面說的this最終指向的是呼叫它的物件,這裡的函式a實際是被window物件所點出來的,下面的 就可以證...
this指向的簡單理解
this 本身含義 執行上下文 只能是物件 不是物件強行轉換成物件 this一般存在於函式中,表示當前函式的執行上下文,如果函式沒有被執行,那麼this沒有內容,只有函式在執行後this才有繫結。函式執行的位置 1 預設執行 自己執行自己 fn 預設情況下的隱式執行 this指向window 嚴格模...
關於js this指向的理解
var obj add1 function a var f v v this.count return f.call b,a add2 function a var f function v return f.call b,a console.log obj.add 1 2 console.log ...