ES6 箭头函数

正常函数
箭头函数
区别

ES6学习笔记

正常函数

function fun(){
    return "史迪奇";
}

// 或者
const fun = function(){
    return "史迪奇";
}

console.log(fun());

箭头函数

箭头函数相当于return

()中定义参数, 如果只有一个参数, 可以不写括号()
{}中写函数体, 如果函数体中只有返回值, 可以不写return

const fun() = () => {
    return "史迪奇";
}

// 一个返回值
const fun() = () => "史迪奇"


console.log(fun());

区别

this指向不同
普通函数哪里调用 this指向哪里
箭头函数哪里定义 this指向哪里

正常函数

let sdq = {
    name:"史迪奇",
    species:"外星生物", 
    myName(){
        // 模板字符串 ${this.name}
        // console.log(`我叫${this.name}`);
        console.log("我叫"+ this.name);
    }
}

正常函数 this指向

let sdq = {
    name:"史迪奇",
    species:"外星生物", 
    myName(){
        let self = this;
        setTimeout(function(){
           // 指向windous对象
           // console.log(this); 
           console.log(self.name); 
        },500)
    }
}
sdq.myName();

箭头函数 this指向

let sdq = {
    name:"史迪奇",
    species:"外星生物", 
    myName(){
        let self = this;
        setTimeout(() => {
           // 指向sdq对象
           console.log("我是"+this.name);     
        },500)
    }
}
sdq.myName();

作者: 我叫史迪奇
本文来自于: https://sdq3.link/ES6-Arrow-function.html博客内容遵循署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议