ES6箭头函数总结
1. 箭头函数基本形式
let func = (num) => num;
let func = () => num;
let sum = (num1,num2) => num1 + num2;
[1,2,3].map(x => x * x);
2. 箭头函数基本特点
(1). 箭头函数this为父作用域的this,不是调用时的this
箭头函数的this永远指向其父作用域,任何方法都改变不了,包括call,apply,bind。
普通函数的this指向调用它的那个对象。
let person = {
name:'jike',
init:function(){
//为body添加一个点击事件,看看这个点击后的this属性有什么不同
document.body.onclick = ()=>{
alert(this.name);//?? this在浏览器默认是调用时的对象,可变的?
}
}
}
person.init();
上例中,init是function,以person.init调用,其内部this就是person本身,而onclick回调是箭头函数,
其内部的this,就是父作用域的this,就是person,能得到name。
let person = {
name:'jike',
init:()=>{
//为body添加一个点击事件,看看这个点击后的this属性有什么不同
document.body.onclick = ()=>{
alert(this.name);//?? this在浏览器默认是调用时的对象,可变的?
}
}
}
person.init();
上例中,init为箭头函数,其内部的this为全局window,onclick的this也就是init函数的this,也是window,
得到的this.name就为undefined。
此例子中两个this均指向obj
(2). 箭头函数不能作为构造函数,不能使用new
//构造函数如下:
function Person(p){
this.name = p.name;
}
//如果用箭头函数作为构造函数,则如下
var Person = (p) => {
this.name = p.name;
}
由于this必须是对象实例,而箭头函数是没有实例的,此处的this指向别处,不能产生person实例,自相矛盾。