总结对象的创建方式

总结自定义对象的创建方式：直接创建/工厂方式/create/构造函数/es6类语法

1.1 直接创建

let obj1 = { //字面量创建
  name: 'obj1',
  printName: function () {
    console.log(this.name)
  }
};

let obj1_1 = new Object(); //Object()相当于内置的构造函数
obj1_1.name = 'obj1_1'
console.log(Object.getPrototypeOf(obj1) === Object.prototype);// true
console.log(Object.getPrototypeOf(obj1_1) === Object.prototype);// true

1.2 工厂方式

特点：

构造时使用的都是Object，创建的对象都是Object类型，难以区分处多种不同类型的对象。
用类似函数赋值的方式创建对象，提高效率，但会造成重复。

function createId(name, Id, gender) {
  var obj = new Object();
  obj.name = name;
  obj.checkId = function () {
    console.log(this.name)
  }
  return obj;
}

var obj1 = createId("Ed");
var obj2 = createId("昭朝");

obj1.checkId();//Ed
obj2.checkId();//朝昭
// 原型对象是Object
console.log(Object.getPrototypeOf(obj2) === Object.prototype);// true

1.3 Object.create

let objTemp = {
  name: 'objTemp',
  printName: function () {
    console.log(this.name)
  }
}

let obj = Object.create(objTemp); //返回的应该是空实例对象（一开始obj没有name属性）

// 当同名时寻找自己，没有找到那个变量，就找原型对象
console.log('赋值前', obj.name === objTemp.name) //true
obj.printName();//objTemp

obj.name = 'obj'
console.log('赋值后', obj.name === objTemp.name) //false
obj.printName();//obj

console.log(Object.getPrototypeOf(obj) === objTemp);// true

1.4 构造函数

注意：构造函数习惯上首字母大写。

// 构造函数（创建了原型对象？）
// 修改原型，实现共享
function Person(name) {
  this.name = name;
  this.showThis = function () { //方法会重复赋值到实例上,连函数体都重复
    console.log(this)
  }
  this.fun = fun; //实例重复方法，函数体在全局，污染全局就命名空间
  this.showThis();
}

function fun() {
  console.log(this.name)
}
// 挂到原型上实现共享
Person.prototype.showName = function () {
  console.log(this.name)
}
// 调用函数
var per = Person('per'); 	//window
console.log(per);					//undefined（属性相当于挂到window上了）

// 创建类的新实例
let per1 = new Person('per1')   //Person {name: 'per1', showThis: ƒ}
let per2 = new Person('per2')   //Person {name: 'per2', showThis: ƒ}
console.log(Object.getPrototypeOf(per1) === Person.prototype);// true | .__proto__（已弃用）

console.log(per1.showThis === per2.showThis)//false
console.log(per1.fun == per2.fun);//true
console.log(per1.showName === per2.showName)//true