摘要:中只有的作用域是動態作用域的五種綁定初學時,會想當然認為遵循某一條規律,就像物理學那樣,然而并不是。的綁定分為五種情況,這五種情況之間毫無規律可言。以至指向更加撲朔迷離。
this 到底指向哪里
</>復制代碼
以下如果沒提及,則為嚴格模式。
js中作用域有兩種:
詞法作用域
動態作用域
詞法作用域詞法作用域指在書寫代碼時就被確定的作用域。
看如下代碼
</>復制代碼
var value = 1;
function foo() {
console.log(value);
}
function bar() {
var value = 2;
foo();
}
bar();// 結果是1
動態作用域
動態作用域指在代碼運行時才被確定的作用域。
js中只有this的作用域是動態作用域
初學js時,會想當然認為this遵循某一條規律,就像物理學那樣,然而并不是。
this的綁定分為五種情況,這五種情況之間毫無規律可言。不過好在都很簡單。
當以如下形式執行一個函數時,this為默認綁定;
</>復制代碼
func()
嚴格模式下,this為undefined
非嚴格模式下,this是全局對象。
與函數調用嵌套多少層如何嵌套無關
</>復制代碼
/* 全是undefined */
function printThis(){
return this
}
var obj = {
say(){
console.log("obj.say",printThis())
}
}
function funcB(){
console.log("funcB",printThis());
obj.say();
}
console.log("funcA",printThis())
obj.say()
funcB()
二. 隱式綁定
當以如下行駛執行一個函數時,this為隱式綁定;
</>復制代碼
a.b.func()
此時this指向點前面一個對象
賦值會改變隱式綁定this的指向方法賦值給變量
</>復制代碼
class T {
dotInvoke() {
console.log("dotInvoke", this.sayThis())
}
sayThis() {
return this
}
assignInvoke() {
var sayThis = this.sayThis;
console.log("assignInvoke", sayThis())
}
}
var tt = new T();
tt.dotInvoke()// 指向T
tt.assignInvoke()// undefined
函數被賦值成方法
</>復制代碼
function printThis(){
return this
}
var obj = {};
obj.say = printThis;
obj.say()/* 指向obj */
賦值給參數
極為常見的是回調函數的this是undefined,因為回調函數被復制給參數,參數再調用時變成了默認綁定
</>復制代碼
function asyncFun(cb){
cb()
}
var obj = {
callback(){
console.log(this)
}
}
obj.callback()/*隱式綁定 obj */
asyncFun(obj.callback);/*默認綁定 undefined */
三. 箭頭函數
箭頭函數會讓this指向最近的函數或全局作用域
與最近的函數的this指向相同
</>復制代碼
function foo() {
// 返回一個箭頭函數
return (a)=>{
//this 繼承自 foo()
return this.a
}
;
}
var obj1 = {
a: "obj1"
};
var obj2 = {
a: "obj2"
}
var arrow1 = foo.call(obj1);
var arrow2 = foo.call(obj2);
var arrow3 = foo();
console.log("arrow1",arrow1())/* obj1 */
console.log("arrow2",arrow2())/* obj2 */
console.log("arrow3",arrow3())/* undefined,嚴格模式下報錯 */
指向全局
</>復制代碼
var printThis = ()=>this;
console.log("printThis",printThis());/* global */
指向實例
</>復制代碼
class Test {
printThis = ()=>{
return this
}
}
//會被babel翻譯成
var test = function test() {
var _this = this;
this.printThis = function () {
return _this;
};
};
四. 顯示綁定
call, apply, bind指定this指向
五. new綁定</>復制代碼
構造函數,ES6中的class
new構造函數,new class時,this指向實例
總結
五種綁定,后面兩種情況單一,前面兩種會因為方法,函數被賦值而互相轉化。
因為this處于動態作用域,而目前開發時又大量使用框架。我們寫下的代碼,并不總是由我們自己調用,而是被打包工具打包后,由框架調用。導致我們并不知道我們寫下的函數和方法是否被框架復制過或顯示綁定過而改變了this指向。以至this指向更加撲朔迷離。
寫完本文頓時覺得,python里指向明確的self完爆js的this。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/100616.html
摘要:的五種不同情形默認情況在默認的,純粹的函數調用時,視作全局性調用,此時的指向全局對象,在瀏覽器環境下,也即對象。構造函數當一個函數被當做構造函數,用關鍵字新建一個對象的時候,這個函數內部的以及原型鏈上的都會指向這個新建的對象。 this的五種不同情形 默認情況 在默認的,純粹的函數調用時,視作全局性調用,此時的this指向全局對象Global,在瀏覽器環境下,也即window對象。 ...
好久沒有更新了,最近學習的過程中一直在用聯想的思維來去看問題,javascript是一門非常靈活的語言,集合了好多語言的特性和多種編程模式,對于compose的實現,就有非常多的思路,每一種思路都有自己的特點,實現之后,有種殊途同歸的快感。下面就是我總結的實現compose函數的五種思路。 面向過程 函數組合(reduce) 函數交織(AOP編程) Promise(sequence) Gener...
摘要:在中由于業務的需要我們往往要在諸多的頁面間,組件之間做一些參數的傳遞與管理在這里我總結了幾大經過驗證,穩定好用的方式給大家導航傳值推薦指數適用范圍相鄰頁面間傳值兼容性原理為頁面的上掛載了對象可用來做路由跳轉,在做頁面跳轉時可以攜帶參數回調方 在React Native 中由于業務的需要, 我們往往要在諸多的頁面間,組件之間做一些參數的傳遞與管理, 在這里我總結了幾大經過驗證,穩定好用的...
摘要:假設高度已知,請寫出三欄布局,其中左欄右欄各為,中間自適應的五種方法頁面布局題目假設高度已知,請寫出三欄布局,其中左欄右欄各為,中間自適應浮動解決方案浮動解決方案這是三欄布局的中間部分這是三欄布局的中間部分絕 假設高度已知,請寫出三欄布局,其中左欄、右欄各為300px,中間自適應的五種方法 HTML CSS 頁面布局 題目:假設高度已知,請寫出三欄布局,其中左欄、右欄各為300px...
閱讀 3720·2023-04-25 22:43
閱讀 3721·2021-09-06 15:15
閱讀 1337·2019-08-30 15:54
閱讀 3565·2019-08-30 14:20
閱讀 2889·2019-08-29 17:16
閱讀 3122·2019-08-29 15:28
閱讀 3401·2019-08-29 11:08
閱讀 1077·2019-08-28 18:05