ES6允许使用“箭头”(=>)定义函数,箭头函数的语法多变,根据实际的使用场景有多种形式,但都需要由函数参数、箭头和函数体形成。
3.8.1 箭头函数的语法
1.单一参数、函数体只有一条语句:
function welcome(msg){
return msg;
}
// 箭头函数写法
let welcome = msg => msg;
2.多个参数、函数体单一
function welcome(user,msg){
return user + "," + msg;
}
// 箭头函数写法
let welcome = (user,msg) => `${user},${msg}`;
3.没有参数
function welcome(){
return "welcome you";
}
// 箭头函数写法
let welcome = ()=> "welcome you";
4.函数体有多条语句
function add(a,b){
let c = a + b;
return c;
}
// 箭头函数写法
let add = (a,b)=> {
let c = a + b;
return c;
};
5. 空函数
let emptyFunction = () => {}
6. 返回值是对象字面量
function createCar(color,doors){
return {
color:color,
doors:doors
}
}
// 箭头函数写法
let createCar = (color,doors) => ({color:color,doors:doors});
7.箭头函数与对象解构结合
function personInfo({name,age}){
return `${name}'s age is ${age} years old.`;
}
// 箭头函数写法
let personInfo= ({name,age}) => `${name}'s age is ${age} years old.`;
3.8.2 箭头函数与this
JavaScript中的this关键字是一个神奇的东西,与其他高级语言中的this引用或this指针不同,JavaScript中的this并不是指向对象本身,其指向是可以改变的。根据当前执行上下文的变化而变化。
var greeting = "Welcome";
function sayHello(user) {
console.log(this.greeting+","+user);
}
var obj = {
greeting: "Hello",
sayHello: sayHello
}
// 01
sayHello("张三"); // Welcome,张三
// 02
obj.sayHello("李四"); // Hello,李四
// 03
var sayHi = obj.sayHello;
sayHi("王五"); // Welcome,王五
分析上述代码:
(1)调用sayHello("张三")时,相当于执行window.sayHello("张三"),因此函数内部this指向的是window对象,所以this.greeting指的是全局的greeting
(2)调用obj.sayHello("李四")时,函数内部指向的是obj对象,而obj对象定义了greeting属性,因此此时的this.greeting = obj.greeting
(3)调用ayHello("王五")时,虽然该函数是由obj.sayHello赋值得到的,但是在执行sayHello函数时,当前的执行上下文对象是window对象,相当于调用window.sayHello("王五")
总之this指向调用它的对象,谁调用了它,它就指向谁。
箭头函数中没有this绑定,必须通过查找作用域决定其值。如果箭头函数被非箭头函数包含,则this绑定的是最近一层非箭头函数的this;否则this的值会被设置为全局对象。