ES6 箭头函数

Posted 2020-11-23 jiaobaba

 

 

 

 

 

 非箭头函数与箭头函数的写法

//非箭头函数写法，函数声明
function sum(a, b) {
    return a + b;
}
//非箭头函数写法，函数表达式
var sum = function(a,b){
    return a+b;
}
//箭头函数写法 把箭头函数赋给一个变量，省略function，（）括号里面是参数，当参数是一个时,（）括号可省略
let sum = (a, b) => {

　　  return a + b;

 }

省略不写return ，仍有返回值，可返回数组，对象，函数。。。

写法：去掉大括号，直接把要返回的值写到箭头的后面，但当返回对象是，{name:‘zwq‘}会被当成一个箭头函数的{}，所以，当返回对象时，可用表达式包裹上。

let sum = (a, b) =>  a + b;   //返回 a+b

　let fn = (a, b) => ({ a: a, b: b });

 

使用箭头函数简化代码，如下代码

function sum(x) {
    return function (y) {
        return function (z) {
            return x + y + z;
        }
    }
}
var sum1 = sum(1);
var sum2 = sum(2);
console.log(sum2(3));

 

可以写成：箭头函数可以省略return ，并把大括号去掉，参数是一个的时候也可以去掉。

let sum = x => y => z =>  x + y + z

console.log(sum(1)(2)(3));

 

参数不能重复命名

function sum(a,a){
    console.log(a);    //不报错
}
let sum  = (a,a) =>{
    console.log(a);    //报错
}

 

箭头函数不能new，并且没有原型

 

let Person = () => {
    this.a = 10;
}
new Person();   // Uncaught TypeError: Person is not a constructor

 

 

 

 

箭头函数的arguments和this的值是外围最近一层非箭头函数的arguments和this值。是词法作用域下，也就是说是你写代码时你眼睛直观看到的。即使这个函数执行时被保存到外部。

如下代码箭头函数外部没有非箭头函数，所以没有arguments。

 

let a = (x,y) =>{
    console.log(arguments);  //Uncaught ReferenceError: arguments is not defined
}
a(3,4);

 

 

 

当前箭头函数外面套着非箭头函数，不管执行时函数是否保存到外部，只是当前肉眼看到的词法作用域，当前里面的箭头函数外面套着非箭头函数，所以可以拿到外部非箭头函数的arguments.

 

function fn(a,b){
    return (x,y) =>{
        console.log(arguments,x,y);
    }
}
fn(3,4)(5,6);    //[3,4] 5 6

 

 

 

例如有这样的需求。我们定义一个函数fn()并且在fn里面定义了其他函数,在这个函数里面需要接受fn函数的参数，当传入参数不固定时，我们接受arguments，但是每个函数的arguments都是自己函数的参数的arguments，我们需要外部函数的arguments只能用一个变量先保存起来。

 

function fn(){
   // var a = arguments;
    return function(){
　　　　　console.log(a);   //[3,4]
        console.log(arguments)  //一个空的arguments
    }
}
fn(3,4)();

 

 

 

这是箭头函数的特点，箭头函数的arguments只能由外部非箭头函数的arguments决定

 

function fn(){
    return () =>{
        console.log(arguments);
    }
}
fn(3,4)();   //[3,4]   

 

 

 

 

this指向问题

普通函数的this，谁调用它，他就指向谁。 如下打印的是对象里的innerObj；

 

var  a = ‘outObj‘;   
var  obj = {
    a:‘innerObj‘,
    fn:function(){ 
        console.log(this.a);   //innerObj
    }
}
obj.fn();

 

 

 

箭头函数的this跟arguments一样是外围离自己最近一层的非箭头函数，当箭头函数外面没有非箭头函数时，this指向window

 

var  a = ‘outObj‘;   //注意 变量声明不能用let。如果用let a 的话会打印undefined，因为当前this指向全局，但通过let定义的属性不会定义成window属性

let obj = {
    a:‘innerObj‘,
    fn:()=>{ 
        console.log(this.a);   //  outObj因为this和arguments的值取决于外面最近一层的非箭头函数，而当前的箭头函数外面没有箭头函数所以this绑定在全局上。
    }
}
obj.fn();

如果想打印对象obj里面的属性需要在箭头函数外面套一个非箭头函数

　　let obj = {

　　　　a:‘innerObj‘,

　　　　fn(){

　　　　　　let sum = () =>{

　　　　　　　　console.log(this.a);   //innerObj

　　　　　　}

　　　　　　sum()

　　　　}

　　}

 

 

 

将变量返回到外部也是一样
let obj = {
    a:‘innerObj‘,
    fn(){
        let sum = () =>{
            console.log(this.a);   //innerObj
        }
        return sum;
    }
}
let outerSum = obj.fn();

 

当用普通函数是使用settimeout，由于没有对象调用settimeout里面的函数，因此他指向的window。利用保存外部函数this，或者用call改变this指向来改变this。

let obj = {
    ms:‘abx‘,
    fn(){
            var self = this;
        　　 setTimeout(function(){
           　　  console.log(this.ms);   
             　　console.log(self.ms);   或者改变this指向  
       　　 },500)
    }
}
obj.fn();

 

使用箭头函数解决this指向问题

let obj = {
    ms:‘abc‘,
    fn(){
        setTimeout(() => {
            console.log(this.ms);  //abc
        }, 500);
    }
}
obj.fn();