摘要：歡迎關(guān)注前端小謳的，閱讀更多原創(chuàng)技術(shù)文章用構(gòu)造函數(shù)，生成對(duì)象實(shí)例使用構(gòu)造函數(shù)，并且構(gòu)造函數(shù)后臺(tái)會(huì)隱式執(zhí)行創(chuàng)建對(duì)象將構(gòu)造函數(shù)的作用域給新對(duì)象，即創(chuàng)建出的對(duì)象，函數(shù)體內(nèi)的代表出來(lái)的對(duì)象執(zhí)行構(gòu)造函數(shù)的代碼返回新對(duì)象后臺(tái)直接返回用改寫(xiě)上述代碼通過(guò)關(guān)

歡迎關(guān)注前端小謳的github，閱讀更多原創(chuàng)技術(shù)文章
用構(gòu)造函數(shù)，生成對(duì)象實(shí)例：

使用構(gòu)造函數(shù)，并且new 構(gòu)造函數(shù)(), 后臺(tái)會(huì)隱式執(zhí)行new Object() 創(chuàng)建對(duì)象
將構(gòu)造函數(shù)的作用域給新對(duì)象，（即new Object() 創(chuàng)建出的對(duì)象），函數(shù)體內(nèi)的this代表new Object() 出來(lái)的對(duì)象
執(zhí)行構(gòu)造函數(shù)的代碼
返回新對(duì)象（ 后臺(tái)直接返回）

function Person1(name, age) {
  this.name = name
  this.age = age
}
Person1.prototype.say = function () {
  return "My name is " + this.name + ", I"m " + this.age + " years old."
}
var obj = new Person1("Simon", 28);
console.log(obj.say()); // My name is Simon, I"m 28 years old.

用class改寫(xiě)上述代碼：

通過(guò)class關(guān)鍵字定義類(lèi)，使得在對(duì)象寫(xiě)法上更清晰，讓javascript更像一種面向?qū)ο蟮恼Z(yǔ)言
在類(lèi)中聲明方法的時(shí)，不可給方法加function關(guān)鍵字

class Person2 {
  // 用constructor構(gòu)造方法接收參數(shù)
  constructor(name, age) {
    this.name = name; // this代表的是實(shí)例對(duì)象
    this.age = age;
  }
  // 類(lèi)的方法，此處不能加function
  say() {
    return "My name is " + this.name + ", I"m " + this.age + " years old."
  }
}
var obj = new Person2("Coco", 26);
console.log(obj.say()); // My name is Coco, I"m 26 years old.

ES6中的類(lèi)，實(shí)質(zhì)上就是一個(gè)函數(shù)
類(lèi)自身指向的就是構(gòu)造函數(shù)
類(lèi)其實(shí)就是構(gòu)造函數(shù)的另外一種寫(xiě)法

console.log(typeof Person2); // function
console.log(Person1 === Person1.prototype.constructor); // true
console.log(Person2 === Person2.prototype.constructor); // true

構(gòu)造函數(shù)的prototype屬性，在ES6的class中依然存在：

// 構(gòu)造1個(gè)與類(lèi)同名的方法 -> 成功實(shí)現(xiàn)覆蓋
Person2.prototype.say = function () {
  return "證明一下：My name is " + this.name + ", I"m " + this.age + " years old."
}
var obj = new Person2("Coco", 26);
console.log(obj.say()); // 證明一下：My name is Coco, I"m 26 years old.

// 通過(guò)prototype屬性對(duì)類(lèi)添加方法
Person2.prototype.addFn = function () {
  return "通過(guò)prototype新增加的方法addFn"
}
var obj = new Person2("Coco", 26);
console.log(obj.addFn()); // 通過(guò)prototype新增加的方法addFn

通過(guò)Object.assign方法來(lái)為對(duì)象動(dòng)態(tài)增加方法：

Object.assign(Person2.prototype, {
  getName: function () {
    return this.name;
  },
  getAge: function () {
    return this.age;
  }
})
var obj = new Person2("Coco", 26);
console.log(obj.getName()); // Coco
console.log(obj.getAge()); // 26

constructor方法是類(lèi)的構(gòu)造函數(shù)的默認(rèn)方法
new生成對(duì)象實(shí)例時(shí)，自動(dòng)調(diào)用該方法

class Box {
  constructor() {
    console.log("自動(dòng)調(diào)用constructor方法"); // 實(shí)例化對(duì)象時(shí)，該行代碼自動(dòng)執(zhí)行
  }
}
var obj = new Box();

若沒(méi)有定義constructor方法，將隱式生成一個(gè)constructor方法：

即使沒(méi)有添加構(gòu)造函數(shù)，構(gòu)造函數(shù)也是存在的
constructor方法默認(rèn)返回實(shí)例對(duì)象this
可以指定constructor方法返回一個(gè)全新的對(duì)象，讓返回的實(shí)例對(duì)象不是該類(lèi)的實(shí)例對(duì)象

class Text1 {
  constructor() {
    this.text = "這是一段Text";
  }
}
class Text2 {
  constructor() {
    return new Text1(); // 返回一個(gè)全新的對(duì)象
  }
}
var obj = new Text2()
console.log(obj.text); // 這是一段Text

實(shí)例屬性：constructor中定義的屬性，即定義在this對(duì)象上
原型屬性：constructor外聲明的屬性，即定義在class上

hasOwnProperty() 函數(shù)，判斷屬性是否為實(shí)例屬性 -> true or false
in操作符， 判斷對(duì)象能否訪(fǎng)問(wèn)給定屬性 -> true or false（與該屬性存在于實(shí)例/原型中無(wú)關(guān)）

class Text3 {
  // 實(shí)例屬性，定義在this對(duì)象上
  constructor(text1, text2) {
    this.text1 = text1
    this.text2 = text2
  }
  // 原型屬性，定義在class上
  text3() {
    return text1 + text2
  }
}
var obj = new Text3("123", "234")
console.log(obj.hasOwnProperty("text1")); // true
console.log(obj.hasOwnProperty("text2")); // true
console.log(obj.hasOwnProperty("text3")); // false
console.log("text1" in obj); // true
console.log("text2" in obj); // true
console.log("text3" in obj); // true
console.log("text4" in obj); // false

類(lèi)的所有實(shí)例共享一個(gè)原型對(duì)象， 它們的原型都是Person.prototype， 所以proto屬性是相等的

class Text4 {
  constructor(text1, text2) {
    this.text1 = text1;
    this.text2 = text2;
  }
  text3() {
    return text1 + text1;
  }
}
// text1與text2都是Text4的實(shí)例 -> 它們的__proto__都指向Text4的prototype
var text1 = new Text4("1234", "5678");
var text2 = new Text4("4321", "8765");
console.log(text1.__proto__ === text2.__proto__); // true

通過(guò)proto來(lái)為類(lèi)增加方法：

使用實(shí)例的proto屬性改寫(xiě)原型
會(huì)改變Class的原始定義，影響到所有實(shí)例，不推薦使用

class Num {
  constructor(num1, num2) {
    this.num1 = num1;
    this.num2 = num2;
  }
  sum() {
    return num1 + num2;
  }
}
var num1 = new Num(20, 78);
var num2 = new Num(40, 96);
num1.__proto__.minus = function () {
  return this.num2 - this.num1;
}
console.log(num1.minus()); // 76 -> 改變了class的原始定義，為class新增原型屬性minus
console.log(num2.minus()); // 20 -> num2和num1共享原型對(duì)象Num，可以調(diào)用原型對(duì)象的minus方法

class不存在變量提升，必須先定義再使用：

ES6不會(huì)把class的聲明提升到代碼頭部2
ES5存在變量提升, 可以先使用再定義

//ES5可以先使用再定義，存在變量提升
new A()
function A() {}

//ES6不能先使用再定義,不存在變量提升（報(bào)錯(cuò)）
new B() // B is not defined
class B {}