面向?qū)ο缶幊?oop)

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

封裝

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

多態(tài)

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

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中沒有類似于后臺嚴(yán)格意義上的重載，JS中如果方法名相同，最后只能保留一個（和實參沒有關(guān)系）
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);// =>不管哪一次執(zhí)行的都是第二個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(); //最好都在擴展子類原型方法之前執(zhí)行
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);

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

2.call繼承

在子類的構(gòu)造體中，把父類做普通方法執(zhí)行，讓父類方法中this指向子類的實例

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

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

3.寄生組合繼承

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

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()

自己實現(xiàn)一個類似于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是給當(dāng)前實例設(shè)置的私有屬性
        this.xxx=a
    }
    //=>這里設(shè)置的方法都放在Fn.prototype上(給實例提供的公有屬性方法)    
    //=>getX $ setX:都是給Fn.prototype設(shè)置方法
    getx(){

    }
    setX(){

    }
    //=>static 這些屬性和方法都是Fn當(dāng)做普通對象設(shè)置的私有屬性和方法，和實例沒有任何的關(guān)系
    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循環(huán)遍歷細節(jié)問題

Object.prototype.hasPubProperty=function hasPubProperty(){

}
/*
* for in循環(huán) 不僅可以遍歷當(dāng)前對象(或者當(dāng)前實例)所有的私有屬性和方法，還可以把原型上自己創(chuàng)建的公共屬性方法進行遍歷
*
* 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 右側(cè)+自己DIY