深度刨析 JavaScript 模拟面向对象的内部机制

let obj = {
  name: "jcLee95", 
  birthday: "07-30"
};

let obj = new Object();
obj.name = "jcLee95";
obj.birthday = "07-30";

let obj = Object.create({
  name: "jcLee95",
  birthday: "07-30"
});

class Person {
  constructor(name, birthday) {
    this.name = name;
    this.birthday = birthday;
  }
}

let jack = new Person("jcLee95", "07-30");
console.log(jack);

Person { name: 'jcLee95', birthday: '07-30' }

// 相当于 class 语法中的 constructor 函数。
function Person(name, birthday) {
  this.name = name;
  this.birthday = birthday;
}

let jack = new Person("jcLee95", "07-30");
console.log(jack);

Person { name: 'jcLee95', birthday: '07-30' }

// java 中的构造方法
public class Person{
    String name;
    String birthday;
    // 构造方法与类同名
    public Person(String name, String birthday){
        this.name = name;
        this.birthday = birthday;
    }
}

function Person() {}
Person.prototype.name = "jcLee95";
Person.prototype.birthday = "07-30";
console.log(Person.prototype);

{ name: 'jcLee95', birthday: '07-30' }

function Person() {
  console.log("this 1 =",this)
}
Person();
console.log("this 2 = ",this);

// 构造调用中的 this ，指向构造函数数所构造的类实例，它是一个在构造调用过程中创建的新的对象
function Person(name, birthday) {
  this.name = name;
  this.birthday = birthday;
  console.log(this);
}
new Person("jcLee95", "07-30");

// 使用 ES6 class 语法糖 的等效方式
class Person {
  constructor(name, birthday) {
    this.name = name;
    this.birthday = birthday;
    console.log(this);
  }
}
new Person("jcLee95", "07-30");

Person { name: 'jcLee95', birthday: '07-30' }

// `myNew(cstrct, ...params)` be equal to `new cstrct(...params)`
function myNew(cstrct, ...params){
  // 1. create a new JavaScript object obj
  const obj = {};
  // 2. Add the attribute `__proto__` to the newly created object (obj),
  // And link this property to the prototype object of the constructor.；
  obj.__proto__ = cstrct.prototype; 
  // 3. Take the new object (obj) as the context of this;
  // 3.1 Temporarily hang the constructor on obj.__proto__
  obj.__proto__._func = cstrct;
  // 3.2 Execute this constructor to get "this"
  let _ = obj._func(...params);
  // 3.3 Delete the temporarily mounted attribute `_func` (otherwise this attribute will be added to the instance)
  delete obj.__proto__._func
  // 4. If the function does not return an object, that is, null or undefined, it returns this; otherwise, it returns the object.
  return _ instanceof Object ? _ : obj;
}

// A function used as a constructor
function Person(name, birthday) {
    this.name = name;
    this.birthday = birthday;
    console.log(this);
}
// 构造调用，与使用 new 返回的效果完全一样
myNew(Person, "jcLee95", "07-30")

Person { name: 'jcLee95', birthday: '07-30' }

// java 中的继承
// 父类：动物类
public class Animal { 
    private String name;
    // 动物类（作为父类）的构造函数
    public Animal(String myName) { 
        name = myName; 
    } 
    public void eat(){ 
        System.out.println(name+"在干饭"); 
    }
    public void sleep(){
        System.out.println(name+"正在睡觉");
    }
}
// 子类：人类
public class Human extends Animal {
    private String name;
    // 人类（作为子类）的构造函数
    public Human(name){
        // 调用父类的构造函数
        super(name);
    }
}

// JavaScript 中的继承（使用ES6 class语法）
// 父类：动物类
class Animal { 
  // 动物类（作为父类）的构造函数
  Animal(name) { 
    this.name = name; 
  }
  eat(){ 
    console.log(this.name+"在干饭"); 
  }
  sleep(){
      console.log(this.name+"正在睡觉");
    }
  }
// 子类：人类
class Human extends Animal {
  // 人类（作为子类）的构造函数
  Human(String name){
    // 调用父类的构造函数
    super(name);
  }
}

class Human extends Animal {
  // 显示声明了子类（派生类）的构造函数，但没有调用 super()
  constructor(name){
  }
}

ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

// 动物类
public class Animal { 
    private String name;
    public Animal(String myName) { 
        name = myName; 
    } 
    public void eat(){ 
        System.out.println(name+" is eating!");  
    }
    public void sleep(){
        System.out.println(name+"is sleeping!"); 
    }
}
// 人类 继承于 动物类，可以获得 Animal 类的成员变量、方法、内部类
public class Human extends Animal {;
    public Human(String name){
        super(name);
    }
}
public class Run{
    public static void main(String[] args) {
        Human a = new Human("Human");
        // 调用人类从动物类继承过来的 eat 方法
        a.eat();
    }
}

class Animal{
    constructor(name){
        this.name = name;
    }
    eat(){
        console.log(this.name + " is eating!")
    }
    sleep(){
        console.log(this.name + " is sleeping!")
    }
}
class Human extends Animal{
    constructor(name,nationality){
        super(name);
        this.nationality = nationality;
    }
    think(){
        console.log(this.name + " is thinking!")
    }
}
let person = new Human("jcLee95", "China");
console.log(person);
person.eat();
person.sleep();
person.think();

function Animal(name){
  this.name= name;
}

let AnimalPrototypes = {
  eat:function() {
    console.log(this.name + " is eating!")
  },
  sleep:function() {
    console.log(this.name + " is sleeping!")
  }
}
for(let i in AnimalPrototypes) {
  Animal.prototype[i] = AnimalPrototypes[i];
}

Animal.prototype = {
  eat:function() {
    console.log(this.name + " is eating!")
  },
  sleep:function() {
    console.log(this.name + " is sleeping!")
  }
}

Animal { name: 'animal_instance' }

constructor(name,nationality){
  super(name);
  this.nationality = nationality;
}

function Human(super_instance, name, nationality){
  super_instance._superConstructor.call(this,name);
  delete super_instance.__proto__._superConstructor; 
  this.nationality = nationality;
}

let Human_PropMembers = {
  think : function(){
    console.log(this.name + " is thinking!")
  }
}

function extendsNew(superConstructor, subConstructor, superParams, subPatams, subPropMembers) {
  // Used as the super class instance object to be constructed
  const super_instance = {};
  super_instance.__proto__ = superConstructor.prototype;
  // Temporarily mount the parent class constructor
  super_instance.__proto__._superConstructor = superConstructor;
  // The prototype of the subclass constructor is the parent class instance, that is, let the subclass inherit the parent class. 
  // At this time, this instance of the parent class has not been constructed.
  // That is, the parent class constructor is called, and the parent class constructor will be called in the subclass constructor.
  for(let i in super_instance){
    subConstructor.prototype[i] = super_instance[i];
  }
  // An object used as an instance of the subclass to be constructed. 
  const sub_instance = {};
  sub_instance.__proto__ = subConstructor.prototype;
  // Add subclass members to the prototype of constructor.
  for (let i in subPropMembers) {
    subConstructor.prototype[i] = subPropMembers[i];
  }
  // Constructor temporarily hung on subclasses on subclasses
  sub_instance.__proto__._subConstructor = subConstructor; 
  // Execute subclass constructor to complete other things of subclass instance construction.
  // At this time, it should be called in the constructor of the subclass, and the constructor of the parent class, namely `super(...params)`, must be called first.
  // It is temporarily hung on the instance `super_instance` of the parent class, and should be deleted when it is used up.
  let _ = sub_instance._subConstructor(super_instance, ...superParams, ...subPatams); 
  // After the subclass instance is constructed, the constructor is no longer needed on the instance, 
  // so we need to delete the constructor on the subclass instance.
  delete sub_instance.__proto__._subConstructor; 
  return _ instanceof Object ? _ : sub_instance;
}

// by jcLee95 
// https://blog.csdn.net/qq_28550263/article/details/126373011
// ----------------------------- Define Animal class ----------------------------- 
// class Animal's constructor
// Which will be used as superclass's constructor
function Animal(name){
  this.name= name;
}
for(let i in AnimalPrototypes) {
  Animal.prototype[i] = AnimalPrototypes[i];
}
// 不建议直接使用 Animal.prototype = {...} 的方式，因为这样会覆盖掉隐藏在 父类构造器上的 对象名
let AnimalPrototypes = {
  eat:function() {
    console.log(this.name + " is eating!")
  },
  sleep:function() {
    console.log(this.name + " is sleeping!")
  }
}
for(let i in AnimalPrototypes) {
  Animal.prototype[i] = AnimalPrototypes[i];
}
// ----------------------------- Define Human class ----------------------------- 
// class Human's constructor
// Which will be used as subclass's constructor
function Human(super_instance, name, nationality){
  // Execute other operations required for parent class construction first: super(...params);
  // 【强调】：这里必须动态更改父类构造函数的 this 上下文与子类的 this 上下文一致
  //          否则，在父类构造器中绑定到 this 的数据不会指向子类实例！
  // 你可以直接调用 JavaScript 函数的 .call 方法，该方法的第一个参数就是要动态改变的 this 上下文
  super_instance._superConstructor.call(this,name);
  delete super_instance.__proto__._superConstructor; // Delete temporarily mounted superclass constructor.
  // Execute other operations of subclass construction.
  this.nationality = nationality;
}
let Human_PropMembers = {
  think : function(){
    console.log(this.name + " is thinking!")
  }
}
// ----------------------------- Make Human extends Animal ----------------------------- 
// Prototype chain inheritance principle （完全手写继承原理）
function extendsNew(superConstructor, subConstructor, superParams, subPatams, subPropMembers) {
  // 用作待构造的父类实例对象
  const super_instance = {};
  // 父类实例的原型指针指向父类构造函数的原型
  super_instance.__proto__ = superConstructor.prototype;
  // 临时挂载父类构造函数
  super_instance.__proto__._superConstructor = superConstructor;
  // 子类构造器原型 为 父类实例，也就是让子类继承父类，这时候父类的该实例也还没有完成构造，即调用父类构造函数，而父类构造函数将再子类构造函数中调用
  // 不建议使用 subConstructor.prototype = super_instance;，因为这会覆盖掉隐藏在 subConstructor 对象名
  for(let i in super_instance){
    subConstructor.prototype[i] = super_instance[i];
  }
  // 用作待构造的子类实例的对象 
  const sub_instance = {};
  // 子类实例原型指针，指向子类构造器原型
  sub_instance.__proto__ = subConstructor.prototype;
  // 添加子类成员到构造函数的原型
  for (let i in subPropMembers) {
    subConstructor.prototype[i] = subPropMembers[i];
  }
  // 子类实例上临时挂在子类的构造函数
  sub_instance.__proto__._subConstructor = subConstructor; 
  // 执行子类构造函数，完成子类实例构造的其它事情。这个时候，在子类的构造函数中应该调用，且必须先调用父类的构造函数，即 super()，它被临时挂在在父类的实例 super_instance 上，用完应该删除
  let _ = sub_instance._subConstructor(super_instance, ...superParams, ...subPatams); 
  // 构造子类实例后，实例上不再需要构造函数，因此删除子类实例上的构造函数
  delete sub_instance.__proto__._subConstructor; 
  return _ instanceof Object ? _ : sub_instance;
}
let person = extendsNew(Animal, Human, ["jcLee95"], ["China"], Human_PropMembers);
console.log(person);
person.eat();
person.sleep();
person.think();

Human { name: 'jcLee95', nationality: 'China' }
jcLee95 is eating!
jcLee95 is sleeping!
jcLee95 is thinking!