摘要：當去調用一個函數這個時候函數中的就指向創建出來的對象而且函數的的返回值直接就是隱式返回有一個默認慣例就是構造函數的名字首字母大寫。面向對象關注特征和功能。

最近一直在搞基礎的東西，弄了一個持續更新的github筆記，可以去看看，誠意之作（本來就是寫給自己看的……）鏈接地址：Front-End-Basics

此篇文章的地址：面向對象

基礎筆記的github地址：https://github.com/qiqihaobenben/Front-End-Basics ,可以watch,也可以star。

對象是JavaScript的一種數據類型。對象可以看成是屬性的無序集合，每個屬性都是一個鍵值對，屬性名是字符串，因此可以把對象看成是從字符串到值的映射。這種數據結構在其他語言中稱之為“散列(hash)”、“字典(dictionary)”、“關聯數組(associative array)”等。

原型式繼承：對象不僅僅是字符串到值的映射，除了可以保持自有的屬性，JavaScript對象還可以從一個稱之為原型的對象繼承屬性，對象的方法通常是繼承的屬性，這是JavaScript的核心特征。

JavaScript對象是動態的—可以新增屬性也可以刪除屬性，但是他們常用來模擬靜態以及靜態類型語言中的“結構體”

創建對象最簡單的方式就是在JavaScript代碼中使用對象直接量。

var book = {
            "main title": "guide",  //屬性名字里有空格，必須加引號
            "sub-title": "JS",  //屬性名字里有連字符，必須加引號
            for: "development",  //for是關鍵字，不過從ES5開始，作為屬性名關鍵字和保留字可以不加引號
            author: {
                firstname: "David",  //這里的屬性名就都沒有引號
                surname: "Flanagan"
            }
        }

注意： 從ES5開始，對象直接量中的最后一個屬性后的逗號將被忽略。

擴展： [JavaScript中的關鍵字和保留字
](http://blog.mingsixue.com/it/...

new 運算符創建并初始化一個新對象。關鍵字new后跟一個函數調用。這里的函數稱做構造函數(constructor)，構造函數用以初始化一個新創建的對象。JavaScript中的數據類型都包含內置的構造函數。

var o = new Object(); //創建一個空對象，和{}一樣。
var arr = new Array(); //創建一個空數組，和[]一樣。

擴展 1：new

new 是一個一元運算符，專門運算函數的。new后面調用的函數叫做構造函數，構造函數new的過程叫做實例化。
當new去調用一個函數 : 這個時候函數中的this就指向創建出來的對象,而且函數的的返回值直接就是this(隱式返回)
有一個默認慣例就是構造函數的名字首字母大寫。

注意：
當return的時候，如果是后面為簡單類型，那么返回值還是這個對象；
如果return為對象類型，那么返回的就是return后面的這個對象。

擴展 2：基本類型和對象類型（復雜類型）的區別

賦值：
基本類型 : 賦值的時候只是值的復制
對象類型 : 賦值不僅是值的復制，而且也是引用的傳遞（可以理解為內存地址）可以理解為賦址。

比較相等
基本類型 : 值相同就可以
對象類型 : 值和引用都相同才行

擴展 3：原型 prototype

每一個JavaScript對象(null除外)都和另一個對象相關聯，這個對象就是原型，每一個對象都從原型繼承屬性。

Object.create() 這個方法是ES5定義的，它創建一個新對象，其中第一個參數是這個對象的原型。第二個參數是可選參數，用以對對象屬性進行進一步描述。

可以通過傳入參數 null 創建一個沒有原型的新對象，不過這個新對象不會繼承任何東西，甚至不包括基礎方法。
var o = Object.create(null); //o不會繼承任何屬性和方法,空空的。

如果想創建一個普通的空對象，需要傳入Object.prototype
var o = Object.create(Object.prototype); //o相當于{}

可以通過點(.)或方括號([])運算符來獲取和設置屬性的值。

var author = book.author;
var title = book["main title"];

在JavaScript中能用 . 連接的都可以用 []連接。有很多 . 運算符不能用的時候，就需要用[]代替。
1、在屬性名可變的情況下用[]

function getAttr (obj, attr) {
    console.log(obj[attr])
}

2、屬性名有空格或者連字符等時用[]
var title = book["main title"];

delete運算符可以刪除對象的屬性。
delete只是斷開屬性和宿主對象的聯系，而不會去操作屬性中的屬性，如果刪除的屬性是個對象，那么這個對象的引用還是存在的。

var a = {b:{c:1}};
var b = a.b;
console.log(b.c); // 1
console.log(a.b); // {c:1}
delete a.b;
console.log(b.c); // 1
console.log(a.b); //undefined

delete只能刪除自有屬性，不能刪除繼承屬性。

返回值為true

當delete表達式刪除成功或沒有任何副作用(比如刪除不存在的屬性)，或者delete后不是一個屬性訪問表達式，delete會返回 true ；

var a = {b:{c:1}};
console.log(delete a.b);
console.log(delete a.b);
console.log(delete a.toString);
console.log(delete 1);

以上都會打印true

返回值為false

delete不能刪除那些可配置性為false的屬性，例如某些內置對象的屬性是不可配置的，通過變量聲明和函數聲明創建的全局對象的屬性。

var a = {};
Object.defineProperty(a,"b",{
    value:1,
    configurable: false // 設置為不可配置
})
console.log(delete a.b)
console.log(delete Object.prototype)
var x = 1;
console.log(delete this.x);
console.log(delete x)

以上打印都為false

in 運算符的左側是屬性名(字符串),右側是對象。如果對象的自有屬性或繼承屬性中包含這個屬性則返回true。

var a = {b:1};
console.log("a" in window); // true 聲明的全局變量"a"是window的屬性
console.log("b" in a); // true "b"是a的屬性
console.log("toString" in a); // true a繼承了toString屬性
console.log("c" in a); // false "c"不是a的屬性

跟in運算符類似的，還可以用"!=="判斷一個屬性是否是undefined，但是有一種場景只能使用in運算符，in可以區分不存在的屬性和存在但值為undefined的屬性。

var a = {b:undefined};
console.log(a.b !== undefined); //false
console.log(a.c !== undefined); //false
console.log("b" in a); //true
console.log("c" in a); //false

對象的hasOwnProperty()方法用來檢測給定的名字是否是對象的自有屬性。對于繼承屬性它將返回false

var a = {b:1};
console.log(a.hasOwnProperty("b")); //true
console.log(a.hasOwnProperty("c")); //false
console.log(a.hasOwnProperty("toString")); //false toString是繼承屬性

對象的propertyIsEnumerable()方法只有檢測到是自身屬性(不包括繼承的屬性)且這個屬性的可枚舉性為true時它才返回true。

var a = {b:1};
console.log(a.propertyIsEnumerable("b"));
console.log(a.propertyIsEnumerable("toString"));

當使用原始類型的值（string、number、boolean），在調用對應屬性和方法的時候，內部會自動轉成對應的對象。隱式創建的這個對象，就成為包裝對象。
基本類型都有自己對應的包裝對象 : String Number Boolean

包裝對象的特點  
隱式創建對象后，可以調用對應的屬性和方法  
使用后，立馬銷毀，所以不能給原始類型的值添加屬性和方法

其過程舉例：str.substring - > new String(1234) - > 找到String的substring -> 將new String銷毀

Object.assign()

Object.create()

Object.defineProperty()

Object.defineProperties()

Object.entries()

Object.preventExtensions()

Object.isExtensible()

Object.seal()

Object.isSealed()

Object.freeze()

Object.isFrozen()

Object.keys()

Object.values()

Object.getPrototypeOf()

Object.getOwnPropertyNames()

Object.getOwnPropertyDescriptor()

Object.getOwnPropertyDescriptors()

Object.prototype.hasOwnProperty()

Object.prototype.isPrototypeOf()

Object.prototype.propertyIsEnumerable()

Object.prototype.toString()

Object.prototype.valueOf()

兩種編程方式：
(1)、面向過程
(2)、面向對象

兩者的區別：
面向過程：關注實現過程和每一步的實現細節。
面向對象：關注特征和功能。

通俗點，用對象的思想寫代碼就是面向對象編程。

1、抽象：抓住核心問題（簡單理解為抽出像的部分；將相同或表現與問題相關特征的內容提取出來。）
其核心：抽出、抽離，將相同的部分（可能會維護、會迭代、會擴展）的代碼抽離出來形成一類

2、封裝：就是將類的屬性包裝起來，不讓外界輕易知道它內部的具體實現；只提供對外接口以供調用

3、繼承：從已有對象上繼承出新的對象

4、多態：一個對象的不同形態

1、代碼的層次結構更清晰
2、更容易復用
3、更容易維護
4、更容易擴展

__proto__   
屬性原型鏈,實例對象與原型之間的連接，叫做原型鏈。

對象身上只有 __proto__ 構造函數身上有prototype也有 __proto__

constructor  
返回創建實例對象的構造函數的引用,每個原型都會自動添加constructor屬性,for..in..遍歷原型是找不到這個屬性的。

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

hasOwnProperty  
可以用來判斷某屬性是不是這個構造函數的內部屬性（不包括繼承的）

語法： 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  
二元運算符,用來檢測一個對象在其原型鏈中是否存在一個構造函數的 prototype 屬性。

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

// 定義構造函數
function C(){} 
function D(){} 

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

toString  
返回一個表示該對象的字符串

作用：
1、進行數字之間的進制轉換

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

2、利用toString做類型的判斷

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

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

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

根據這個原型對象，我們要生成一個實例對象如下

var hashiqi = {}; //創建空對象，之后根據原型對象的相應屬性賦值
hashiqi.name = "hashiqi";
hashiqi.color = "blackandwhite";

缺點：
1、如果要生成多個實例對象，要重復寫多次。
2、實例和原型之間沒有聯系。

上面原始模式有一個缺點是要很麻煩的寫很多重復的代碼，我們可以寫一個函數來解決代碼重復的問題。

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

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

這種方式只是解決了代碼重復的問題，但是生成的實例跟原型還是沒有聯系，而且hashiqi和jinmao也沒有聯系，不能反映出他們是同一個原型對象的實例。

用來創建對象的函數，叫做構造函數，其實就是一個普通函數，但是默認函數名首字母大寫，對構造函數使用new運算符，就能生成實例，并且this變量會綁定在實例對象上。

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有一個共同的構造函數 hashiqi.constructor === jinmao.constructor 是true

有以下幾種方法可以驗證原型對象與實例對象的關系：

hashiqi instanceof Dog; // true

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

Dog.prototype.isPrototypeOf(hashiqi) // true

缺點：
構造函數解決了代碼重復和實例與原型之間的聯系，但是存在一個浪費內存的問題。比如遠行對象有一些不變的屬性和通用的方法，這樣沒生成一個實例，都必須為重復的東西多占一些內存。

擴展

我們可以嘗試實現new運算符的邏輯如下：

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

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

    // 模擬出構造函數內部this指向實例的過程，注意，我們會拿到構造函數的返回值
    var res = func.apply(obj, Array.from(arguments).slice(1));

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

    return obj;
}

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

注意：
正常的構造函數是不需要自己寫return 的，如果寫了，當return的時候，如果是后面為簡單類型，那么返回值還是構造函數生成的實例。如果return為對象類型或者函數，那么返回的就是return后面的這個對象或者函數。

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

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

注意：當實例對象和原型對象有相同的屬性或者方法時，會優先訪問實例對象的屬性或方法。

使用call或apply方法，將父對象的構造函數綁定在子對象上。

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

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

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

子類的prototype指向父類生成實例

function Animal() {};
Animal.prototype.species = "動物";
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");

缺點： 每一次繼承都得生成一個父類實例，比較占內存。

利用空對象作為中介

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

幾個月前在 CSDN 面試的時候，我說了這種繼承方式，面試官就糾結這樣修改子類的prototype不會影響父類么？是真的不會影響的，因為子類的prototype是指向Middle構造函數生成的實例，如果真的有心要改，得Dog.prototype.__proto__這么著來改。

Object.create()

function Animal() {}
Animal.prototype.species = "動物";
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); //動物

淺拷貝

function Animal() {}
Animal.prototype.species = "動物";
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) // 動物

深拷貝

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;
}

上面所說的是JavaScript語言的傳統方法，通過構造函數，定義并生成新的對象。
ES6中提供了更接近傳統語言的寫法，引入了Class(類)的概念，通過class關鍵字，可以定義類。

ES6的類完全可以看成是構造函數的另外一種寫法。

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

既然是構造函數，所以在使用的時候，也是直接對類使用new命令，跟構造函數的用法完全一致。

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

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

注意：
1、先聲明定義類，再創建實例，否則會報錯
class 不存在變量提升，這一點與ES5的構造函數完全不同

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

2、必須使用new關鍵字來創建類的實例對象
類的構造函數，不使用new是沒法調用的，會報錯。 這是它跟普通構造函數的一個主要區別，后者不用new也可以執行。

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

3、定義“類”的方法的時候，前面不需要加上function這個關鍵字，直接把函數定義放進去了就可以了。并且，方法之間不需要逗號分隔，加了會報錯。

constructor  構造函數

構造方法constructor是一個類必須要有的方法，默認返回實例對象；創建類的實例對象的時候，會調用此方法來初始化實例對象。如果你沒有編寫constructor方法，執行的時候也會被加上一個默認的空的constructor方法。

constructor方法是必須的，也是唯一的，一個類體不能含有多個constructor構造方法。

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

Class表達式

與函數一樣，類可以使用表達式的形式定義。

const Hashiqi = class Dog {
    constructor (name,color) {
        this.name = name;
        this.color = color;
    }
    getName () {
        //此處的Dog就是Dog構造函數，在表達式形式中，只能在構造函數內部使用
        console.log(Dog.name);
    }
}
var hashiqi = new Hashiqi("hashiqi", "blackandwhite"); // 真正的類名是Hashiqi
var jinmao = new Dog("jinmao", "yellow"); // 會報錯，Dog沒有定義

通常我們的表達式會寫成如下，省略掉類后面的名稱

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

實例方法和靜態方法  
實例化后的對象才可以調用的方法叫做實例方法。  
直接使用類名即可訪問的方法，稱之為“靜態方法”

類相當于實例的原型，所有在類中定義的方法，都會被實例繼承。如果在一個方法前，加上static關鍵字，就表示該方法不會被實例繼承，而是直接通過類來調用，這就稱為“靜態方法”。

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

靜態方法和實例方法不同的是：靜態方法的定義需要使用static關鍵字來標識，而實例方法不需要；此外，靜態方法通過類名來的調用，而實例方法通過實例對象來調用。

extends

類之間可以通過extends關鍵字實現繼承，這比ES5的通過修改原型鏈實現繼承，要清晰和方便很多。

class Dog extends Animal{}

extends的繼承目標
extends關鍵字后面可以跟多種類型的值，有三種特殊情況

1、子類繼承Object類

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

2、不存在繼承

class A {}

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

3、子類繼承null

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

super

uper這個關鍵字，既可以當作函數使用，也可以當作對象使用。

1、super作為函數調用時，代表父類的構造函數。作為函數時，super()只能用在子類的構造函數之中，用在其他地方就會報錯。

2、super作為對象時，在普通方法中，指向父類的原型對象；在靜態方法中，指向父類。

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

注意：
1、子類必須在constructor方法中調用super方法，否則新建實例時會報錯。這是因為子類沒有自己的this對象，而是繼承父類的this對象，然后對其進行加工。如果不調用super方法，子類就得不到this對象。

2、在子類的普通方法中，由于super指向父類的原型對象，所以定義在父類實例上的方法或屬性，是無法通過super調用的。

3、使用super的時候，必須顯式指定是作為函數、還是作為對象使用，否則會報錯。