Javascript - 请问可以new一个箭头函数吗？

Java资料网推荐Javascript - 请问可以new一个箭头函数吗？这篇文章给大家，欢迎收藏Java资料网享受知识的乐趣

🚐new操作符的步骤

在JavaScript中，new 操作符用于创建一个对象实例，具体来说，它会执行以下几步操作：

1. 创建一个新对象： 创建一个新的空对象，且这个对象的 __proto__ 属性会被设置为构造函数的 prototype 属性。

2. 设置原型链： 将这个新对象的 __proto__ 属性指向构造函数的 prototype 属性，从而实现新对象继承构造函数的原型方法和属性。

3. 绑定 this 并执行构造函数： 将构造函数中的 this 绑定到这个新对象上，并执行构造函数，传递给构造函数的参数也会传递到此函数中。

4. 返回新对象： 如果构造函数显式地返回一个对象，那么这个对象将作为 new 表达式的结果返回。否则，返回步骤1中创建的新对象。

以下是用代码详细描述这些步骤：

function myNew(constructor, ...args) {
  // 1. 创建一个新对象
  const obj = {};
  
  // 2. 设置原型链
  Object.setPrototypeOf(obj, constructor.prototype);
  
  // 3. 绑定 this 并执行构造函数
  const result = constructor.apply(obj, args);
  
  // 4. 返回新对象
  return result instanceof Object ? result : obj;
}

// 示例构造函数
function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person = myNew(Person, 'John', 30);
console.log(person.name); // John
console.log(person.age);  // 30

让我们一步一步来理解 new 操作符执行的这些步骤：

🤦‍♀️创建一个新对象：

const obj = {};

🤦‍♀️设置原型链：

Object.setPrototypeOf(obj, constructor.prototype);

或者在现代浏览器中可以直接使用：

obj.__proto__ = constructor.prototype;

🤦‍♀️绑定 this 并执行构造函数：

const result = constructor.apply(obj, args);

这里 apply 方法用于将 this 绑定到新创建的对象上，并传递参数给构造函数。

🤦‍♀️返回新对象：

return result instanceof Object ? result : obj;

如果构造函数返回一个对象，则返回该对象；否则，返回新创建的对象。

这种模拟 new 操作符的实现有助于深入理解它的工作原理。总的来说，new 操作符在创建对象的过程中，主要负责设置对象的原型链、执行构造函数以及返回新对象。

🚐那么箭头函数在本小节中又有哪些表现或者特征呢？

ES6引入的箭头函数（Arrow Functions）具有一些独特的特征，使它们在特定场景下比传统函数更加简洁和方便。以下是箭头函数的主要特征：

🤦‍♀️1 没有自己的 this 绑定

箭头函数没有自己的 this 值，它会捕获上下文中的 this 值（即定义时的 this），而不是调用时的 this。这意味着在箭头函数中，this 始终指向它外部作用域的 this。

function Person() {
  this.age = 0;
  
  setInterval(() => {
    this.age++; // `this` 正确指向 Person 对象
    console.log(this.age);
  }, 1000);
}

const p = new Person();

🤦‍♀️2 没有 arguments 对象

箭头函数没有自己的 arguments 对象。如果需要使用 arguments，可以使用 rest 参数（...args）代替。

const sum = (...args) => args.reduce((a, b) => a + b, 0);
console.log(sum(1, 2, 3)); // 6

🤦‍♀️3 不能用作构造函数

箭头函数不能使用 new 关键字调用，因为它们没有 [[Construct]] 方法，不支持 new 操作符。

const Foo = () => {};
const bar = new Foo(); // TypeError: Foo is not a constructor

🚐总结

由此可见，箭头函数哇，设置原型链 和 绑定 this 并执行构造函数 这两步无法达成，或者说实现不了。

但这完全不影响我们在前端项目中开心的使用箭头函数，你说你没事干new他干啥，面试官你非瞎问这个干啥。直接弄出个项目，你就让他干，考察一下，差不多得了呗，非有的没的瞎问。

文章来源:https://blog.csdn.net/xingyu_qie/article/details/139687004
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！