new的时候发生了什么？

最新推荐文章于 2024-09-30 09:11:25 发布

原创最新推荐文章于 2024-09-30 09:11:25 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

100 篇文章

订阅专栏

本文深入探讨JavaScript中自定义new操作符的实现方式，通过两种不同方法展示如何创建对象并正确设置其原型，同时介绍ES6新增的Object.getPrototypeOf和Object.setPrototypeOf方法，帮助读者理解构造函数与原型链的关系。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
  const newFn = function (C, ...args) {
    /**
     * 创建对象，将其__proto__关联到构造器的prototype
     * 设置原型
     * 判断返回值
     * 输出
     * */
    // const obj = Object.create(C.prototype);
    /* 等价于 */
    const obj = {
      __proto__: C.prototype,
    };
    const instance = C.apply(obj, args);
    if (instance && (typeof(instance) === 'object' || typeof(instance) === 'Function')) {
      return instance;
    }
    return obj;
  };

  function Person(name) {
    this.name = name;
  }

  Person.prototype.logName = function () {
    console.log(this.name);
  };

  const o = newFn(Person, '任先阳');
  o.logName();
</script>

补充一下，ES6新增了Object.getPrototypeOf、Object.setPrototype两个方法，用来操作 __proro__ 属性。

<script>
  const newFn = function (C, ...args) {
    const result = {};
    Object.setPrototypeOf(result,C.prototype); // here
    const instance = C.apply(result, args);
    if (instance && (typeof(instance) === 'object' || typeof(instance) === 'Function')) {
      return instance;
    }
    return result;
  };

  function Person(name) {
    this.name = name;
  }

  Person.prototype.logName = function () {
    console.log(this.name);
  };

  const o = newFn(Person, '任先阳');
  o.logName();
</script>