深入理解JavaScript中的 new 关键字

147 阅读2分钟

1.new是什么?

在 JavaScript 中,new 关键字用于创建自定义对象类型的实例或内置对象的实例。通过 new 关键字,可以轻松地实例化对象并初始化它们的属性和方法。

2.new 的工作原理

当我们使用 new 关键字调用一个函数时,这个函数被称为构造函数。new 关键字执行以下步骤:

  1. 创建一个空对象:首先 new 会创建了一个空对象,作为返回的对象实例
  2. 设置原型 :将生成的空对象的原型对象指向构造函数的 prototype 属性,从而设置原型链。
  3. 绑定this: 将当前实例对象赋值给构造函数内部的 this,使得构造函数中的任何对 this 的操作都会影响新对象。
  4. 执行构造函数:执行构造函数的初始代码。如果构造函数没有显式返回一个对象,那么new 表达式会默认返回新创建的对象。
  5. 返回新对象:如果构造函数没显式返回一个对象,new 表达式会默认返回新创建的对象

3.代码示例

  //定义构造函数
  function Study(title){
  	//设置属性
    this.title = title;
    //添加方法
    this.exportInfo = function(arg){
		console.log(`${title}${arg}`)
	}

	// 如果这里返回一个引用类型的数据,那么 new 会返回这个引用类型的数据
    // return {}; // 这里注释掉,让 new 默认返回新创建的对象
  };
  //使用 new 关键字创建实例
  const Study1 = new Study("web");
  
 // 调用实例方法
 Study1.exportInfo("hello");// 输出:web:hello
  
//检查原型链
console.log(Study.prototype == new Study().__proto__) // true 


模拟 new 的过程和行为

function createStudy(color) {
    // 创建一个新对象
    const obj = {};

    // 设置原型
    obj.__proto__ = Study.prototype;

    // 绑定 this 并执行构造函数
    Study.call(obj, color);

    // 返回新对象
    return obj;
}

// 使用手动实现的 createStudy 函数创建 Study 实例
const study2 = createStudy('js');

// 调用实例的方法
study2.exportInfo('中的prototype和this'); //输出:js:中的prototype和this

在这个手动实现的 createStudy 函数中,我们模拟了 new 关键字的四个主要步骤:创建新对象、设置原型、绑定 this 并执行构造函数、返回新对象。

4.总结

  • 创建对象实例:new 关键字用于创建自定义对象类型的实例。
  • 初始化对象:通过构造函数初始化新对象的属性和方法。
  • 设置原型:新对象的原型对象指向构造函数的 prototype 属性。
  • 绑定 this:构造函数内部的 this 被指派给新创建的对象。
  • 返回新对象:如果构造函数没有显式返回一个对象,new 表达式会默认返回新创建的对象。