箭头函数和普通函数的区别

5人阅读 评论(0) 收藏 举报
分类:

面试时被问到箭头函数和普通函数的区别。。。

-_-||

举个例子:

[javascript] view plain copy
  1. function make () {  
  2.   return ()=>{  
  3.     console.log(this);  
  4.   }  
  5. }  
  6. var testFunc = make.call({ name:'foo' });  
  7. testFunc();   
  8. testFunc.call({ name:'bar' });   
[javascript] view plain copy
  1. Object {name: "foo"}  
  2. Object {name: "foo"}  
可以看到箭头函数在定义之后,this 就不会发生改变了,无论用什么样的方式调用它,this 都不会改变;

原因:箭头函数不会自动绑定局部变量,如this,arguments,super(ES6),new.target(ES6)等

所以箭头函数没有它自己的this值,箭头函数内的this值继承自外围作用域。在箭头函数中调用 this 时,仅仅是简单的沿着作用域链向上寻找,找到最近的一个 this 拿来使用

[javascript] view plain copy
  1. {  
  2.       ...  
  3.       addAll: function addAll(pieces) {  
  4.         var self = this;  
  5.         _.each(pieces, function (piece) {  
  6.           self.add(piece);  
  7.         });  
  8.       },  
  9.       ...  
  10.     }  
在这里,你希望在内层函数里写的是this.add(piece),不幸的是,内层函数并未从外层函数继承this的值。在内层函数里,this会是window或undefined,临时变量self用来将外部的this值导入内部函数。(另一种方式是在内部函数上执行.bind(this),两种方法都不甚美观。)这时候就可以使用箭头函数来达到要求.

查看评论

ES6的箭头函数this和普通函数的this区别

普通函数中,内层函数不能从外层函数中继承this的值,在内层函数中,this会是window或者undefined,临时变量self用来将外部的this值导入到内部函数中(另外的方式是在内部函数执行....
  • xiaoqingpang
  • xiaoqingpang
  • 2017-12-26 15:44:01
  • 662

箭头函数和非箭头函数的区别

1.提高开发效率,减少体力劳动 2.在函数内部不需要自己的 this 指针的时候,非常方便,因为箭头函数作用域内没有 this 3.还有一点是 箭头函数没有 arguments 变量,在某些时候也...
  • zhaoming6163433
  • zhaoming6163433
  • 2017-02-07 15:44:26
  • 2436

前端-浅谈箭头函数的this和普通函数的this

说起胖函数的this指向这个坑我是踩了很多遍啊, 说起this,我相信只要是做编程写代码的对this一定都有了解。我现在和大家说说JavaScript的胖函数的this指向和es5普通函数的this指...
  • qq_38830670
  • qq_38830670
  • 2017-08-07 09:45:04
  • 304

ES6---箭头函数与function定义函数有什么区别?在箭头函数中,this指向,构造函数,变量提升是如何表现的?

简洁 ///function定义函数 function aaa(a,b){ return a+b; }///箭头函数定义函数 var aaa=(a,b)=>{return a+b;} this...
  • Wbiokr
  • Wbiokr
  • 2017-07-20 20:27:30
  • 2519

普通函数与箭头函数的this

普通函数: this指向函数调用时的对象; function foo() { return function() { ...
  • memgke
  • memgke
  • 2018-02-03 14:59:35
  • 38

初步探究ES6之箭头函数

今天要介绍的是ES6中的箭头函数。语法我们先来看看箭头函数的语法:([param] [, param]) => { statements }param => expression param 是...
  • mevicky
  • mevicky
  • 2015-11-20 09:16:58
  • 20756

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

普通函数中的this:    1. this总是代表它的直接调用者, 例如 obj.func ,那么func中的this就是obj    2.在默认情况(非严格模式下,未使用 'use strict'...
  • qq_36709020
  • qq_36709020
  • 2018-04-19 12:12:33
  • 27

setTimeout中this的指向,使用箭头函数后this的指向

示例1: function foo(){ setTimeout(function(){ console.log(this); },100); } var obj...
  • ForMyQianDuan
  • ForMyQianDuan
  • 2017-09-25 12:13:38
  • 784

深入理解ES6箭头函数的this以及各类this面试题总结

ES6中新增了箭头函数这种语法,箭头函数以其简洁性和方便获取this的特性,俘获了大批粉丝儿它也可能是面试中的宠儿, 我们关键要搞清楚 箭头函数和普通函数中的this一针见血式总结:普通函数中的thi...
  • yangbingbinga
  • yangbingbinga
  • 2017-03-11 19:16:05
  • 24504

inline函数与普通函数的区别

inline函数与普通函数的区别举例以下例子均是在比较老的gcc中比较普遍的例子,只是方便理解,实际上gcc等编译器现在已经能够识别部分短小函数自动将其变为内联函数。普通函数int g(int x) ...
  • qq_15437667
  • qq_15437667
  • 2016-01-07 00:35:39
  • 1851
    个人资料
    持之以恒
    等级:
    访问量: 6万+
    积分: 1034
    排名: 4万+
    最新评论