Javascript创建对象的几种方式对比

/**
 * 通过字面量方法创建对象
 * 所有的属性和方法都挂载在实例上
 * 构造器: Object (objPerson.__proto__.constructor)
 */
const objPerson = {
  name: "小明",
  sex: "男",
  age: 10,
  sayHello() {
    return this.name;
  },
};
console.group("字面量方法");
console.log("实例：", objPerson);
console.groupEnd();

/**
 * 通过Object.create方法创建对象，实例本身是一个空对象
 * 所有的属性和方法都挂载在此实例的__proto__上
 * 构造器: Object (oPerson.__proto__.__proto__.constructor)
 */
const oPerson = Object.create({
  name: "小明",
  sex: "男",
  age: 10,
  sayHello() {
    return this.name;
  },
});
console.group("Object.create");
console.log("实例：", oPerson);
console.groupEnd();

/**
 * 通过类方法创建对象
 * 通过 = 赋值的属性或方法挂载在实例上
 * 通过()创建的方法绑定在此类的原型对象上
 * 通过重新定义此类的原型对象可更改此类的原型对象
 * 构造器: ClsPerson (clsPerson.__proto__.constructor)
 */
class ClsPerson {
  // 绑定到实例对象
  name = undefined;
  // 绑定到实例对象
  sex = undefined;
  // 绑定到实例对象
  sayHello = function () {
    console.log(this.name);
  };
  // 构造器函数
  constructor({ name, sex }) {
    this.name = name;
    this.sex = sex;
  }
  // 绑定到原型对象
  sayName() {
    console.log(`Hello, My name is ${this.name}`);
  }
}
ClsPerson.prototype.age = 10;
const clsPerson = new ClsPerson({ name: "小明", sex: "男" });
console.group("类方法");
console.log("实例： ", clsPerson);
console.groupEnd();

/**
 * 通过构造方法创建对象
 * 通过this挂载的属性或者方法会挂载到实例上
 * 通过原型挂载的属性或方法会挂载到原型上
 *
 */
function FnPerson({ name, sex }) {
  // 以下属性都在实例对象
  this.name = name;
  this.sex = sex;
  this.sayHello = function () {
    console.log(this.name);
  };
}
// 以下属性都在原型对象
FnPerson.prototype.sayName = function () {
  console.log(`Hello, My name is ${this.name}`);
};
FnPerson.prototype.age = 10;
const fnPerson = new FnPerson({ name: "小明", sex: "男" });
console.group("构造方法");
console.log("实例：", fnPerson);
console.groupEnd();

/**
 * 通过此方法创建的对象和字面量创建对象的大致一样
 * 不过只能有属性，不能有方法，不再进行讨论
 */
const jPerson = JSON.parse('{ "name": "小明", "sex": "男", "age": 10 }');
console.group("JSON.parse");
console.log("实例： ", jPerson);
console.groupEnd();

/**
 * 总结:
 *  无论通过何种方法创建对象
 *  此对象都会有实例和__proto__
 *  不同的创建方式对于属性或方法绑定的对象不同，要么是实例，要么是原型对象
 * 共享权:
 *  定义在实例对象的属性或方法此实例独享
 *  定义在原型对象上的属性或方法所有实例共享
 */