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

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

封裝

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

多態(tài)

一個(gè)類（函數(shù)）的多種形態(tài)：重載、重寫
【重載】
后臺(tái)java，c#等編程語言中，對(duì)于重載的概念：方法名相同參數(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) //第一個(gè)
sum(12) //第二個(gè)
sum(12,"word") //第三個(gè)

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

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í)行的都是第二個(gè)sum

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

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

1.原型繼承

讓子類的原型指向父類的實(shí)例
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(); //最好都在擴(kuò)展子類原型方法之前執(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);

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

2.call繼承

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

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

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

3.寄生組合繼承

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

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

寄生組合式繼承完成了一個(gè)需求
子類公有的繼承父類公有的（原型繼承的變通）
子類私有的繼承父類私有的（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()

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

    }
    setX(){

    }
    //=>static 這些屬性和方法都是Fn當(dāng)做普通對(duì)象設(shè)置的私有屬性和方法，和實(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)遍歷細(xì)節(jié)問題

Object.prototype.hasPubProperty=function hasPubProperty(){

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

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