中文字幕理论片,69视频免费在线观看,亚洲成人app,国产1级毛片,刘涛最大尺度戏视频,欧美亚洲美女视频,2021韩国美女仙女屋vip视频

打開APP
userphoto
未登錄

開通VIP，暢享免費電子書等14項超值服

開通VIP

首頁

好書

留言交流

下載APP

聯(lián)系客服
javascript 作用域和 this 關(guān)鍵字

在javascript中存在著this和scope兩個概念，如果不細心了解，還真搞不清楚這兩個概念，今天我們就來詳細了解一下this和scope的區(qū)別以及它們的作用，最后會附上code以加深理解。

一、作用域（scope）

所謂作用域就是：變量在聲明它們的函數(shù)體以及這個函數(shù)體嵌套的任意函數(shù)體內(nèi)都是有定義的。

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function scope(){
    var foo = "global";
    if(window.getComputedStyle){
        var a = "I'm if";
        console.log("if:"+foo); //if:global
    }
    while(1){
        var b = "I'm while";
        console.log("while:"+foo);//while:global
        break;
    }
    !function (){
        var c = "I'm function";
        console.log("function:"+foo);//function:global
    }();
    console.log(
         foo,//global
         a, // I'm if
         b, // I'm while
         c  // c is not defined
    );
}
scope();

（1）scope函數(shù)中定義的foo變量，除過自身可以訪問以外，還可以在if語句、while語句和內(nèi)嵌的匿名函數(shù)中訪問。 因此，foo的作用域就是scope函數(shù)體。

（2）在javascript中，if、while、for 等代碼塊不能形成獨立的作用域。因此，javascript中沒有塊級作用域，只有函數(shù)作用域。

 但是，在JS中有一種特殊情況：

 如果一個變量沒有使用var聲明，window便擁有了該屬性，因此這個變量的作用域不屬于某一個函數(shù)體,而是window對象。

JavaScript
1
2
3
4
5
6
function varscope(){
    foo = "I'm in function";
    console.log(foo);//I'm in function
}
varscope();
console.log(window.foo); //I'm in function

二、作用域鏈（scope chain）

     所謂作用域鏈就是：一個函數(shù)體中嵌套了多層函數(shù)體，并在不同的函數(shù)體中定義了同一變量， 當其中一個函數(shù)訪問這個變量時，便會形成一條作用域鏈（scope chain）。

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
foo = "window";
function first(){
    var foo = "first";
    function second(){
       var foo = "second";
       console.log(foo);
    }
    function third(){
       console.log(foo);
    }
    second(); //second
    third();  //first
}
first();

當執(zhí)行second時，JS引擎會將second的作用域放置鏈表的頭部，其次是first的作用域，最后是window對象，于是會形成如下作用域鏈：

second->first->window,  此時，JS引擎沿著該作用域鏈查找變量foo, 查到的是”second”

當執(zhí)行third時，third形成的作用域鏈：third->first->window, 因此查到的是：”frist”

特殊情況：with語句

JS中的with語句主要用來臨時擴展作用域鏈，將語句中的對象添加到作用域的頭部。with語句結(jié)束后，作用域鏈恢復(fù)正常。

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
foo = "window";
function first(){
    var foo = "first";
    function second(){
       var foo = "second";
       console.log(foo);
    }
    function third(obj){
       console.log(foo); //first
       with (obj){
           console.log(foo); //obj
       }
       console.log(foo); //first
    }
    var obj = {foo:'obj'};
    third(obj);
}
first();

在執(zhí)行third()時，傳遞了一個obj對象，obj中有屬性foo, 在執(zhí)行with語句時，JS引擎將obj放置在了原鏈表的頭部，于是形成的作用域鏈如下：

obj->third->first->window, 此時查找到的foo就是obj中的foo,因此輸出的是：”obj”, 而在with之前和之后，都是沿著原來的鏈表進行查找，從而說明，在with語句結(jié)束后，作用域鏈已恢復(fù)正常。

三、this 關(guān)鍵字

     在一個函數(shù)中，this總是指向當前函數(shù)的所有者對象，this總是在運行時才能確定其具體的指向, 也才能知道它的調(diào)用對象。

     這句話總結(jié)了關(guān)于this的一切，切記，切記，切記!（ps:重要的事情說三遍!）

JavaScript
1
2
3
4
5
6
7
8
window.name = "window";
function f(){
    console.log(this.name);
}
f();//window
var obj = {name:'obj'};
f.call(obj); //obj

在執(zhí)行f()時，此時f()的調(diào)用者是window對象，因此輸出”window”

f.call(obj) 是把f()放在obj對象上執(zhí)行，相當于obj.f(),此時f中的this就是obj,所以輸出的是”obj”

四、實戰(zhàn)應(yīng)用

code1：

JavaScript
1
2
3
4
5
6
7
8
9
10
11
var foo = "window";
var obj = {
    foo : "obj",
    getFoo : function(){
        return function(){
            return this.foo;
        };
    }
};
var f = obj.getFoo();
f(); //window

code2:

1
2
3
4
5
6
7
8
9
10
11
12
var foo = "window";
var obj = {
    foo : "obj",
    getFoo : function(){
        var that = this;
        return function(){
            return that.foo;
        };
    }
};
var f = obj.getFoo();
f(); //obj

code1和code2是對this和scope最好的總結(jié)，如果對于運行結(jié)果有疑惑，歡迎討論！

代碼解析：

1
2
3
4
5
6
7
8
9
10
11
12
13
code1:
執(zhí)行var  f = obj.getFoo()返回的是一個匿名函數(shù)，相當于:
var f = function(){
     return this.foo;
}
f() 相當于window.f(), 因此f中的this指向的是window對象，this.foo相當于window.foo, 所以f()返回"window"
code2:
執(zhí)行var f = obj.getFoo() 同樣返回匿名函數(shù)，即：
var f = function(){
     return that.foo;
}
唯一不同的是f中的this變成了that, 要知道that是哪個對象之前，先確定f的作用域鏈：f->getFoo->window 并在該鏈條上查找that,此時可以發(fā)現(xiàn)that指代的是getFoo中的this, getFoo中的this指向其運行時的調(diào)用者，從var f = obj.getFoo() 可知此時this指向的是obj對象，因此that.foo 就相當于obj.foo,所以f()返回"obj"
本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊舉報。
打開APP，閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
每個前端開發(fā)者必會的 20 個 JavaScript 面試題 – 碼農(nóng)網(wǎng)
徹底弄懂js中this指向（包含js綁定、優(yōu)先級、面試題詳解）
給 JavaScript 初心者的 ES2015 實戰(zhàn)
JavaScript 新手的踩坑日記
JavaScript 中 this 的使用技巧總結(jié)
談"this"
更多類似文章 >>
生活服務(wù)
熱點新聞
分享 收藏 導(dǎo)長圖 關(guān)注 下載文章
綁定賬號成功
后續(xù)可登錄賬號暢享VIP特權(quán)！
如果VIP功能使用有故障，
可點擊這里聯(lián)系客服！

聯(lián)系客服