【再学前端】JavaScript 中 new 一个对象实例的过程

[Samgao0312]

先看一段代码。

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayName = function() {
  return "I'm " + this.name;
}

let gl = new Person('gdragon', 30);
console.log(gl.name)  //"gdragon"
console.log(gl.age)  //30
console.log(gl.sayName())  // "I'm gdragon"

从上面代码执行结果，我们可以得出下面两个结论：

• 1、通过 new 一个构造函数得到的对象实例，可以访问该构造函数中的属性；
• 2、通过 new 一个构造函数得到的对象实例，可以访问该构造函数原型对象（.prototype）上的属性方法；

进而我们可以得出下面结论。

new 一个对象的过程

• 1、第一步：使用 new Object() 创建一个新的空对象， 我将其命名为 obj；
• 2、第二步：取出arguments中第一个参数，即我们要传入的构造函数。
• 3、第三步：将 obj 隐式原型（proto）指向构造函数的原型（prototype）;
• 4、第四步：使用apply，修改构造函数中 this 指向，使其指向 obj， 这样新对象就能够访问构造函数中的属性了；
• 5、第五步：返回 obj（注意: 最后一步返回前，需要根据构造函数返回值类型不同返回相应结果）

实现我们自己的 new 函数

function Person (name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayName = function() {
  return "Hi, I am " + this.name;
}


function newMethod() {
  let obj = new Object();
  let Constructor = [].shift.call(arguments);
  obj.__proto__ = Constructor.prototype;
  let result = Constructor.apply(obj, arguments)
  return typeof result == 'object' ? result : obj;
}

let gl = newMethod(Person, 'G-Dragon', 30);
console.log(gl.name, gl.age)
console.log(gl.sayName())

几个属性方法

• has​OwnProperty() : 方法会返回一个布尔值，指示对象自身属性中是否具有指定的属性
• isPrototypeOf(): 被用来检查判断一个对象是否存在于另一个对象的原型链上。
• Object.create(): 创建对象。

参考阅读

• JavaScript深入之new的模拟实现
• js new一个对象的过程，实现一个简单的new方法
• js中new一个实例对象的过程
• JS new一个对象的过程
• JavaScript new对象的四个过程