成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

this的五種指法

Caizhenhao / 1413人閱讀

摘要：中只有的作用域是動態(tài)作用域的五種綁定初學(xué)時，會想當(dāng)然認為遵循某一條規(guī)律，就像物理學(xué)那樣，然而并不是。的綁定分為五種情況，這五種情況之間毫無規(guī)律可言。以至指向更加撲朔迷離。

this 到底指向哪里 
以下如果沒提及，則為嚴格模式。

js中作用域有兩種:

詞法作用域

動態(tài)作用域

詞法作用域

詞法作用域指在書寫代碼時就被確定的作用域。
看如下代碼

    var value = 1;

    function foo() {
        console.log(value);
    }

    function bar() {
        var value = 2;
        foo();
    }

    bar();// 結(jié)果是1
動態(tài)作用域

動態(tài)作用域指在代碼運行時才被確定的作用域。
js中只有this的作用域是動態(tài)作用域

this的五種綁定

初學(xué)js時，會想當(dāng)然認為this遵循某一條規(guī)律，就像物理學(xué)那樣，然而并不是。
this的綁定分為五種情況，這五種情況之間毫無規(guī)律可言。不過好在都很簡單。

一. 默認綁定

當(dāng)以如下形式執(zhí)行一個函數(shù)時，this為默認綁定；

    func()

嚴格模式下，this為undefined

非嚴格模式下，this是全局對象。

與函數(shù)調(diào)用嵌套多少層如何嵌套無關(guān)

/* 全是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()
二. 隱式綁定

當(dāng)以如下行駛執(zhí)行一個函數(shù)時，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

函數(shù)被賦值成方法

function printThis(){
    return this
}
var obj = {};
obj.say = printThis;
obj.say()/* 指向obj */

賦值給參數(shù)

極為常見的是回調(diào)函數(shù)的this是undefined，因為回調(diào)函數(shù)被復(fù)制給參數(shù)，參數(shù)再調(diào)用時變成了默認綁定

function asyncFun(cb){
    cb()
}
var obj = {
    callback(){
        console.log(this)
    }
}
obj.callback()/*隱式綁定 obj */
asyncFun(obj.callback);/*默認綁定 undefined */
三. 箭頭函數(shù)

箭頭函數(shù)會讓this指向最近的函數(shù)或全局作用域

與最近的函數(shù)的this指向相同

    function foo() {
        // 返回一個箭頭函數(shù)
        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 */

指向?qū)嵗?/p> 

class Test {
    printThis = ()=>{
        return this
    }
}
//會被babel翻譯成
var test = function test() {
  var _this = this;

  this.printThis = function () {
    return _this;
  };
};
四. 顯示綁定

call, apply, bind指定this指向

五. new綁定 
構(gòu)造函數(shù)，ES6中的class
new構(gòu)造函數(shù)，new class時，this指向?qū)嵗?/pre>
總結(jié)


五種綁定，后面兩種情況單一，前面兩種會因為方法，函數(shù)被賦值而互相轉(zhuǎn)化。


因為this處于動態(tài)作用域，而目前開發(fā)時又大量使用框架。我們寫下的代碼，并不總是由我們自己調(diào)用，而是被打包工具打包后，由框架調(diào)用。導(dǎo)致我們并不知道我們寫下的函數(shù)和方法是否被框架復(fù)制過或顯示綁定過而改變了this指向。以至this指向更加撲朔迷離。


寫完本文頓時覺得，python里指向明確的self完爆js的this。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100616.html

相關(guān)文章

  • this的五種不同情形

    摘要：的五種不同情形默認情況在默認的，純粹的函數(shù)調(diào)用時，視作全局性調(diào)用，此時的指向全局對象，在瀏覽器環(huán)境下，也即對象。構(gòu)造函數(shù)當(dāng)一個函數(shù)被當(dāng)做構(gòu)造函數(shù)，用關(guān)鍵字新建一個對象的時候，這個函數(shù)內(nèi)部的以及原型鏈上的都會指向這個新建的對象。 this的五種不同情形 默認情況 在默認的，純粹的函數(shù)調(diào)用時，視作全局性調(diào)用，此時的this指向全局對象Global，在瀏覽器環(huán)境下，也即window對象。 ...

    Hydrogen 評論0 收藏0

  • 實現(xiàn)compose的五種思路

    好久沒有更新了，最近學(xué)習(xí)的過程中一直在用聯(lián)想的思維來去看問題，javascript是一門非常靈活的語言，集合了好多語言的特性和多種編程模式，對于compose的實現(xiàn)，就有非常多的思路，每一種思路都有自己的特點，實現(xiàn)之后，有種殊途同歸的快感。下面就是我總結(jié)的實現(xiàn)compose函數(shù)的五種思路。 面向過程 函數(shù)組合（reduce） 函數(shù)交織（AOP編程） Promise（sequence） Gener...

    RayKr 評論0 收藏0

  • React Native 傳參的五種方式

    摘要：在中由于業(yè)務(wù)的需要我們往往要在諸多的頁面間，組件之間做一些參數(shù)的傳遞與管理在這里我總結(jié)了幾大經(jīng)過驗證，穩(wěn)定好用的方式給大家導(dǎo)航傳值推薦指數(shù)適用范圍相鄰頁面間傳值兼容性原理為頁面的上掛載了對象可用來做路由跳轉(zhuǎn)，在做頁面跳轉(zhuǎn)時可以攜帶參數(shù)回調(diào)方 在React Native 中由于業(yè)務(wù)的需要, 我們往往要在諸多的頁面間，組件之間做一些參數(shù)的傳遞與管理, 在這里我總結(jié)了幾大經(jīng)過驗證，穩(wěn)定好用的...

    cnTomato 評論0 收藏0

  • 假設(shè)高度已知，請寫出三欄布局，其中左欄、右欄各為300px，中間自適應(yīng)的五種方法

    摘要：假設(shè)高度已知，請寫出三欄布局，其中左欄右欄各為，中間自適應(yīng)的五種方法頁面布局題目假設(shè)高度已知，請寫出三欄布局，其中左欄右欄各為，中間自適應(yīng)浮動解決方案浮動解決方案這是三欄布局的中間部分這是三欄布局的中間部分絕 假設(shè)高度已知，請寫出三欄布局，其中左欄、右欄各為300px，中間自適應(yīng)的五種方法 HTML CSS 頁面布局 題目：假設(shè)高度已知，請寫出三欄布局，其中左欄、右欄各為300px...

    alaege 評論0 收藏0

發(fā)表評論

0條評論

Caizhenhao

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<