【JavaScript】对象 ④ ( 构造函数与对象的联系 | new 操作符执行过程分析 )

韩曙亮

发布于 2024-04-28 08:02:39

810

发布于 2024-04-28 08:02:39

文章被收录于专栏：韩曙亮的移动开发专栏韩曙亮的移动开发专栏

一、构造函数与对象的联系

在 JavaScript 中 , 构造函数与对象之间是描述与实例之间的关系 ;

构造函数是用来创建特定类型对象的函数 ;
对象是根据构造函数实例化出来的具体实例 ;

构造函数抽象了对象的公共部分 , 将属性和方法封装到了构造函数中 , 可以理解为面向对象中的类 ;

对象指的是某一个特定的实例化值 ;

二、new 操作符执行过程分析

1、使用 new 构造函数() 创建对象过程

在上一篇博客【JavaScript】对象 ③ ( 使用 new Object 创建对象 | 使用构造函数创建对象 | 构造函数语法 | 使用字面量和 new Object 创建对象的方法弊端 ) 中 , 讲解了构造函数的使用流程 ,

首先 , 定义构造函数 ;

// 1. 定义构造函数  
function Person(uname, age) {  
    // 2. 在构造函数内部定义属性和方法  
    this.uname = uname;  
    this.age = age;  
      
    this.hello = function() {  
        console.log( this.uname + " is " + this.age + " years old");
    };  
}

然后 , 使用 new 操作符调用构造函数 , 创建对象 ;

// 3. 使用 new 操作符调用构造函数，创建对象
var person = new Person('Tom', 18);

2、new 操作符执行过程

new 操作符的主要作用就是创建一个新的对象实例 , 这个对象实例会继承构造函数的 prototype 对象 , 并执行构造函数中的代码 , 来初始化新对象的属性和方法 , 下面详细分析 new 操作符的执行过程 ;

new 操作符创建对象的执行过程如下 :

首先 , 创建空对象 , 使用 new 操作符调用构造函数 , 可以在内存空间中 , 创建一个空对象 ;
然后 , this 指针指向对象 , 将构造函数中的 this 指针指向该空对象 ;
- 新创建的空对象的 __proto__ 会被链接到构造函数的 prototype 对象 , 该空对象就可以访问在构造函数中定义的属性和方法 ;
再后 , 设置属性和方法 , 执行构造函数中的代码 , 为空对象设置属性和方法 ;
- this 关键字在构造函数内部被设置为新创建的对象 , 之后执行构造函数的代码 , 给新对象添加属性和方法 ;
最后 , 返回创建的对象 , 将内存空间中创建的对象返回 , 一般是赋值给 var / let 关键字声明的变量 ;
- new 关键字可以将创建的对象直接返回 , 因此构造函数中不需要 return 语句 ;
  - 如果构造函数没有显式地返回一个对象 , new 操作符会自动返回新创建的对象 ;
  - 如果构造函数确实显式地返回了一个返回值 , 那么这个返回值会被 new 操作符返回 ;