ES6新特性之箭头函数

概述:ES6允许使用箭头(=>)定义函数,箭头函数提供了一种更加简洁的函数书写方式,箭头函数多用于匿名函数的定义;

箭头函数的注意点

  • 如果形参只有一个,则小括号可以省略
  • 函数体如果只有一条语句,则花括号可以省略
  • 箭头函数的this指向声明时所在的作用域下的this值
  • 箭头函数不能作为构造函数实例化
  • 不能使用arguments

箭头函数的特性

  • 箭头函数的this是静态的,始终指向函数声明所在作用域下的this值
  • 不能作为构造实例化对象
  • 不能使用arguments变量

代码演示
传统写法

 	var sayHi = function(){
        console.log("哈喽!小刘同学");
    }
    sayHi()
    // 运行结果:哈喽!小刘同学

ES6写法:无参数

   let speak = ()=>console.log("hello 哈哈!");
    speak()
    // 运行结果:hello 哈哈!

传统写法 一个参数

	var hello = function(name){
        return `哈喽!${name}`
    }
    console.log(hello("小刘同学"));
     // 运行结果:哈喽!小刘同学

ES6箭头函数: 一个参数

	let Hi = name => `hello${name}`
    console.log(Hi("小刘同学"));
    // 运行结果:hello小刘同学

传统写法:多个参数

 	var sum = function(a,b,c){
        return a+b+c
    }
    console.log(sum(1,2,3));
    //运行结果:6 

ES6写法 多个参数

 	let add = (a,b,c)=>a + b + c
    console.log(add(6,7,8));
    // 运行结果:21

特性案例演示

箭头函数的this是静态的,始终指向函数声明时所在作用域下的this的值
  const school = {
        call:"哈喽!",
        name:"小刘同学"
    }
    // 传统函数
    function sayHiName(){
        console.log(this.call+this.name);
    }
    // 箭头函数
    let sayHiName1 = ()=>{ console.log(this.call+this.name);}

    window.name = "小张"

    // 直接调用
    sayHiName()
    // undefined小张
    sayHiName1()
    // undefined小张

使用call调用

  	sayHiName.call(school)
    // 哈喽!小刘同学
    sayHiName1.call(school)
    // undefined小张
    // 总结:箭头函数的this是静态的,始终指向函数声明时所在作用域下的this的值
不能作为构造实例化对象
  let Person = (name,age) =>{
        this.name = name
        this.age = age
    }

    let me = new Person("小张",24)
    console.log(me);
    //报错:t TypeError: Person is not a constructor
不能使用arguments 变量
  let fn = () =>console.log(argument);
    fn(1,2,3)
    // 报错 argument is not defined
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值