普通函数和箭头函数的区别

最新推荐文章于 2024-05-21 14:15:14 发布

Niucode

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量629

点赞数 9

分类专栏： es6 文章标签：原型模式 javascript 开发语言

本文链接：https://blog.csdn.net/Niucode/article/details/137674946

版权

es6 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

普通函数和箭头函数在JavaScript中主要有以下区别：

语法形式。箭头函数使用简洁的箭头语法=>定义，不需要像普通函数那样使用function关键字。
匿名性。箭头函数只能是匿名的，而普通函数可以是匿名的，也可以具有具体的名称。
this指向。箭头函数的this值是在定义函数时确定的，而不是在函数被调用时。如果箭头函数在定义时处于某个上下文中，它会捕获该上下文的this值。一旦捕获，this值保持不变，即使使用call、apply或bind方法也无法改变。普通函数的this值则是在函数被调用时根据上下文确定的。
构造函数使用。箭头函数不能用作构造函数，不能通过new关键字实例化对象。普通函数可以用作构造函数，通过new关键字创建对象的实例。
arguments对象和prototype属性。箭头函数没有自己的arguments对象和prototype属性，这意味着它们不能使用arguments对象来访问传递的参数，也不能作为其他函数的父类。普通函数有arguments对象来存储实际传递的参数，并且可以有prototype属性。

一、普通函数使用 arguments 和 prototype

普通函数使用 arguments 对象：

// 定义一个普通函数
function sum() {
    let total = 0;
    for (let i = 0; i < arguments.length; i++) {
        total += arguments[i];
    }
    return total;
}

// 调用函数并传入参数
console.log(sum(1, 2, 3, 4)); // 输出：10

在这个示例中，sum 函数没有明确指定参数列表，可以通过 arguments 对象获取所有传入的参数，并对它们进行求和操作。

普通函数使用 prototype 属性：

// 创建一个构造函数
function Person(name) {
    this.name = name;
}

// 通过 prototype 属性添加方法
Person.prototype.sayHello = function() {
    console.log("Hello, my name is " + this.name);
};

// 创建一个实例对象
let person1 = new Person('Alice');

// 调用实例方法
person1.sayHello(); // 输出：Hello, my name is Alice

在这个示例中，我们定义了一个 Person 构造函数，并通过 prototype 属性添加了一个 sayHello 方法。然后创建了一个 person1 实例对象，并调用了该实例对象上的 sayHello 方法，从而输出相应的问候语句。这种方式能够使方法被共享，节省内存空间。

二、关于箭头函数this指向的详细解读：

箭头函数的 this 指向比较特殊，它总是指向其最近的外层函数作用域的 this 所指对象

箭头函数为以下形式的函数

const func = (paramList) => {
    // 函数体
}

按照习惯，将箭头函数作为单独一个函数来使用的情况并不多，往往是当要传入的参数是函数时才使用箭头函数

// 比如事件处理函数
elem.addEventListener("click", () => {
    // 函数体
})

this在函数中的指向

我们常用函数关键字function来声明一个函数，在一个function()中，this总是指向调用这个函数的对象。但箭头函数的this指向有点特别，它总是指向最近的外层作用域中的this所指对象

下面用例子来说明：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="func">使用function构建事件处理函数</button>
    <br />
    <br />
    <br />
    <button class="arrow">使用箭头函数构建事件处理函数</button>
    <script>
        // 这里有两个点击事件，一个绑定的事件处理函数为普通函数，一个为箭头函数
        const func = document.getElementsByClassName('func')[0]
        const arrow = document.getElementsByClassName('arrow')[0]

        func.addEventListener("click", function () {
            console.log(this);
        });

        arrow.addEventListener("click", () => {
            console.log(this);
        });

    </script>
</body>

</html>

效果图如下：

由控制台打印结果可以看到：

普通函数构造的事件处理函数的this指向的是事件源对象（button）

箭头函数构造的事件处理函数中的this指向的是其最近外层函数作用域中的this指向的Window对象（这个时候箭头函数的最外层函数是JavaScript环境）

再看一个例子：

const obj = {
    func1() {
        setTimeout(function() {
            console.log(this);
        })
    },
    func2() {
        setTimeout(() => {
            console.log(this);
        })
    }
}
obj.func1(); // 打印出 Window
obj.func2(); // 打印出 当前对象obj

效果图如下：