es6 promise&&class - HelloWorld开发者社区

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

Babel
Babel是一个js编译器
把浏览器不认识的代码转换成浏览器认识的

Java 并发 - Longadder源码分析

手撕Java 条件队列Condition源码系列

热门文章