从use strict看JS(一):this与箭头函数

reclay

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

阅读 3.5k

前端记录
css、bootstrap、js、vue、angular、ionic
195 声望
3 粉丝
0 条评论
195 声望
3 粉丝
文章目录
宣传栏