普通函数和箭头函数
写在前面
函数(Function)
是 JavaScript
里的‘一等公民’。是由称为函数体的一系列语句组成。可以当做入参,出参(返回值)使用。和对象一样,有自己的属性和方法。区别之处在于可以被调用。数据类型是 function
(用 typeof
判断),用 Object.prototype.toString.call()
判断是 [object Function]
。如果没有使用 retrun
语句,则默认返回 undefined
。反之则函数必须使用 return
语句来指定一个要返回的值。(使用 new
关键字调用一个构造函数除外,不再是实例化一个对象)。函数执行时,this
关键字并不会指向正在运行的函数本身,而是指向调用该函数的对象。
函数表达式不会提升,因此在使用之前必须先声明。和用 var
声明变量不一样。
产生原因
箭头函数的产生原因就是在于 this
关键字指向问题。它很容易让人产生疑惑,尤其是当函数调用层级比较多的时候。和传统函数定义相比,语法也相对简洁。并且没有自己的this
,arguments
,super
或 new.target
。这些函数表达式更适用于那些本来需要匿名函数的地方,并且它们不能用作构造函数。箭头函数 this
指向的固定化,并不是因为函数内部做了处理,而是因为箭头函数在创建的时候根本就没有自己的 this
。
使用箭头函数需要注意的点
1,函数体内的 this
对象,是定义时所在对象,而不是调用该函数的对象。
2,正因为自己本身没有 this
对象,因此不可以用作构造函数,不能用 call()
,apply()
,bind()
这些方法去改变 this
的指向。
3,不绑定 arguments
对象,可以使用 rest
参数来解决。
4,严格模式(use strict
)中,指定的与 this
相关的规则都将被忽略。
var aaa = () => {
'use strict';
console.log(this);
// window
}
var bbb = function() {
'use strict';
console.log(this);
// undefined
}
5,不能使用 new 操作符,否则会报错
var Func = () => {};
var func = new Func();
// TypeError: Func is not a constructor
6,没有 prototype 属性
var Func = () => {};
console.log(Func.prototype);
// undefined
7,不能用作生成器。 yield 关键字通常不能在箭头函数中使用(除非是嵌套在允许使用的函数内)。
8,箭头函数的简写,可以直接省略 return,在块体中,必须使用明确的 return 语句。如果需要返回对象字面量的话,记得用圆括号包起来。
var func = () => ({num: 1});
写在后面
抛一个大佬留下的问题,有箭头函数的 IIEF
:
(() => {
console.log('执行看看');
// 执行看看
})();
这个是可以的,但是下面的写法就会报错
(() => {
console.log('执行看看');
// Uncaught SyntaxError: Unexpected token (
}());
有知道原因的小伙伴吗?
2018-07-18
补充一下几点:
1,在对象字面量上定义方法,会出现问题
如下代码执行:
var obj = {
i: 10,
b: () => console.log(this.i, this),
c: function() {
console.log( this.i, this)
},
d() {
console.log( this.i, this)
}
}
obj.b();
// undefined Window
obj.c();
// 10 obj对象
obj.d();
// 10 obj对象
obj.b 使用箭头函数来定义,但是调用 obj.b() 时出现了异常。因为当执行b的时候上下文仍然是window,这是因为箭头函数已经绑定了window做为上下文。
解决办法就是不要在对象的方法上使用箭头函数短语法,这样this关键字会在调用时决定,而不是早早绑定在闭合的上下文中。如 obj.d()
同样的规则也适用于给对象 prototype原型上定义方法,如
function Obj(name) {
this.objName = name;
}
Obj.prototype.getObjName = () => {
console.log(this === window);
// true
return this.objName;
}
var obj = new Obj('小红');
obj.getObjName();
// undefined
2,动态上下文中的回调函数
this是js中非常强大的特点,他让函数可以根据其调用方式动态的改变上下文,然后箭头函数直接在声明时就绑定了this对象,所以不再是动态的。
在客户端,在dom元素上绑定事件监听函数是非常普遍的行为,在dom事件被触发时,回调函数中的this指向该dom,可当我们使用箭头函数时:
button.addEventListener('click', () => {
console.log(this === window); // => true
this.innerHTML = 'Clicked button';
});
因为这个回调的箭头函数是在全局上下文中被定义的,所以他的this是window。所以当this是由目标对象决定时,我们应该使用函数表达式:
button.addEventListener('click', function() {
console.log(this === button); // => true
this.innerHTML = 'Clicked button';
});
以上补充的摘自:翻译 | ES6 箭头函数使用禁忌
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。