《面试官冷笑:箭头函数能当构造函数吗?答错直接挂!》

前言:在上一篇文章我们了解到了一些面试中经常被问到的ES6+的新特性,面试官问完ES6+的新特性后,经常会接着追问你让你讲一下箭头函数与普通函数的区别。许多人都不能答全,接下来让我们来深入了解下箭头函数究竟是何方神圣?

当面试官问箭头函数与普通函数的区别时,我们可以从以下几个方面来回答

1. 语法层面

  • 简洁性 :箭头函数语法更加简洁。对于单个参数,可省略括号;若函数体只有一条语句,还能省略花括号和return关键字。比如:
js 复制代码
// 箭头函数 
const square = num => num * num;
// 普通函数 
function squareFunction(num) { 
    return num * num; 
}
  • 参数定义 :普通函数使用function关键字定义,参数在括号内。而箭头函数使用=>来分隔函数和函数体。

2. this指向

  • 普通函数this的指向取决于函数的调用方式。它可以指向全局对象(在浏览器中是window)、函数本身、对象实例、或者构造函数等。例如:
js 复制代码
const obj = {
    name: 'Alice',
    sayName: function () {
        console.log(this.name);
    }
};
obj.sayName(); // 输出 'Alice',this 指向 obj

function test() {
    console.log(this);
}
test(); // 在浏览器中输出 window 对象, 在 Node.js 中输出 global 对象
  • 箭头函数 :没有自己的this,它的this继承自外层函数。这能避免在嵌套函数中this指向改变的问题。例如:
js 复制代码
const obj = {
    name: 'Bob',
    sayName: function () {
        const arrow = () => {
            console.log(this.name);
        };
        arrow();
    }
};
obj.sayName(); // 输出 'Bob',this 继承自外层的 sayName 函数

3. arguments对象

  • 普通函数 :有自己的arguments对象,它是一个类数组对象,包含了函数调用时传递的所有参数。例如:
js 复制代码
function showArgs() {
    console.log(arguments);
}
showArgs(1, 2, 3); // 输出 Arguments(3) [1, 2, 3]
  • 箭头函数 :没有自己的arguments对象。若要获取参数,可以使用剩余参数语法。例如:
js 复制代码
const showArgsArrow = (...args) => {
    console.log(args);
};
showArgsArrow(4, 5, 6); // 输出 [4, 5, 6]

4. 构造函数使用

  • 普通函数 :可以作为构造函数,使用new关键字创建对象实例。例如:
js 复制代码
function Person(name) {
    this.name = name;
}
const person = new Person('Charlie');
console.log(person.name); // 输出 'Charlie'
  • 箭头函数 :不能用作构造函数,使用new关键字调用箭头函数会报错。因为箭头函数没有自己的thisprototype,无法创建对象实例。例如:
js 复制代码
const ArrowPerson = (name) => {
    this.name = name;
};
try {
    const arrowPerson = new ArrowPerson('David'); // 会抛出错误
} catch (error) {
    console.error(error);
}

5. yield关键字使用

  • 普通函数 :在生成器函数中可以使用yield关键字,用于暂停和恢复函数的执行。例如:
js 复制代码
function* generator() {
    yield 1;
    yield 2;
    yield 3;
}
const gen = generator();
console.log(gen.next().value); // 输出 1
  • 箭头函数 :不能使用yield关键字,所以不能用作生成器函数。
相关推荐
coding随想1 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我28 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子33 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹37 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器43 分钟前
指定阿里镜像原理
前端
枷锁—sha1 小时前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha1 小时前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB241 小时前
html复习
javascript·microsoft·html
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控