es6中的箭头函数
在es6中,为了更加快捷高效的编写,引入了箭头函数,用法与es5中的普通函数类似。不过有以下几点不同之处:
1.箭头函数没有arguments,使用…rest(剩余参数)来代替。
2.箭头函数不能new
3.箭头函数自身没有this,this是声明时作用域的this
我们通过以下的例子来了解以下箭头函数以及箭头函数中this的指向。
普通函数:
//声明一个函数
function fun(){
console.log("普通无参函数");
}
fun();
function fun1(a,b){
console.log(a,b,"普通有参函数");
}
fun(1,2);
箭头函数:
//声明箭头函数
let fn = ()=>{
console.log("无参箭头函数");
};
fn();
let fn1 = (a.b)=>{
console.log(a,b,"有参箭头函数");
}
fn1();
普通函数中的this
指向与箭头函数中的this
指向的区别:
//定义一个对象
let obj = {a:1,b:2};
//普通函数
function fun(){
function fun1(){
console.log(this,'普通函数内部普通函数this指向'); //window "普通函数外部普通函数this指向"
}
console.log(this,'普通函数外部普通函数this指向'); //{a: 1, b: 2} "普通函数内部普通函数this指向"
fun1();
}
fun.call(obj);
//箭头函数
function fn(){
let fn1 = ()=>{
console.log(this,'普通函数内部箭头函数this指向'); //{a: 1, b: 2} "普通函数外部普通函数this指向"
}
console.log(this,'普通函数外部普通函数this指向'); //{a: 1, b: 2} "普通函数内部箭头函数this指向"
fn1();
}
fn.call(obj);