箭头函数与普通函数的区别及示例

Backache 发布于2019-08-26 10:12 / 1167人阅读

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

箭头函数是前端面试环节的一个高频考点，一般会问

1、箭头函数的this是指？
2、如何用普通函数实现一个箭头函数
3、箭头函数有哪些优点

带着这些问题，小编带各位上路吧

箭头函数与普通函数得区别

普通函数：
1、函数作为全局函数被调用时，this指向全局对象
2、函数作为对象中的方法被调用时，this指向该对象
3、函数作为构造函数的时候，this指向构造函数new出来的新对象

箭头函数
1、箭头函数没有this，函数内部的this来自于父级最近的非箭头函数，并且不能改变this的指向

其他补充

普通函数还可以通过bind改变this的指向

箭头函数示例

1.this指向

 var a = "全局变量a";
    var obj={
        a:"局部变量a",
        fn1:function(){
            console.log(this.a);
        },
        fn2:()=>{
            console.log(this.a);
        }
    }
    obj.fn1();
    obj.fn2();

输出结果为：

局部变量a
全局变量a

普通函数的this我们知道是指向最近的一个对象，而箭头函数的this实际上是指向定义时的this，比如把上面代码改为：

 var obj={
        a:"局部变量a",
        fn1:function(){
            console.log(this.a);
        },
        fn2:()=>{
            console.log(this.a);
        }
    }
    obj.fn1();
    obj.fn2();

输出结果为：

局部变量a
undefined

此时因为箭头函数是指向全局的，全局没有变量a则输出undefined,这里的fn1和fn2都是全局函数，所以箭头函数this指向的是定义时的全局，而普通函数的this指向的是最近的一个对象

GPU云服务器云服务器箭头函数主机主机与普通主机的区别宽带专线与普通宽带的区别 vps主机与普通主机的区别

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

转载请注明本文地址：https://www.ucloud.cn/yun/105777.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中的箭头函数。首先会介绍一下箭头函数的基本语法，因为基本语法比较好理解，我们用示例做简单介绍即可。之后，我们重点来讨论一下...

scola666 2019-08-23 16:32 评论0 收藏0
字节跳动前端一面试题及答案

摘要：将构造函数的作用域赋值给新对象。也所以对象指向新对象执行构造函数内部的代码，将属性添加给中的对象。通常的解决方案是判断是否是构造函数的实例，若是则继续执行，若不是则进行的操作。代码如下在构造函数参数个数固定的情况下这种方案是可行的。首先，一般的都是介绍自己，主要是项目经历问题1：jQuery与Vue的区别是什么？ JQuery和Vue的主要区别是JQuery主要是通过选择器来选取D...

roundstones 2019-08-23 15:36 评论0 收藏0
带你入门 JavaScript ES6 (三)

摘要：上一章我们学习了遍历和扩展字符语法。本章我们主要学习中的箭头函数箭头函数更准确来说叫箭头函数表达式。箭头函数余普通函数功能相同，但语法差别比较大。带你入门 JavaScript ES6 (三) 本文同步带你入门 JavaScript ES6 (三)，转载请注明出处。上一章我们学习了 for of 遍历和扩展字符语法。本章我们主要学习 ES6 中的箭头函数箭头函数更准确来说叫箭...

刘福 2019-08-21 18:35 评论0 收藏0