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 + cconsole.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 = namethis.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

ES6新特性之箭头函数相关推荐

实战 es6_Node.JS实战65：ES6新特性：箭头函数
有人说ES6(ES2015)最具魅力的是箭头函数.但真的,我不这么认为:箭头函数这玩意真是又丑又变扭! 不过,箭头函数确实有它的功能优势: 1.简洁: (虽然我也不认为这是真的简洁,还是认为它是很变扭 ...
ES6新特性_ES6箭头函数的实践以及应用场景---JavaScript_ECMAScript_ES6-ES11新特性工作笔记010
然后我们再去看,这个箭头函数的一些应用右边有块区域我们点击div以后实现2s以后,我们变成粉色我们去实现声明一个let ad得到这div对象然后给这对象添加事件监听,可以看到这里,添加了一个c ...
ES6新特性_ES6箭头函数以及声明特点---JavaScript_ECMAScript_ES6-ES11新特性工作笔记009
然后我们看这个箭头函数,箭头函数用的很多,很常用. 可以看到以前我们声明函数用上面的方法现在我们可以把这个function省略,然后加上=> 我们可以调用一下,可以看到没问题然后我们再看看, ...
ES6新特性3：函数的扩展
本文摘自ECMAScript6入门,转载请注明出处. 一.函数参数默认值 1. ES6允许为函数的参数设置默认值,即直接写在参数定义的后面. function log(x, y = 'World') ...
ES6新特性之Generator函数
Generator函数 Generator 函数是 ES6 提供的一种异步编程解决方案,语法行为与传统函数完全不同 . Generator函数有两个特征: 一是 function命令与函数名之间有 ...
ES6新特性_ES6生成器函数的参数传递---JavaScript_ECMAScript_ES6-ES11新特性工作笔记021
然后我们再来看es6中生成器函数的参数传递. 首先看一个例子,没有参数的,可以看到右边执行结果. 然后看如果我给这个gen('AAA')调用的时候传一个值可以看到右边没有反应,我们说生成器函数调用需 ...
ES6新特性_ES6生成器函数实例_第二个实例---JavaScript_ECMAScript_ES6-ES11新特性工作笔记023
然后我们再来看一个案例这里我们说生成器函数是针对异步编程的解决方案,我们看看他是怎么解决的, 我们知道这个setTimeout是异步执行的,那么我们这里现在有这样一个需求,我们先拿到某个用户数据, ...
ES6新特性_ES6生成器函数实例---JavaScript_ECMAScript_ES6-ES11新特性工作笔记022
生成器函数是针对异步编程的一个解决方案我们知道ajax,是异步的,其实文件操作,网络操作,数据库操作,都是异步的我们这里做个例子就是1s后输出111,2s后输出222,3s后输出333,可以用上 ...
ES6新特性_ES6生成器函数声明与调用---JavaScript_ECMAScript_ES6-ES11新特性工作笔记020
然后我们再来看这个生成器函数的声明调用生成器函数就是在函数,前面加个*,表示这个是个生成器函数. 然后我们写个iterator=gen(); 调用一下这个函数,看看这个函数中有个next方法所以 ...

ES6新特性之箭头函数

ES6新特性之箭头函数相关推荐

最新文章

热门文章