从use strict看JS（一）：this与箭头函数

darcrand 发布于2019-08-20 15:33 / 1359人阅读

摘要：其次，指向有一个好处，构造函数一般不要直接运行，那要是强行运行呢指向会给添加许多属性，有扰乱命名空间之嫌，指向之后，你强行运行我就强行报错会给增加属性，改成严格模式就会当然，不能解决所有问题，所以有了箭头函数参考严格模式详解

上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函数只执行一次

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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