普通函数和箭头函数

tolerious 发布于2019-08-23 16:50 / 1471人阅读

摘要：我常常的使用箭头函数，却还没有对箭头函数有个深入的了解，现在找一下这个函数的不同点箭头函数本身没有原型由于箭头函数没有原型，因此箭头函数本身没有箭头函数的指向在定义的时候继承自外层第一个普通函数的的指向的指向的指向的指向从上面例子中可以得出

我常常的使用箭头函数，却还没有对箭头函数有个深入的了解，现在找一下这2个函数的不同点

1. 箭头函数本身没有prototype(原型)

由于箭头函数没有原型，因此箭头函数本身没有this

let a = () => {}
console.log(a.prototype) // undefined
let b = function () {}
console.log(b.prototype) // Object

2. 箭头函数的this指向在定义的时候继承自外层第一个普通函数的this

let a;
let barObj = {
    msg: "bar的this指向"
}
let fooObj = {
    msg: "foo的this指向"
}
bar.call(barObj)
foo.call(fooObj) // { msg: "bar的this指向"  }
bar.call(fooObj)
a() // { msg: "foo的this指向" }

function foo() {
    a()
}
function bar () {
    a = () => {
        console.log(this)
    }
}

从上面例子中可以得出2点：

箭头函数的this指向定义时所在的外层第一个普通函数，跟使用位置没有没有关系

被继承的普通函数的this指向改变，箭头函数的this也会跟着改变。

不能直接修改箭头函数的this

可以通过修改被继承的普通函数的this指向，然后箭头函数的this也会跟着改变

3. 箭头函数使用arguments

let b = () => {
        console.log(arguments);
    }
    b(1,2,3,4) // arguments is not defined

    function bar () {
        console.log(arguments);  // 完成第二个普通函数
        bb("完成第一个普通函数")
        function bb() {
            console.log(arguments); // 完成第一个普通函数
            let a = () => {
                console.log(arguments); // 完成第一个普通函数
            }
            a("箭头函数")
        }
    }
    bar("完成第二个普通函数")

从上面可以得出以下2点

箭头函数指向window时，arguments会报未定义的错误

如果不是window,那么就是外层第一个普通函数的arguments

4. 箭头函数不可以使用new

无论箭头函数的this指向哪里，使用new调用箭头函数都会报错，箭头函数没有构造函数

let a = () => {}
    let b = new a() // a is not a constructor

混合云私有云箭头函数存储过程和函数的区别 php数组和函数参数 php中函数和参数

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

转载请注明本文地址：https://www.ucloud.cn/yun/103377.html

论普通函数和箭头函数的区别以及箭头函数的注意事项、不适用场景

摘要：第二种情况是箭头函数的如果指向普通函数它的继承于该普通函数。箭头函数的指向全局，使用会报未声明的错误。 showImg(https://segmentfault.com/img/remote/1460000018610072?w=600&h=400); 箭头函数是ES6的API，相信很多人都知道，因为其语法上相对于普通函数更简洁，深受大家的喜爱。就是这种我们日常开发中一直在使用的API...

paulquei 2019-08-23 16:15 评论0 收藏0
ES6精解：箭头函数

摘要：基本用法在中允许使用来定义函数，如下就等同于从上面可以看出，在箭头左侧的是代表参数，若参数只有一个，可以省略，箭头右侧的表示函数代码块，若代码块里面是个返回值，则可以省略不写无参数情况若箭头函数不需要参数，则左侧用代替，如下无参数情况无参数基本用法在ES6中允许使用 => 来定义函数，如下： var f = a => a; console.log(f(1)); //1 就...

HackerShell 2019-08-22 18:18 评论0 收藏0
es6 - 箭头函数

摘要：也就是说箭头函数的的值不再根据调用时上下文确定，而是像普通变量那样根据定义时的作用域链进行查找。箭头函数中的依然要根据定义时的作用域链进行查找。知乎这篇文章对箭头函数的一些不适合的场景进行了总结，可以作为参考。 es6 - 箭头函数哇，箭头函数...，听起来好NB，但是如果你知道它是因为使用了=>这样类似箭头的符号，所以才叫箭头函数。瞬间感觉：呵，这名字起的...。 es6增加了...

13651657101 2019-08-26 11:46 评论0 收藏0
箭头函数与普通函数的区别及示例

摘要：箭头函数是前端面试环节的一个高频考点，一般会问箭头函数的是指如何用普通函数实现一个箭头函数箭头函数有哪些优点带着这些问题，小编带各位上路吧箭头函数与普通函数得区别普通函数函数作为全局函数被调用时，指向全局对象函数作为对象中的方法被调用时，指箭头函数是前端面试环节的一个高频考点，一般会问 1、箭头函数的this是指？2、如何用普通函数实现一个箭头函数3、箭头函数有哪些优点带着这些问题...

Backache 2019-08-26 10:12 评论0 收藏0
ES6 - 箭头函数、箭头函数与普通函数的区别总结

摘要：但是因为箭头函数没有自己的，它的其实是继承了外层执行环境中的，且指向永远不会随在哪里调用被谁调用而改变，所以箭头函数不能作为构造函数使用，或者说构造函数不能定义成箭头函数，否则用调用时会报错报错箭头函数没有自己的箭头函数没有自己的对象。这篇文章我们来了解一下ES6中的箭头函数。首先会介绍一下箭头函数的基本语法，因为基本语法比较好理解，我们用示例做简单介绍即可。之后，我们重点来讨论一下...

scola666 2019-08-23 16:32 评论0 收藏0