一.箭头函数的实质
1.this.为外层的函数作用域来决定(箭头函数的作用域是父级的作用域,而不是父级)
function foo(){
log(this)
return (a) =>{
log(this.a)
}
}
var obj1 = {a:2};
var obj2 = {a:3};
var bar = foo.call(obj1);
bar.call(obj2)//输出还是2
const person = {
eat(){
log(this);
},
drink:()=>{
log(this);
}
}
person.eat();{eat:f,drink:f}
person.drink();Window{...}
二.使用场景
(1).事件绑定
...
bindEvent(){
this.button.addEventListener('click',(e) => this.clickBtn(e),false)
}
...
(2).嵌套
function foo(){
return () =>{
return ()=>{
return ()=>{
console.log('id',this.id)
}
}
}
}
var f = foo.call({id: 1});
var f1 = f.call({id:2})()(); id1
var f2 = f().call({id:3})(); id1
var f3 = f()().call({id:4}); id1
(3).arguments坑
function foo(){
setTimeout(()=>{
log(arguments);//1234567
})
}
foo(1,2,3,4,5,6,7)//这里拿的是父级的arg
(4).闭包Closure
(5).链式调用
function insert(value){
return{
into:function(array){
return{
after:function(afterValue){
arr.splice(array.indexOf(afterValue)+1,0,value);
return array;
}
}
}
}
}
log(insert(5).into([1,2,3,4,6,7,8]).after(4));//12345678
es6
let insert = (value) =>({
into:(array) =>({
after:(afterValue)=>{
array.splice(array.indexOf(afterValue)+1,0,value)
return array;
}
})
})