從use strict看JS（一）：this與箭頭函數(shù)

darcrand 發(fā)布于2019-08-20 15:33 / 1425人閱讀

摘要：其次，指向有一個(gè)好處，構(gòu)造函數(shù)一般不要直接運(yùn)行，那要是強(qiáng)行運(yùn)行呢指向會(huì)給添加許多屬性，有擾亂命名空間之嫌，指向之后，你強(qiáng)行運(yùn)行我就強(qiáng)行報(bào)錯(cuò)會(huì)給增加屬性，改成嚴(yán)格模式就會(huì)當(dāng)然，不能解決所有問(wèn)題，所以有了箭頭函數(shù)參考嚴(yán)格模式詳解

上github看原文：點(diǎn)一下

系列

一日，見(jiàn)“use strict”，冥想許久……

系列列表：
從use strict看JS（一）：this與箭頭函數(shù)
從use strict看JS（二）：函數(shù)傳參模式與arguments

use strict

use strict指js的嚴(yán)格模式，還沒(méi)了解的看這里：Javascript 嚴(yán)格模式詳解

use strict有3點(diǎn)比較重要

函數(shù)調(diào)用this為undefined

arguments。不允許對(duì)arguments賦值。禁止使用arguments.callee。arguments不再追蹤參數(shù)的變化

不用var聲明不會(huì)提升成全局變量，而是報(bào)錯(cuò)

use strict還有一些常人不易寫(xiě)錯(cuò)的，不納入寫(xiě)作范圍：

對(duì)象不能有重名的屬性,函數(shù)不能有重名的參數(shù)

規(guī)定保留字。class, implements

回歸正題，什么是函數(shù)調(diào)用？為何嚴(yán)格模式函數(shù)調(diào)用要將this指向undefined？

this調(diào)用的四種模式

首先牢記：js function有四種方式調(diào)用，每一種的this都不同。

方法調(diào)用

當(dāng)函數(shù)被保存為對(duì)象的屬性時(shí)，我們稱(chēng)這個(gè)函數(shù)為方法。方法調(diào)用的this就綁定到該對(duì)象

    var dog={
        name:"doge",
        sayName:function(){
            console.log(this.name);
        }
    }
    //輸出doge，this綁定到了dog
    dog.sayName();

函數(shù)調(diào)用

聲明一個(gè)function然后調(diào)用。非嚴(yán)格模式this指向window，嚴(yán)格模式是undefined

    function sayName(){
        console.log(this);
    }
    function sayNameStrict(){
        "use strict";
        console.log(this);
    }
    //指向window
    sayName();
    //開(kāi)啟嚴(yán)格模式，指向undefined
    sayNameStrict();

構(gòu)造函數(shù)調(diào)用

這在對(duì)象、對(duì)象繼承用的比較多，通過(guò)new來(lái)使用，this指向new出來(lái)的新對(duì)象。
后面會(huì)有文章講解new如何實(shí)現(xiàn)，到時(shí)候就會(huì)很清楚。

    function Dog(name){
        this.name=name;
    }
    var dog=new Dog("doge");
    //this指向dog
    console.log(dog.name);

apply & call & bind

這類(lèi)就是改變this，apply和call是很重要的，所以許多面試都會(huì)問(wèn)，之后的文章我們會(huì)看到它們的強(qiáng)大作用。

問(wèn)題：當(dāng)對(duì)象的方法返回了函數(shù)？

那就是函數(shù)調(diào)用了。這是js的一個(gè)設(shè)計(jì)錯(cuò)誤，this應(yīng)該綁定到外部函數(shù)的this變量，
這個(gè)錯(cuò)誤即是“函數(shù)調(diào)用”this綁定的錯(cuò)誤。嚴(yán)格模式規(guī)定，this不指向window了，但并沒(méi)有解決這個(gè)問(wèn)題，于是箭頭函數(shù)來(lái)了。

var dog={
    name:"doge",
    sayName:function(){
        return function(){
            console.log(this);
        }
    }
}
// 此時(shí)是函數(shù)調(diào)用，this指向window
dog.sayName()();

箭頭函數(shù)對(duì)this的改變

箭頭函數(shù)怎么解決這個(gè)問(wèn)題呢？其實(shí)用了閉包，改成下面這樣，babel啥的也是這樣做的。

var dog = {
    name: "doge",
    sayName: function sayName() {
        var _this = this;

        return function () {
            console.log(_this);
        };
    }
};

那如果嵌套了多層箭頭函數(shù)？對(duì)閉包來(lái)說(shuō)是一樣的

var dog={
        name:"doge",
        sayName:function(){
            return ()=>{
                return ()=>{
                    console.log(this);
                }
            }
        }
    }

相當(dāng)于

var dog = {
    name: "doge",
    sayName: function sayName() {
        var _this = this;
        return function () {
            return function () {
                console.log(_this);
            };
        };
    }
};

那如果函數(shù)的屬性就是箭頭函數(shù)？沒(méi)有這樣用的！你會(huì)拿到window

    var dog={
        name:"doge",
        sayName:()=>{
            console.log(this);
        }
    }
    // this指向window，因?yàn)榧^函數(shù)
    dog.sayName();

the good parts

這是一本書(shū)，文末有鏈接。

the good parts說(shuō)過(guò)：js語(yǔ)言有些地方設(shè)計(jì)得不好，于是后來(lái)的標(biāo)準(zhǔn)不斷地補(bǔ)坑。
the good parts又說(shuō)過(guò)：js 函數(shù)調(diào)用this綁定到window是一個(gè)設(shè)計(jì)錯(cuò)誤

等等，嚴(yán)格模式函數(shù)調(diào)用this為何指向undefined？？

首先，不該指向window，所以換一個(gè)。

其次，指向undefined有一個(gè)好處，構(gòu)造函數(shù)一般不要直接運(yùn)行，那要是強(qiáng)行運(yùn)行呢？this指向window會(huì)給window添加許多屬性，有擾亂命名空間之嫌，指向undefined之后，你強(qiáng)行運(yùn)行我就強(qiáng)行報(bào)錯(cuò)！

function Dog(name){

 this.name=name;

}
//會(huì)給window增加name屬性，改成嚴(yán)格模式就會(huì)TypeError
Dog("doge");

當(dāng)然，use strict不能解決所有問(wèn)題，所以有了箭頭函數(shù)

參考

Javascript 嚴(yán)格模式詳解
the good parts

GPU云服務(wù)器云服務(wù)器 use-strict js中的this與html 箭頭函數(shù) 讓js函數(shù)只執(zhí)行一次

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

darcrand

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

【Python】2500塊的外包項(xiàng)目，一款加密的直播引流軟件，逆向JavaScript，保姆級(jí)實(shí)戰(zhàn)教

閱讀 1383·2021-09-04 16:40
#活動(dòng)#無(wú)憂云：雅安機(jī)房，100G高防，無(wú)視CC攻擊，73折優(yōu)惠中，月付88元起

閱讀 3500·2021-07-28 00:13
小程序轉(zhuǎn)換工具

閱讀 2926·2019-08-30 11:19
flexbox 伸縮布局

閱讀 2655·2019-08-29 12:29
前端開(kāi)發(fā)中像素的概念

閱讀 3207·2019-08-29 12:24
《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法》筆記——第6章集合

閱讀 1159·2019-08-26 13:28
實(shí)現(xiàn)一個(gè)簡(jiǎn)易的webpack

閱讀 2438·2019-08-26 12:01
javascript --- 數(shù)據(jù)類(lèi)型

閱讀 3491·2019-08-26 11:35

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

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

從use strict看JS（一）：this與箭頭函數(shù)

相關(guān)文章

**JS 中 this 在各個(gè)場(chǎng)景下的指向**

es6之箭頭函數(shù)

**從use strict看JS（二）：函數(shù)傳參模式與arguments**

**js里this的幾種用法**

**js中this的“終極三問(wèn)”**

發(fā)表評(píng)論

0條評(píng)論

darcrand

男|高級(jí)講師

TA的文章

【Python】2500塊的外包項(xiàng)目，一款加密的直播引流軟件，逆向JavaScript，保姆級(jí)實(shí)戰(zhàn)教

#活動(dòng)#無(wú)憂云：雅安機(jī)房，100G高防，無(wú)視CC攻擊，73折優(yōu)惠中，月付88元起

小程序轉(zhuǎn)換工具

flexbox 伸縮布局

前端開(kāi)發(fā)中像素的概念

《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法》筆記——第6章集合

實(shí)現(xiàn)一個(gè)簡(jiǎn)易的webpack

javascript --- 數(shù)據(jù)類(lèi)型

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

從use strict看JS（一）：this與箭頭函數(shù)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！