JS 底层探究之普通函数和构造函数详解

function getUser (name) {
  retrun {name};
}

// 构造函数（大驼峰命名）
function Person(name, age) {
  // 自身属性
  this.name = name;
  this.age = age;
}

// 1. 先定义一个构造函数
function Person(name, age) {
  // 步骤3执行时，this 会变成我们创建的空对象
  this.name = name;
  this.age = age;
}
// ------------------------------
// 核心：手写模拟 new 的4大步骤
// ------------------------------
function myNew(constructor, ...args) {
  // 步骤1：创建一个空对象 {}
  const obj = {};
  // 步骤2：空对象的 __proto__ 指向构造函数的 prototype
  obj.__proto__ = constructor.prototype;
  // 步骤3：执行构造函数，让 this 指向这个空对象
  // call 的作用：把构造函数里的 this 改成 obj
  const result = constructor.call(obj, ...args);
  // 步骤4：如果构造函数没有返回对象，就返回我们创建的 obj
  if (result && typeof result === "object") {
    return result;
  } else {
    return obj;
  }
}
// ------------------------------
// 测试使用
// ------------------------------
const p1 = myNew(Person, "小明", 18);
console.log(p1);       // Person { name: '小明', age: 18 }
console.log(p1.name);  // 小明

const a = new Person("XIAO MIN", 20);

const b = new Person("XIAO HUA", 29)
console.log(a); // Person { name: 'XIAO MIN', age: 20 }
console.log(b); // Person { name: 'XIAO HUA', age: 29 }

console.log(a.name); // XIAO MIN
Person.prototype.pName = "Person"
console.log(a.pName); // Person

console.log(b.name) // XIAO HUA
console.log(b.pName) // Person