### 彪哥

爱好前端

- JavaScript文章

  - 33个非常实用的JavaScript一行代码
  - new命令原理
  - ES5面向对象
  - ES6面向对象
  - 多种数组去重性能对比
  - JS随机打乱数组
  - 判断是否为移动端浏览器
  - 将一维数组按指定长度转为二维数组
  - 防抖与节流函数
  - JS获取和修改url参数
  - 比typeof运算符更准确的类型判断

  - 三级目录

- 学习笔记

- 前端
- JavaScript文章

heBody
2019-12-25

# new命令原理

# # new命令原理

使用new命令时，它后面的函数依次执行下面的步骤：

1. 创建一个空对象，作为将要返回的实例对象。
2. 将这个空对象的原型，指向构造函数的prototype属性。
3. 将这个空对象赋值给函数内部的this关键字。
4. 开始执行构造函数内部的代码。
5. 如果构造函数内有返回值且为对象类型，则返回该对象，否则返回上面创建的实例对象。

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

    // 自定义_new
    function _new() {
      // 将 arguments 对象转为数组
      var args = [].slice.call(arguments);
      // 取出构造函数
      var constructor = args.shift();
      // 创建一个空对象，继承构造函数的 prototype 属性
      var context = Object.create(constructor.prototype);
      // 执行构造函数，并将context对象赋值给函数内部的this
      var result = constructor.apply(context, args);
      // 如果返回结果是对象，就直接返回，否则返回 context 对象
      return (typeof result === 'object' && result != null) ? result : context;
    }

    // 自定义_new2
    function _new2(/* 构造函数 */ constructor, /* 构造函数参数 */ params) {
      // 创建一个空对象，并继承构造函数的 prototype 属性
      var context = Object.create(constructor.prototype);
      // 执行构造函数，并将context对象赋值给函数内部的this
      var result = constructor.apply(context, params);
      // 如果返回结果是对象，就直接返回，否则返回 context 对象
      return (typeof result === 'object' && result != null) ? result : context;
      // （当用户在构造函数内部自定义返回对象的话则使用该对象，否则返回context）
    }

    // 通过自定义_new 返回实例
    var actor = _new(Person, '张三', 28);
    console.log(actor.name) // 张三

    // 通过自定义_new2 返回实例
    var actor2 = _new2(Person, ['李四', 29]);
    console.log(actor2.name) // 李四

    // 通过new命令 返回实例
    var actor3 = new Person('王五',30)
    console.log(actor3.name) // 王五

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
编辑
(opens new window)
上次更新: 2022/12/14, 19:36:42
33个非常实用的JavaScript一行代码
ES5面向对象

← 33个非常实用的JavaScript一行代码 ES5面向对象→

最近更新

  01
Git修改分支名
08-11

  02
CSS给table的tbody添加滚动条
06-29

  03
我做了一个手写春联小网页，祝大家虎年暴富 原创
01-28

更多文章>

Copyright © 2016-2022 Hesb | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式