欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ES6 箭头函数

程序员文章站 2023-02-06 19:50:19
非箭头函数与箭头函数的写法 //非箭头函数写法,函数声明function sum(a, b) { return a + b; }//非箭头函数写法,函数表达式 var sum = function(a,b){ return a+b; }//箭头函数写法 把箭头函数赋给一个变量,省略function, ......

ES6 箭头函数 ES6 箭头函数

 

 

 

 

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

//非箭头函数写法,函数声明
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();