概述: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