一、this指向规则:
1、默认绑定
function foo(){
console.log(this);
}
2、隐式绑定:谁调用指向谁
var obj={
a:2,
foo:foo
}
obj.foo();
3、显示绑定:call、bind、apply
4、new
二、箭头函数:
var f=a=> a;
//等价下面的形式
var f=function(a){
return a;
}
1、参数部分的规则:
1、一个参数可以忽略圆括号;
2、如果没有参数,或者多参数,必须写上圆括号;
2、函数体部分的规则:
1、如果只有一条执行语句,可以省略花括号而且执行结果作为返回值;
2、如果多条执行语句必须加上花括号;
3、如果加上花括号,执行语句的结果就不会,隐式返回。
var f = (a,b) =>a+b;
console.log(f(3,2));//5
var f2 = (a,b) =>{a+b};
console.log(f2(3,2));//undefined
三、spread/rest 运算符 也叫拓展运算符(...)
1、通过数组收集不定参数
var f = (...args) => {
console.log(args); //[3,2]
};
console.log(f(3, 2));
注意:rest运算符作为形参,必须放在形参的最后,函数的length属性会忽略rest形参
2、展开数组
var f = (...arfs) => {
console.log(args); //[3,2]
};
console.log(f(...[3, 2]));
//等价console.log(f(3, 2));
3、对象合并/Object.assign,
var obj1={a:12};
var obj2={b:13};
console.log({...obj1,...obj2,c:'hello'});//{a:12,b:13,c:'hello'}
var obj3=Object.assign(obj1,obj2)
console.log(obj3===obj1)
注意点以上2个方法只能合并可能枚举的属性,以下的属性是合并不了的:
//enumerable,configurable、writable默认值为false
Object.defineProperty(obj2,'age',{
value:'18',
// enumerable:true
})
3、数组合并/数组concat的方法
var arr1=[1];
var arr2=[3]
console.log([...arr1,...arr2,4]);//[1,3,4]
var arr3=arr1.concat(arr2).concat([4])
四箭头函数的this指向:
1、根据箭头函数所在外层的作用域决定;
function foo(){
console.log(this);//obj1
return ()=>{
console.log(this.a);//2
}
}
var obj1={a:2}
var obj2={a:3}
var bar=foo.call(obj1)
bar.call(obj2)
var person={
eat:function(){
console.log(this);//person
},
drink:()=>{
console.log(this);//window
}
}
person.eat()//隐式转换函数内部的this指向
person.drink()//隐式转换函数内部的this指向失败
2、不能作为构造函数使用;
3、在generator函数中yield命令不生效;
4、没有argments对象,由于箭头函数不是有function关键字定义的
var f = (a, b) => {
console.log(arguments); //FeferenceError
};
console.log(f(3, 2));
案例1
function foo(){
console.log(this);
setTimeout(function(){
console.log(arguments.length);//0
console.log(this);//window
},1)
setTimeout(()=>{
console.log(arguments.length);//3
console.log(this);//obj
},1)
}
var obj={a:12}
foo.call(obj,4,5,6)
结论:箭头函数的内部没有argments和this。打印出来的结果是闭包产生的。
五箭头函数的使用场景:
1、函数的内部没有this的引用、简单的表达式函数。事件绑定,递归;
2、内层函数需要使用外层函数的this或者arguments。
setTimeout(() => {
console.log(arguments.length);
console.log(this);
}, 1)