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

先看一段代码。

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())

几个属性方法

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

Samgao0312 / Blog

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

new 一个对象的过程

实现我们自己的 new 函数

几个属性方法

参考阅读