1、代碼的層次結(jié)構(gòu)更清晰
2、更容易復(fù)用
3、更容易維護(hù)
4、更容易擴(kuò)展

__proto__   
屬性原型鏈,實(shí)例對(duì)象與原型之間的連接，叫做原型鏈。

對(duì)象身上只有 __proto__ 構(gòu)造函數(shù)身上有prototype也有 __proto__

constructor  
返回創(chuàng)建實(shí)例對(duì)象的構(gòu)造函數(shù)的引用,每個(gè)原型都會(huì)自動(dòng)添加constructor屬性,for..in..遍歷原型是找不到這個(gè)屬性的。

var a = new A();
console.log(a.constructor == A) //true

hasOwnProperty  
可以用來判斷某屬性是不是這個(gè)構(gòu)造函數(shù)的內(nèi)部屬性（不包括繼承的）

語法： obj.hasOwnProperty(prop) 返回Boolean

function A (){
    this.b = 1;
}
var a = new A();
console.log(a.hasOwnProperty("b"));  //打印true 
console.log(a.hasOwnProperty("toString")); //toString是繼承屬性 打印 false
console.log(a.hasOwnProperty("hasOwnProperty")); //同上，打印false

instanceof  
二元運(yùn)算符,用來檢測(cè)一個(gè)對(duì)象在其原型鏈中是否存在一個(gè)構(gòu)造函數(shù)的 prototype 屬性。

語法： object instanceof constructor 即檢測(cè) constructor.prototype 是否存在于參數(shù) object 的原型鏈上。

// 定義構(gòu)造函數(shù)
function C(){} 
function D(){} 

var o = new C();
o instanceof C; // true，因?yàn)?Object.getPrototypeOf(o) === C.prototype
o instanceof D; // false，因?yàn)?D.prototype不在o的原型鏈上
o instanceof Object; // true,因?yàn)镺bject.prototype.isPrototypeOf(o)返回true
C.prototype instanceof Object // true,同上

toString  
返回一個(gè)表示該對(duì)象的字符串

作用：
1、進(jìn)行數(shù)字之間的進(jìn)制轉(zhuǎn)換

例如：var num = 255;
alert( num.toString(16) ); //結(jié)果就是"ff"

2、利用toString做類型的判斷

例如：var arr = [];
alert( Object.prototype.toString.call(arr) == "[object Array]" );     彈出true
Object.prototype.toString.call()    得到是類似于"[object Array]"  "[object Object]"

假如我們有一個(gè)對(duì)象是狗的原型，這個(gè)原型有“名字”和“顏色”兩個(gè)屬性。

var Dog = {
    name: "",
    color: ""
}

根據(jù)這個(gè)原型對(duì)象，我們要生成一個(gè)實(shí)例對(duì)象如下

var hashiqi = {}; //創(chuàng)建空對(duì)象，之后根據(jù)原型對(duì)象的相應(yīng)屬性賦值
hashiqi.name = "hashiqi";
hashiqi.color = "blackandwhite";

缺點(diǎn)：
1、如果要生成多個(gè)實(shí)例對(duì)象，要重復(fù)寫多次。
2、實(shí)例和原型之間沒有聯(lián)系。

上面原始模式有一個(gè)缺點(diǎn)是要很麻煩的寫很多重復(fù)的代碼，我們可以寫一個(gè)函數(shù)來解決代碼重復(fù)的問題。

function Dog(name, color) {
    var obj = {};
    obj.name = name;
    obj.color = color;
    return obj;
}

var hashiqi = Dog("hashiqi", "blackandwhite");
var jinmao = Dog("jinmao", "yellow");

這種方式只是解決了代碼重復(fù)的問題，但是生成的實(shí)例跟原型還是沒有聯(lián)系，而且hashiqi和jinmao也沒有聯(lián)系，不能反映出他們是同一個(gè)原型對(duì)象的實(shí)例。

用來創(chuàng)建對(duì)象的函數(shù)，叫做構(gòu)造函數(shù)，其實(shí)就是一個(gè)普通函數(shù)，但是默認(rèn)函數(shù)名首字母大寫，對(duì)構(gòu)造函數(shù)使用new運(yùn)算符，就能生成實(shí)例，并且this變量會(huì)綁定在實(shí)例對(duì)象上。

function Dog(name, color) {
    this.name = name;
    this.color = color;
}

var hashiqi = new Dog("hashiqi", "blackandwhite");
var jinmao = new Dog("jinmao", "yellow");
console.log(hashiqi.name); //hashiqi
console.log(jinmao.name); //jinmao

hasiqi 和 jinmao有一個(gè)共同的構(gòu)造函數(shù) hashiqi.constructor === jinmao.constructor 是true

有以下幾種方法可以驗(yàn)證原型對(duì)象與實(shí)例對(duì)象的關(guān)系：

hashiqi instanceof Dog; // true

Object.getPrototypeOf(hashiqi) === Dog.prototype // true

Dog.prototype.isPrototypeOf(hashiqi) // true

缺點(diǎn)：
構(gòu)造函數(shù)解決了代碼重復(fù)和實(shí)例與原型之間的聯(lián)系，但是存在一個(gè)浪費(fèi)內(nèi)存的問題。比如遠(yuǎn)行對(duì)象有一些不變的屬性和通用的方法，這樣沒生成一個(gè)實(shí)例，都必須為重復(fù)的東西多占一些內(nèi)存。

擴(kuò)展

我們可以嘗試實(shí)現(xiàn)new運(yùn)算符的邏輯如下：

function New(func) {
    var obj = {};

    //判斷構(gòu)造函數(shù)是否存在原型，如果有實(shí)例的__proto__屬性就指向構(gòu)造函數(shù)的prototype
    if(func.prototype !== undefined) {
        obj.__proto__ = func.prototype;
    }

    // 模擬出構(gòu)造函數(shù)內(nèi)部this指向?qū)嵗倪^程，注意，我們會(huì)拿到構(gòu)造函數(shù)的返回值
    var res = func.apply(obj, Array.from(arguments).slice(1));

    // 正常構(gòu)造函數(shù)是不需要顯式聲明返回值的，默認(rèn)的返回值是生成的實(shí)例，但是一旦在構(gòu)造函數(shù)中return 一個(gè)不是對(duì)象或者函數(shù)，就會(huì)改變構(gòu)造函數(shù)的默認(rèn)的返回值，其他的類型是不變的
    if(typeof res === "object" && res !== null || typeof res === "function") {
        return res;
    }

    return obj;
}

var taidi = New(Dog, "taidi", "gray");

注意：
正常的構(gòu)造函數(shù)是不需要自己寫return 的，如果寫了，當(dāng)return的時(shí)候，如果是后面為簡(jiǎn)單類型，那么返回值還是構(gòu)造函數(shù)生成的實(shí)例。如果return為對(duì)象類型或者函數(shù)，那么返回的就是return后面的這個(gè)對(duì)象或者函數(shù)。

每一個(gè)構(gòu)造函數(shù)都有 prototype 屬性，這個(gè)屬性指向的是一個(gè)對(duì)象，這個(gè)對(duì)象的所有屬性和方法，都會(huì)被構(gòu)造函數(shù)的實(shí)例繼承。
基于這個(gè)屬性，我們就可以有選擇性的將一些通用的屬性和方法定義到 prototype 上，每一個(gè)通過 new 生成的實(shí)例，都會(huì)有一個(gè) __proto__ 屬性指向構(gòu)造函數(shù)的原型即 prototype ，這樣我們定義到構(gòu)造函數(shù)原型對(duì)象的屬性和方法，就會(huì)被每一個(gè)實(shí)例訪問到，從而變成公用的屬性和方法。

function Dog(name, color) {
    this.name = name;
    this.color = color;
}
Dog.prototype.say = function () {
    console.log("汪汪");
}

var hashiqi = new Dog("hashiqi", "blackandwhite");
var jinmao = new Dog("jinmao", "yellow");

hashiqi.say(); // 汪汪
jinmao.say(); // 汪汪
console.log(hashiqi.say === jinmao.say); // true

注意：當(dāng)實(shí)例對(duì)象和原型對(duì)象有相同的屬性或者方法時(shí)，會(huì)優(yōu)先訪問實(shí)例對(duì)象的屬性或方法。

使用call或apply方法，將父對(duì)象的構(gòu)造函數(shù)綁定在子對(duì)象上。

//父類
function Animal() {
    this.species = "動(dòng)物";
}

//子類
function Dog(name, color) {
    Animal.call(this);
    this.name = name;
    this.color = color;
}

var hashiqi = new Dog("hashiqi", "blackandwhite");
console.log(hashiqi.species); //動(dòng)物

子類的prototype指向父類生成實(shí)例

function Animal() {};
Animal.prototype.species = "動(dòng)物";
function Dog(name, color) {
    this.name = name;
    this.color = color;
}
Dog.prototype = new Animal();
//只要是prototype被完全覆蓋，都得重寫constructor。
Dog.prototype.constructor = Dog;
var hashiqi = new Dog("hashiqi", "blackandwhite");

缺點(diǎn)： 每一次繼承都得生成一個(gè)父類實(shí)例，比較占內(nèi)存。

利用空對(duì)象作為中介

function Animal() {}
Animal.prototype.species = "動(dòng)物";
function Dog(name, color) {
    this.name = name;
    this.color = color;
}
//Middle生成的是空實(shí)例(除了__proto__)，幾乎不占內(nèi)存
function Middle() {}
Middle.prototype = Animal.prototype;
Dog.prototype = new Middle();
Dog.prototype.constructor = Dog;
var hashiqi = new Dog("hashiqi", "blackandwhite");
console.log(hashiqi.species);

幾個(gè)月前在 CSDN 面試的時(shí)候，我說了這種繼承方式，面試官就糾結(jié)這樣修改子類的prototype不會(huì)影響父類么？是真的不會(huì)影響的，因?yàn)樽宇惖膒rototype是指向Middle構(gòu)造函數(shù)生成的實(shí)例，如果真的有心要改，得Dog.prototype.__proto__這么著來改。

Object.create()

function Animal() {}
Animal.prototype.species = "動(dòng)物";
function Dog(name, color) {
    this.name = name;
    this.color = color;
}
Dog.prototype = Object.create(Animal.prototype,{
    constructor: {
        value: Dog
    }
})

var hashiqi = new Dog("hashiqi","blackandwhite");
console.log(hashiqi.species); //動(dòng)物

淺拷貝

function Animal() {}
Animal.prototype.species = "動(dòng)物";
function Dog(name, color) {
    this.name = name;
    this.color = color;
}
function extend(child, parent) {
    var c = child.prototype;
    var p = parent.prototype;
    for(key in p) {
        c[key] = p[key]
    }
}
extend(Dog, Animal);
var hashiqi = new Dog("hashiqi", "blackandwhite");
console.log(hashiqi.species) // 動(dòng)物

深拷貝

function deepCopy(parent, child) {
    var child = child || {};
    for(key in parent) {
        if(typeof parent[key] === "object") {
            child[key] = parent[key].constructor === Array?[]:{};
            deepCopy(parent[key],child[key])
        } else {
            child[key] = parent[key];
        }
    }
    return child;
}

var method = "say";
class Dog {
    constructor (name,color) {
        this.name = name;
        this.color = color;
    }
 ? ?//注意，兩個(gè)屬性之間跟對(duì)象不同，不要加逗號(hào)，并且類的屬性名可以使用變量或者表達(dá)式，如下
    [method] () {
        console.log("汪汪");
    }
}
console.log(typeof Dog); // function 類的數(shù)據(jù)類型就是函數(shù)
console.log(Dog === Dog.prototype.constructor); // true 類本身就是構(gòu)造函數(shù)

var hashiqi = new Dog("hashiqi", "blackandwhite");
console.log(hashiqi.color); // blackandwhite

//上面采用表達(dá)式聲明的類的屬性可以用一下兩種方式調(diào)用
hashiqi[method](); // 汪汪
hashiqi.say(); // 汪汪

new Dog("hashiqi","blackandwhite")
class Dog {
    constructor (name,color) {
        this.name = name;
        this.color = color;
    }
}
//Uncaught ReferenceError: Dog is not defined
//上面代碼，Dog類使用在前，定義在后，因?yàn)镋S6不會(huì)把類的聲明提升到代碼頭部，所以報(bào)錯(cuò)Dog沒有定義。

class Dog {
    constructor (name,color) {
        this.name = name;
        this.color = color;
    }
}
Dog(); // Uncaught TypeError: Class constructor Dog cannot be invoked without "new"

constructor  構(gòu)造函數(shù)

class Dog {
    constructor (name,color) {
        this.name = name;
        this.color = color;
    }
    //定義了兩個(gè)constructor，所以會(huì)報(bào)錯(cuò)
    constructor () {
        
    }
}
new Dog("hashiqi", "blackandwhite")
//Uncaught SyntaxError: A class may only have one constructor

Class表達(dá)式

const Hashiqi = class Dog {
    constructor (name,color) {
        this.name = name;
        this.color = color;
    }
    getName () {
        //此處的Dog就是Dog構(gòu)造函數(shù)，在表達(dá)式形式中，只能在構(gòu)造函數(shù)內(nèi)部使用
        console.log(Dog.name);
    }
}
var hashiqi = new Hashiqi("hashiqi", "blackandwhite"); // 真正的類名是Hashiqi
var jinmao = new Dog("jinmao", "yellow"); // 會(huì)報(bào)錯(cuò)，Dog沒有定義

const Hashiqi = class {
    constructor (name,color) {
        this.name = name;
        this.color = color;
    }
}
var hashiqi = new Hashiqi("hashiqi", "blackandwhite");

實(shí)例方法和靜態(tài)方法  
實(shí)例化后的對(duì)象才可以調(diào)用的方法叫做實(shí)例方法。  
直接使用類名即可訪問的方法，稱之為“靜態(tài)方法”

class Dog {
    constructor (name,color) {
        this.name = name;
        this.color = color;
    }
    static say () {
        console.log("汪汪");
    }
}
Dog.say(); //汪汪

extends

class Dog extends Animal{}

class A extends Object {}
console.log(A.__proto__ === Object) //true
console.log(A.prototype.__proto__ == Object.prototype) //true
//這種情況下，A其實(shí)就是構(gòu)造函數(shù)Object的復(fù)制，A的實(shí)例就是Object的實(shí)例。

class A {}

console.log(A.__proto__ === Function.prototype) // true
console.log(A.prototype.__proto__ === Object.prototype) // true
//這種情況下，A作為一個(gè)基類（即不存在任何繼承），就是一個(gè)普通函數(shù)，所以直接繼承Funciton.prototype。
//但是，A調(diào)用后返回一個(gè)空對(duì)象（即Object實(shí)例），所以A.prototype.__proto__指向構(gòu)造函數(shù)（Object）的prototype屬性。

class A extends null {}
console.log(A.__proto__ === Function.prototype) //true
console.log(A.prototype) //只有一個(gè)constructor屬性，沒有__proto__屬性
這種情況與第二種情況非常像。A也是一個(gè)普通函數(shù)，所以直接繼承Funciton.prototype。
但是，A調(diào)用后返回的對(duì)象不繼承任何方法，所以沒有__proto__這屬性

super

class Animal {
    constructor (name) {
        this.name = name;
        this.species = "動(dòng)物";
    }
    say (){
        return this.species;
    }
}
class Dog extends Animal{
    constructor (name, color) {
        // 只要是自己在子類中定義constructor，必須調(diào)用super方法，否則新建實(shí)例會(huì)報(bào)錯(cuò)
        //super作為函數(shù)調(diào)用，只能用在子類的constructor中
        super(name);
        this.color = color;
    }
    getInfo () {
        //普通方法中，super指向父類的原型對(duì)象
        console.log(super.say()+": "+this.name +","+this.color);
    }
}
var hashiqi = new Dog("hashiqi", "blackandwhite");
hashiqi.getInfo() //動(dòng)物：hashiqi,balckandwhite