3.8 箭头函数

最新推荐文章于 2024-09-11 17:09:49 发布

辞九门

最新推荐文章于 2024-09-11 17:09:49 发布

阅读量29

点赞数

分类专栏： Vue3学习记录文章标签： javascript vue 前端 es6 ecmascript

本文链接：https://blog.csdn.net/qq_42461650/article/details/131350036

版权

Vue3学习记录专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章介绍了ES6中的箭头函数的各种语法形式，包括单参数、多参数、无参数、多语句函数体以及返回对象字面量的情况。同时，重点讨论了箭头函数与this关键字的不同，指出箭头函数没有自己的this，会继承外层作用域的this，而常规函数的this取决于调用方式。

摘要由CSDN通过智能技术生成

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的值会被设置为全局对象。