js是如何实现new一个对象的?

简介: 面向对象,从new一个对象开始。在ES6中,引入了关键词`class`来声明一个类,在此之前想要创建一个"类",只能使用函数的方式。可以说,`class`其实就是函数`function`的一个语法糖。有了类,我们就可以使用`new`来创建一个实例对象。

面向对象,从new一个对象开始。在ES6中,引入了关键词class来声明一个类,在此之前想要创建一个"类",只能使用函数的方式。可以说,class其实就是函数function的一个语法糖。有了类,我们就可以使用new来创建一个实例对象。

新建一个类

从ES6开始,新建一个类可以使用class关键词,并使用new来实例化类,例如:

    class User {
      constructor(name) {
        this.name = name;
      }
      getName() {
        return this.name;
      }
    }
    const p = new User('张三');
    console.log(p);

注意必须要先使用class声明类,才能访问;不能先访问,然后才声明。因为类声明并不会变量提升,但是函数声明是可以变量提升的。

    const p = new User('张三')
    function User(name) {
      this.name = name
    }
    User.prototype.getName = function() {
      return this.name; // 不能使用箭头函数,因为箭头函数的this会指向全局
    }
    console.log(p);

两者运行结果都是一样的:

image-20220616163202929.png

不管是函数声明还是类声明,在实例化时我们都是使用的new,那么new到底是怎么实例化出一个对象的呢?

new一个对象的过程

直接说new可能比较抽象,我们声明一个函数,其创建一个对象的过程分为三个步骤:

  • 创建一个空对象,并继承类的构造函数的原型
  • 执行构造函数,构造函数的this应该指向创建的空对象,并且传入参数列表
  • 返回该对象

具体怎么实现,我们来看一段代码:

      function User(name) {
        this.name = name;
      } // 使用函数来声明一个类
      User.prototype.getName = function () {
        return this.name;
      } // 函数原型上增加一个getName方法,作为类的成员方法
      // 自定义一个函数,用来代替new,作用也是实例化一个对象
      function customNew(constructor, ...args) {
        // 1. 创建一个空对象,并继承构造函数的原型
        const obj = Object.create(constructor.prototype);
        // 2. 执行构造函数,并将obj作为this,传入参数列表
        constructor.apply(obj, args);
        // 3. 返回obj
        return obj;
      }
      const p = customNew(User, '张三');
      const p2 = new User('张三');
      console.log(p);
      console.log(p instanceof User); // true
      console.log(p2 instanceof User); // true

Object.create()可以创建一个对象,其原型为传入的原型对象;如果是使用{}来创建,其原型指向的是Object.prototype,此时还需要手动指定原型。

对比运行结果:

image-20220616164416617.png

两种方式返回的对象都是类的实例,并且在数据结构上也是相同的,说明我们自定义的“new”在功能上是可以满足要求的。

总结

实例化一个对象,实际上就是调用了一个函数并返回了一个特殊的对象,这个对象包含类的属性和方法,根据“鸭子定律”,那么函数就是“new”。在手写实现new的过程中,需要注意只能使用函数声明的类,而不能使用class声明的类。

相关文章
|
4天前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
4天前
|
设计模式 JavaScript 前端开发
js中new和object.creat区别
【10月更文挑战第29天】`new` 关键字和 `Object.create()` 方法在创建对象的方式、原型链继承、属性初始化以及适用场景等方面都存在差异。在实际开发中,需要根据具体的需求和设计模式来选择合适的方法来创建对象。
|
4天前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
28天前
|
存储 JavaScript 前端开发
JavaScript 对象的概念
JavaScript 对象的概念
35 4
|
26天前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
29 1
|
27天前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
15 2
|
30天前
|
JavaScript 前端开发 Unix
Node.js 全局对象
10月更文挑战第5天
21 2
|
1月前
|
存储 JavaScript 前端开发
js中的对象
js中的对象
18 3
|
22天前
|
JavaScript 前端开发 大数据
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
在JavaScript中,Object.assign()方法或展开语法(...)来合并对象,Object.freeze()方法来冻结对象,防止对象被修改
12 0
|
26天前
|
JavaScript 前端开发 索引
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
JavaScript中数组、对象等循环遍历的常用方法介绍(一)
17 0