從use strict看JS（一）：this與箭頭函數

darcrand 發布于2019-08-20 15:33 / 1387人閱讀

摘要：其次，指向有一個好處，構造函數一般不要直接運行，那要是強行運行呢指向會給添加許多屬性，有擾亂命名空間之嫌，指向之后，你強行運行我就強行報錯會給增加屬性，改成嚴格模式就會當然，不能解決所有問題，所以有了箭頭函數參考嚴格模式詳解

上github看原文：點一下

系列

一日，見“use strict”，冥想許久……

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

use strict

use strict指js的嚴格模式，還沒了解的看這里：Javascript 嚴格模式詳解

use strict有3點比較重要

函數調用this為undefined

arguments。不允許對arguments賦值。禁止使用arguments.callee。arguments不再追蹤參數的變化

不用var聲明不會提升成全局變量，而是報錯

use strict還有一些常人不易寫錯的，不納入寫作范圍：

對象不能有重名的屬性,函數不能有重名的參數

規定保留字。class, implements

回歸正題，什么是函數調用？為何嚴格模式函數調用要將this指向undefined？

this調用的四種模式

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

方法調用

當函數被保存為對象的屬性時，我們稱這個函數為方法。方法調用的this就綁定到該對象

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

函數調用

聲明一個function然后調用。非嚴格模式this指向window，嚴格模式是undefined

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

構造函數調用

這在對象、對象繼承用的比較多，通過new來使用，this指向new出來的新對象。
后面會有文章講解new如何實現，到時候就會很清楚。

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

apply & call & bind

這類就是改變this，apply和call是很重要的，所以許多面試都會問，之后的文章我們會看到它們的強大作用。

問題：當對象的方法返回了函數？

那就是函數調用了。這是js的一個設計錯誤，this應該綁定到外部函數的this變量，
這個錯誤即是“函數調用”this綁定的錯誤。嚴格模式規定，this不指向window了，但并沒有解決這個問題，于是箭頭函數來了。

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

箭頭函數對this的改變

箭頭函數怎么解決這個問題呢？其實用了閉包，改成下面這樣，babel啥的也是這樣做的。

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

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

那如果嵌套了多層箭頭函數？對閉包來說是一樣的

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

相當于

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

那如果函數的屬性就是箭頭函數？沒有這樣用的！你會拿到window

    var dog={
        name:"doge",
        sayName:()=>{
            console.log(this);
        }
    }
    // this指向window，因為箭頭函數
    dog.sayName();

the good parts

這是一本書，文末有鏈接。

the good parts說過：js語言有些地方設計得不好，于是后來的標準不斷地補坑。
the good parts又說過：js 函數調用this綁定到window是一個設計錯誤

等等，嚴格模式函數調用this為何指向undefined？？

首先，不該指向window，所以換一個。

其次，指向undefined有一個好處，構造函數一般不要直接運行，那要是強行運行呢？this指向window會給window添加許多屬性，有擾亂命名空間之嫌，指向undefined之后，你強行運行我就強行報錯！

function Dog(name){

 this.name=name;

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

當然，use strict不能解決所有問題，所以有了箭頭函數

參考

Javascript 嚴格模式詳解
the good parts

GPU云服務器云服務器 use-strict js中的this與html 箭頭函數讓js函數只執行一次

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82336.html

JS 中 this 在各個場景下的指向

摘要：聲明了一個函數，并且將它作為一個構造函數調用構造函數調用構造函數調用是函數的構造函數調用。構造函數中的在構造函數調用中指向新創建的對象構造函數調用的上下文是新創建的對象。來看看下面示例中的上下文正在進行構造函數調用，其中上下文是。為了保證的可讀性，本文采用意譯而非直譯。想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！ 1. this 的奧秘很多時候, JS 中...

WrBug 2019-08-26 10:44 評論0 收藏0
es6之箭頭函數

摘要：箭頭函數沒有綁定，意味著箭頭函數內部的值只能通過查找作用域鏈來確定。無論此后箭頭函數在何處執行，該對象都是可用的。箭頭函數 es6的箭頭函數，顧名思義箭頭函數是使用一個箭頭( => )來定義的函數,這很容易理解但是它有很多行為與傳統的js函數不同: 沒有 this 、 super 、 arguments 。不能被使用 new 調用：箭頭函數沒有 [[Construct]] 方法...

songjz 2019-08-26 13:40 評論0 收藏0
從use strict看JS（二）：函數傳參模式與arguments

摘要：系列系列列表從看一與箭頭函數從看二函數傳參模式與的上一篇說到，對做了以下限定。是另外一個變量，指向不同的值，而這兩個值有相同的類型。函數中，和指向同一個值，更改的就等于更改了的。可以用改進問題是這個在嚴格模式下不能運行。系列系列列表：從use strict看JS（一）：this與箭頭函數從use strict看JS（二）：函數傳參模式與arguments use strict 的 ...

kycool 2019-08-20 15:45 評論0 收藏0
js里this的幾種用法

摘要：的幾種用法關于是什么理論上是執行上下文的一個屬性，的值在進入到執行上下文的時候就已經確定了，且不會再改變。默認綁定這種情況下，不屬于任何一個函數方法內，即在全局作用域下，這種情況下稱為默認綁定。最后的總結用偽代碼的形式來表示例外例外本文參考 this的幾種用法關于this this是什么？理論上this是執行上下文的一個屬性，this的值在進入到執行上下文的時候就已經確定了，且不會...

melody_lql 2019-08-20 15:37 評論0 收藏0
js中this的“終極三問”

摘要：是什么本質是一個綁定，在函數被調用時建立。它的指向是完全由函數被調用的調用點來決定的。因為函數的調用點在全局作用域，所以指向全局變量這里就是函數的調用點存在的意義在函數體內部指代函數當前的運行環境。從而實現干凈的設計和更容易的復用。 this是什么？ this 本質是一個綁定，在函數被調用時建立。它的指向是完全由函數被調用的調用點來決定的。 function baz() { ...

silvertheo 2019-08-26 13:38 評論0 收藏0