ES6箭头函数
- 格式
原来的函数写法
function fn(a,b){
return a+b;
}
箭头函数写法
let fn=(a,b)=>{
return a+b;
}
let result=fn(1,2);
console.log(3);
- 注意点
- this是静态的,始终指向函数声明时所在作用域下的this的值,即使使用call,apply等方法改变作用域,也不会改变this的指向
例如:
window.name = 'jisoo';
let obj = {
name: 'lisa';
};
function name1() {
console.log(this.name);
}
let name2 = () => {
console.log(this.name);
}
name1(); //普通函数里的this指向全局变量jisoo
name2(); //箭头函数里的变量在全局作用域下声明jisoo
//call()方法调用
name1.call(obj); //lisa(call方法有效)
name2.call(obj); //jisoo(call方法无效)
- 不能作为构造函数实例化对象
例如:
function obj1(name, age) {
this.name = name;
this.age = age;
}
var bp = new obj1('jisoo', 25);
console.log(bp.name);//‘jisoo’
console.log(bp.age);25 原来的函数写法
var obj2 = (name, age) => {
this.name = name;
this.age = age;
}
var bp1 = new obj2('jennie', 24);
console.log(bp1.name);
console.log(bp2.age);//会报错(obj2 is not a constructor)
- 不能使用arguments变量
例如:
function blackpink() {
console.log(arguments.length);
}
blackpink(1, 2);//2
let bp=()=>{
console.log(arguments.length);
}
bp(1,2);//报错arguments is not defined
-
箭头函数的简写
省略小括号(当形参有且只有一个时)
var rose = n => {
console.log(n + n);
}
rose(8);//16
var rose1 = (n) => {
console.log(n + n);
}
rose1(9);//18
省略花括号和return(当代码体只有一条语句时)
var rose2 = n => {
console.log(n * n);
}
rose2(8);//64
var rose3 = m => console.log(m * m);
rose3(9);//81
- 箭头函数最适合把一个函数作为参数传到另一个函数中使用和与this无关的回调,例如计数器,数组的方法等