摘要：關于中面向對象的理解面向對象編程它是一種編程思想我們的編程或者學習其實是按照類實例來完成的學習類的繼承封裝多態封裝把實現一個功能的代碼封裝到一個函數中一個類中以后再想實現這個功能，只需要執行這個函數方法即可，不需要再重復的編寫代碼。

面向對象編程(oop)

它是一種編程思想  (object-oriented programming ), 我們的編程或者學習其實是按照類、實例來完成的
學習類的繼承、封裝、多態

封裝

把實現一個功能的代碼封裝到一個函數中(一個類中),以后再想實現這個功能，只需要執行這個函數方法即可，不需要再重復的編寫代碼。
低耦合，高內聚 
減少頁面中的冗余代碼，提高代碼的重復使用率

多態

一個類（函數）的多種形態：重載、重寫
【重載】
后臺java，c#等編程語言中，對于重載的概念：方法名相同參數不同，叫做方法的重載

public void sum(int num1,int num2){
    //=> CODE
}
public void sum(int num1){
    //=>CODE
}
public void sum(int num1,string str){
    //=>CODE
}
sum(12,23) //第一個
sum(12) //第二個
sum(12,"word") //第三個

JS中沒有類似于后臺嚴格意義上的重載，JS中如果方法名相同，最后只能保留一個（和實參沒有關系）
JS中的重載：同一個方法，通過傳遞實參的不同（arguments）我們完成不同的功能，我們把這個也理解為重載

function sum(num1,num2){
    return num1+num2;
}
function sum(){
    var ary=Array.prototype.slice.call(arguments)
    return eval(ary.join("+"));
}
sum(10,20)
sum(10,20,30);// =>不管哪一次執行的都是第二個sum

不管是后臺語言還是js都有重寫：子類重寫父類的方法

什么是繼承？
子類繼承父類中的一些屬性和方法

1.原型繼承

讓子類的原型指向父類的實例
Children.prototype=new Parent();

function Parent(){
    this.x=10;
}
Parent.prototype.getX=function(){
    console.log(this.x)
}

function Child(){

    this.y=20;
}
Child.prototype=new Parent(); //最好都在擴展子類原型方法之前執行
Child.prototype.constructor=Child;
Child.prototype.getY=function(){
    console.log(this.y);
}
var child=new Child();
console.log(child.y);
child.getY();
child.getX()
console.log(child.x);

[細節]
1.我們首先讓子類的原型指向父類的實例，然后再向子類原型上擴展方法，防止提前增加方法，等原型重新指向后，之前在子類原型上擴展的方法失效（子類原型已經指向新的空間地址了）
2.讓子類原型重新指向父類實例，子類原型上原有的constructor就沒有了，為了保證構造函數的完整性，我們最好給子類的原型重新設置constructor屬性值：Children.prototype.constructor=Children
[原理]
原型繼承，并不是把父類的屬性和方法copy一份給子類，而是讓子類的原型和父類原型之間搭建一個鏈接的橋梁，以后子類或者子類的實例可以通過原型鏈的查找機制，找到父類原型上的方法,從而調取這些方法使用即可。
[特征]
子類不僅可以繼承父類原型上的公有屬性方法，而且父類提供給實例的那些私有屬性的方法，也被子類繼承了（存放在子類原型上，作為子類公有的屬性和方法）

2.call繼承

在子類的構造體中，把父類做普通方法執行，讓父類方法中this指向子類的實例

function Parent(){
    this.x=10;
}
Parent.prototype.getX=function(){
    console.log(this.x);
}
function Children(){
    //=>this:child 子類的實例
    Parent.call(this); //讓Parent執行，方法中的this依然是子類中的實例（在父類構造體中寫this.xxx=xxx都相當于給子類的實例增加一些私有的屬性和方法）
    this.y=20;
}
var child=new Children();
console.log(child.x);

【原理】
把父類構造體中私有的屬性和方法，原封不動復制了一份給子類的實例（繼承完成后，子類和父類是沒有關系的）；公有的無法繼承。
【細節】
我們一般把call繼承放在子類構造體的第一行，也就是創建子類實例的時候，進來的第一件事就是先繼承，然后再給實例賦值自己私有的（好處：自己的可以把繼承過來的結果替換掉--如果有重復的情況下）

3.寄生組合繼承

Object.create: 創建一個空對象，把obj作為新創建對象的原型  低版本不兼容

var obj={name:"hello word"}
var newObj=Object.create(obj);
newObj.__proto__===obj

寄生組合式繼承完成了一個需求
子類公有的繼承父類公有的（原型繼承的變通）
子類私有的繼承父類私有的（call繼承完成）

function Parent(){
    this.x=10;
}
Parent.prototype.getX=function(){
    console.log(this.x)
}
function Children(){
    Parent.call(this)
    this.y=20;
}
Children.prototype=Object.create(Parent.prototype);
Children.prototype.constructor=Children;
Children.getY=function(){
    console.log(this.y);
}
var child=new Children();
console.log(child.x);
child.getX()

自己實現一個類似于Objcet.create的方法

Object.myCreate=function myCreate(obj){
    var Fn=new Function();
    Fn.prototype=obj;
    return new Fn();
}
var oo={name:"o"}
Object.myCreate(oo)

4.ES6中的類和繼承

class Fn{
    constructor(a){
        //=>constructor:Fn
        //=>這里面的this.xxx=xxx是給當前實例設置的私有屬性
        this.xxx=a
    }
    //=>這里設置的方法都放在Fn.prototype上(給實例提供的公有屬性方法)    
    //=>getX $ setX:都是給Fn.prototype設置方法
    getx(){

    }
    setX(){

    }
    //=>static 這些屬性和方法都是Fn當做普通對象設置的私有屬性和方法，和實例沒有任何的關系
    static private(){

    }
}
let f=new Fn(10,20);

class A{
    constructor(){
        this.x=10
    }
    getX(){
        console.log(this.x);
    }
}

class B extends A{
    constructor(){
        super(); //=>原理call繼承, 第一句必須寫上super() 
        this.y=20;
    }
    getY(){
        console.log(this.y);
    }
}
let b=new B();

5.for in循環遍歷細節問題

Object.prototype.hasPubProperty=function hasPubProperty(){

}
/*
* for in循環 不僅可以遍歷當前對象(或者當前實例)所有的私有屬性和方法，還可以把原型上自己創建的公共屬性方法進行遍歷
*
* for 只會遍歷私有的屬性和方法(更多的是索引),自己在原型上擴展的方法不會被遍歷出來
* */

var obj={name:"tom",age:8}
for (const objKey in obj) { //webstorm 快捷鍵 itin
    if(obj.hasOwnProperty(objKey)){
        console.log(objKey);
    }
    // console.log(objKey); // hasPubProperty
}
var ary=[12,23,34];
for (let i = 0; i < ary.length; i++) {
    console.log(ary[i]);
}

for (const aryKey in ary) { //快捷鍵 itar
    console.log(ary[aryKey]);
}

webStorm自己配置快捷鍵 file-> setting->liveTemplates 右側+自己DIY