es6 promise&&class

ES6 Promise&&class
promise對象用於表示一個異步操做的最終狀態（完成或失敗）
以及其返回的值
同步？異步？
同步任務會阻塞程序執行（alert，for）
異步任務不會阻塞執行（setTimeout，fs.readFile）
主要知識點：

使用promise（then,catch,finally)
Promise.all & Promise.race
Promise.resolve & Promise.reject

方法，用於請求數據（模擬）

function f(cb){
    setTimeout(function(){
        cb && cb();
    },1000);
}

promise的三種狀態
pending
fulfilled
rejected

狀態的改變不可逆，一旦決議就不能再修改
e.g
頁面中有個板塊，須要多張圖片記載完之後才顯示

const loadImg = (src) =>{
    return new Promise ( resolve, reject) => {
        const img = new Image();
        image.src = src;
        img.onload = (){
            resolve(img);
        };
        img.onerror = (e){
            reject(e);
        };
    };
};
const imgs = [ url ];
Promise.all(imgs.map(src => loadImg(src))).then(arr) =>{//由於若是這裏你直接綁定img的話返回的是img的鏈接而不是img的對象
    console.log(arr);
    arr.forEach(img)=>{
        document.body.appendChild(img);
    });
也能夠改寫成這樣子
const promises = imgs.map(src){
    return loadImg(src);//loadImg由promise實例組成
});
Promise.all(promises).then(arr){
    console.log(arr);
    arr.forEach(img)=>{
        document.body.appendChild(img);
    });
});

class
使用類能夠下降維護成本
使用類可使代碼高度複用
擴充方便靈活（好比看不懂前面的人寫的東西，可是能夠直接繼承＋重寫）
下降設計成本
使用簡單

須要掌握：
類與對象
ES中類的特性
類的繼承
Babel
基於流程控制的形變類實現
多態
ES5模仿類的繼承

核心－封裝
類所生產的就是對象

ES6中的類

class Car{
    //構造函數－工廠中街頭人的做用
    //實例化 造車的過程＝》類常見對象的過程
    constructor(…args){//構造函數固定的名字，調用的時候能夠同時放入參數
        alert(args);//控制檯是什麼都沒有的
    }
}
new Car(‘藍色’，3);//實例化

面向對象基本特性：
多態（同一個接口，不一樣的表現），繼承，封裝

音樂播放器：

class AudioPlayer{
    this.songList=[];
    this.dom=null;
    this.status = 0;
    this.audio=new Audio();
    this.getSongs();
    this.createElement();
    this.bindEvents();
    this.render();
}
getSongs(){
    //…ajax
    this.songList=[
    {
        cover:’’,
        url:’mp3’,
        singer:{},
    }];
}
createElement(){
    const div = document.createElement(‘div’);
    div.innerHTML={`
        <div class=「btn」>播放</div>
        </div>`;
        this.dom = div;
    }
    bindEvents(){
        this.div.querySelector(‘.btn’).addEventListener(‘click’,()=>
            {
                console.log(「開始播飯「）；
            });
    ｝
    render(){
        this.container.appendChild(this.dom);
    }
}
new AudioPlay(‘#app’);

靜態屬性，靜態方法
1.不會被類實例所擁有的屬性與方法，只是類自身擁有
2.只能經過類調用
3.靜態方法和普通方法重名是沒什麼關係的

靜態屬性：Car.屬性名 ＝ 屬性值；

類表達式：

//函數表達式
const a = function()}
}
//函數聲明function a (){
}
//類表達式
const Person = class{
    constructor(){
    }
}

getter和setter
相似於給屬性提供鉤子
在獲取屬性值和設置屬性值時作一些額外的事情

ES5中getter／setter

1.在對象字面量中寫get／set方法
const ob ={
    _name:’’,
    get name(){
        return this._name;
    }
    set name(val){
        this._name = val;
    }
}
obj.name = 222;
2.Object.defineProperty
爲咱們的對象定一個屬性
var obj = {
    _name:’’
};
Object.defineProperty(obj,’name’,{
    get:function(){
        
    }
    set:function(){
        
    }
});
console.log(obj);

ES6中？
class Person(){
    constructor(){
    this._name=‘’;
    }
    get name(){
        return ` ‘個人名字是${this._name}`;
    }
    set name(){
        this._name=val;
    }
}

name屬性與new.target屬性
若是類表達式的類有名字，則取類的名字
new.target指向new關鍵詞後的類，用在構造函數的時候
能夠去check有沒有用new關鍵字調用
還有一種方法是 this instanceof 構造函數名字
構造函數的this和構造函數是有原型上的聯繫

在ES5中模擬類
//構造函數

⚠：js沒有支持類的這個事情，只是模擬類
function Person(name,age){
    this.name = name;
    this.age = age;
}
new Person();

構造函數就是多一個new的關鍵字去調用
當使用new的話這個函數就會自動被當成構造函數調用
new調用的時候發生了什麼呢？爲何會得到一個新的對象呢？
1.建立一個新的對象
2.把構造函數的prototype屬性 做爲空對象的原型
3.this賦值爲這個空對象
4.執行函數
5.若是函數沒有返回值 則返回this[返回以前這個空對象]
模擬類：
function Constructor(fn,args){

var _this = Object.create({fn.prototype);
var res =fn.apply(_this,args);
return res ? res: _this;

}
第三方庫：
好比jquery
其實$(‘#menu’)就是走一個構造函數
可是在調用的時候並無用new那麼是怎麼回事呢
它是先調用了一個內部函數，jQuery
裏面會有一個new init的構造函數
ES6中class的繼承
1.extends
在構造函數中的子類
子類要extends父類，而後再this賦值前要用super()，實際上就是調用父類的構造函數
constructor裏要傳遞咱們新的賦的this的東西
super關鍵字的做用
1.構造函數中進行調用
把this傳給父類的構造函數，調用父類的函數
2.做爲對象的方法調用

1.非靜態方法訪問super－－》父類原型
好比說訪問父類中eat的方法
super.eat
2.靜態方法中訪問super－－》父類

多態
同一個接口，在不一樣的狀況下作不一樣的事情
相同的接口 不一樣的表現
由於es6沒有關鍵字支持多態

接口自己只是一組定義，實現都是在類裏面
須要子類去實現的方法

class Human {
    say(){
        console.log(‘我是人’);
    }
}
class Man extends Human{
    say(){
        console.log(’我是小哥哥’）；
    ｝
｝
class Human {
    say(){
        console.log(‘我是小姐姐’);
    }
}
重載
class SimpleCalc{
    addCalc( …args){
        if(args.length ===0){
            return this.zero();
        }
        if(args.length===1){
            return this.onlyOneArgument(args);
        }
        return this.add(args0;
    }
    zero(){
        return 0;
    }
    onlyOneArgument(){
        return args[0];
    }
    add(args){
        return args.reduce((a,b)=>a+b,0);
    }
}

ES5中的繼承
1.利用構造函數

function P(){
    this.name=‘parent’;
    this.say=function(){
        console.log(‘hahaha’);
    }
}
function c(){
    p.call(this);//傳遞到父類
    this.name = ‘child’;
    this.age = 11;
}
var child = new C();
child.say();

缺點：不能繼承父類原型上的方法
prototype的方法
缺陷較大
解決方法：
C.prototype = new P();

BabelBabel是一個js編譯器把瀏覽器不認識的代碼轉換成瀏覽器認識的