JS : Object.create() 和 new 函数的内部实现原理及区别

Object.create() 和 new 都可以通过对象创建其实例，他们有什么不同么？？？

纳尼(⊙o⊙)？

首先我们通过一个荔枝看看object.create() 和 new 的区别 ：

let Per = function (name = '保密', age = '永远18') {
  this.name = name
  this.age = age
}
Per.prototype.sayName = function () {
  return `my name is ${this.name}, this year ${this.age}`
}

let p1 = new Per('鲁大愚', 25)
let p2 = new Per('罗大头', 18)
let p3 = Object.create(Per)

console.log(p1.age) // 25
console.log(p2.age) // 18
console.log(p3.age) // undefined

console.log(p1.sayName()) // my name is 鲁大愚, this year 25
// console.log(p3.sayName()) // Uncaught TypeError: p3.sayName is not a function

console.log(p1.__proto__)
// sayName: ? ()
// constructor: ? (name = '保密', age = '永远18')
// __proto__: Object

console.log(p3.__proto__)
// ? (name = '保密', age = '永远18') {
//   this.name = name
//   this.age = age
// }
console.log(p1.__proto__ == p2.__proto__) // true
console.log(p1.__proto__ == Per.prototype) // true
console.log(p1.__proto__.constructor == Per) // true
console.log(p3.__proto__ == Per) // true
console.log(p1.__proto__.constructor == p3.__proto__) // true

通过以上荔枝我们至少可以看到两处不同：

1. Object.create 创建的实例是取不到构造对象（构造函数）原型上的方法的
2. Object.create 创建的实例的__proto__ 指向构造对象（构造函数），而 new操作符创建的实例的__proto__指向构造对象（构造函数）的原型

简单点，

说话的方式简单点，

实现的过程请省略 。 。 。 。 。

这特么，这是搞毛子哟

如同当头一棒，这个问题击穿了我的底裤，彼时的我百撕不得其姐，羞愧难当，就这么猝不及防的扯下了我的遮羞布，让偶红果果的站在人民广场接受群众的观光

纵然是齐眉举案，到底意难平

那么此刻就让我们在这个美好的夜晚一层一层扒光她 · · · · · ·

首先，让我们手动实现 new

let myNew = function (per) {
  let args = [].slice.call(arguments, 1)
  // 创建一个新对象
  let o = {}
  // 将对象的原型设置为构造函数的原型
  o.__proto__ = per.prototype
  // 归整构造函数的指向
  per.prototype.constructor = per
  // 把构造函数的this指向当前对象并且执行
  per.apply(o, args)
  // 返回新对象
  return o
}

let myp1 = myNew(Per, '鲁小愚', '23')
let myp2 = myNew(Per, '罗小头', '19')
console.log(myp1.sayName()) // my name is 鲁小愚, this year 23
console.log(myp1.__proto__ == myp2.__proto__) // true
console.log(myp1.__proto__ == Per.prototype) // true
console.log(myp1.__proto__.constructor == Per) // true

一番yunyu后感觉身体被抽空了，但是啊，作为一个好*人，我始终坚信做人不能厚此薄彼， 雨露均沾，甚好甚好 . . . . . .

那么，接下来就让我们摸摸底，看看Object.create() 的面纱下藏着些什么

let obj = {
  name: '鲁大愚',
}
Object.myCreate = function (per, props = {}) {
  function F() {}
  F.prototype = per
  Object.defineProperties(per, props)
  return new F()
}

var myCreate1 = Object.myCreate(obj, { address: { value: '陕西' } })
console.log(myCreate1.name, myCreate1?.address) // 鲁大愚 陕西
console.log(myCreate1.__proto__ == obj) // true

套路，套路，这特么都是套路 · · · ·