亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

this的五種指法

Caizhenhao / 1456人閱讀

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

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

js中作用域有兩種:

詞法作用域

動(dòng)態(tài)作用域

詞法作用域

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

    var value = 1;

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

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

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

動(dòng)態(tài)作用域指在代碼運(yùn)行時(shí)才被確定的作用域。
js中只有this的作用域是動(dòng)態(tài)作用域

this的五種綁定

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

一. 默認(rèn)綁定

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

    func()

嚴(yán)格模式下，this為undefined

非嚴(yán)格模式下，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í)行一個(gè)函數(shù)時(shí)，this為隱式綁定；

a.b.func()

此時(shí)this指向點(diǎn)前面一個(gè)對象

賦值會(huì)改變隱式綁定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，因?yàn)榛卣{(diào)函數(shù)被復(fù)制給參數(shù)，參數(shù)再調(diào)用時(shí)變成了默認(rèn)綁定

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

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

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

    function foo() {
        // 返回一個(gè)箭頭函數(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,嚴(yán)格模式下報(bào)錯(cuò) */

指向全局

var printThis = ()=>this;
console.log("printThis",printThis());/* global */

指向?qū)嵗?/p> 

class Test {
    printThis = ()=>{
        return this
    }
}
//會(huì)被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時(shí)，this指向?qū)嵗?/pre>
總結(jié)


五種綁定，后面兩種情況單一，前面兩種會(huì)因?yàn)榉椒?，函?shù)被賦值而互相轉(zhuǎn)化。


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


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

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

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

相關(guān)文章

  • this的五種不同情形

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

    Hydrogen 評論0 收藏0

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

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

    RayKr 評論0 收藏0

  • React Native 傳參的五種方式

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

    cnTomato 評論0 收藏0

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

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

    alaege 評論0 收藏0

發(fā)表評論

0條評論

Caizhenhao

男|高級講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<