2005091. 简易沙盒环境 2. npx 安装模块，不用安装全局包 3. ES6之简介及变量声明 4. ES6之模板

1. 简易沙盒环境

完全屏蔽原生，无法访问硬件
上传到云端打包，不安全

2. npx 安装模块，不用安装全局包

3. ES6之简介及变量声明

let不能重复声明
块级作用域，{}内部不影响外部
var变量提升，不赋值

4. ES6之模板字符串和函数默认参数

可以在模板字符串中插入JS表达式 `blabla ${}`
传入null和undefined是不一样的

function multiply(a, b = 1) {
	return a * b;
}
// ==>
"use strict";

function multiply(a) {
  var b = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
  return a * b;
}

6.ES6之class

6.1 字面量方式创建对象

let person = {
	name: 's',
  	age: 29,
  	say: function() {
  		return this.name;
  	}
}

6.2 new操作符创建结构类似的对象（构造函数）

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.say = function() {
        return this.name;
    }
}
let person = new Person('zhangsan', 20)

6.3 手写new函数

function Person(name, age) {
    this.name = name;
    this.age = age;
}

// 不需要每次都创建一个新的say函数对象，减少开销
Person.prototype.say = function() {
    return this.name;
}

function newFunc(Constructor, ...args) {

    // 1. 创建对象
    // 通过字面量创建的对象本质上就是用new创建的
    // let obj = new Object();
    // obj.__proto__ = Object.prototype;
    let obj = {};
   
    // 2. 将obj的__proto__属性绑定到构造函数的prototype属性上
    // 对象有__proto__，函数都有prototype
    obj.__proto__ = Constructor.prototype;

    // 3. obj作为构造函数的this
    let result = Constructor.apply(obj, args);

    // 4. 返回构造函数的返回值，没有就返回obj
    return result || obj;

}

let person = newFunc(Person, 'zhangsan', 18)

6.4 class基本用法

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    address = 'Los Angeles'
    say() {
        return this.name;
    }
}

let person = new Person('zhangsan', 18)

7.ES6之class继承

7.1 原型链继承

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Person.prototype.say = function() {
    console.log(this.name)
}

function Superman(name, age, address) {
    this.address = address;
    Person.call(this, name, age);
}

// Superman.prototype = Person.prototype; 
Superman.prototype = Object.create(Person.prototype);

Superman.prototype.constructor = Superman;

Superman.prototype.fly = function() {
    console.log('fly');
}

let superman = new Superman('zhangsan', 29, 'LA')

7.2 类继承

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    say() {
        console.log(this.name)
    }
}

class Superman extends Person {
    constructor(name, age, address){
        // 调用Person的constructor
        super(name, age);  
        this.address = address;
    }
    fly() {
        console.log('fly');
    }
}

let superman = new Superman('zhangsan', 29, 'LA')
superman.fly();

8.promise知识讲解

8.1 传统异步回调

function mockAjax(method, url, data, success, error) {
    setTimeout(() => {
        let time = Math.random() * 10;
        if(time < 5) {
            const result = {
                status: 200,
                msg: 'success',
                data: []
            }
            success(result);
        } else {
            error('请求失败');
        }
    }, 1000)
}

function getList(userId) {
    mockAjax('GET', './role?userId' + userId, null, (successData) => {
        console.log(successData);
        mockAjax('GET', './product?roleId' + successData.roleId, null, (successData) => {
            console.log(successData);
        }, (errorData) => {
            console.log(errorData);
        })
    }, (errorData) => {
        console.log(errorData);
    })
}

8.2 基本概念

这是一个构造函数，可以用new来创建一个对象

let promise = new Promise( (resolve, reject) => {
    setTimeout( () => {
        let time = Math.random() * 10;
        if (time < 5) {
            console.log('异步');
            // 此时从pending=>fulfilled 
            resolve('数据');  
        } else {
            // 此时从pending=>rejected
            reject('错误')
        }
        
    }, 1000)
})
// fulfilled时候调用then的第一个参数
// rejected时候调用then的第二个参数
// rejected时候调用catch（then的语法糖）
// 无论成功失败最后调用finally
promise.then( (data) => {
    console.log('调用resolve传入的数据', data)
}, (error) => {
    console.log('调用reject传入的数据', error)
}).catch( error => {
    console.log('调用reject传入的数据', error)
}).finally( () => {
    console.log('清除数据');
})

8.3 Promise处理回调

function mockAjax(method, url, data) {
    return new Promise( (resolve, reject) => {
        setTimeout(() => {
            let time = Math.random() * 10;
            if(time < 5) {
                const result = {
                    status: 200,
                    msg: 'success',
                    data: []
                }
                resolve(result);
            } else {
                reject('请求失败');
            }
        }, 1000)
    } )
    
}

// 回调
function getList(userId) {
    mockAjax('GET', './role?userId' + userId, null)
    .then(successData => {
        return mockAjax('GET', './product?roleId' + successData.roleId, null)
        .then(successData => {
            console.log(successData)
        })
    })
    .catch(errorData => {
        console.log('error信息', errorData)
    })
}
getList(2)

// 需要两个都返回
let getUser = mockAjax('GET', './role?userId' + userId, null);
let getRole = mockAjax('GET', './product?roleId' + successData.roleId, null);
Promise.all([getUser, getRole])
    .then(reuslt => { console.log(result) })  // 返回数组
    .catch(error => { console.log(error) })

// 只需要先返回的，超时的停止
function timeoutAjax(promise, ms = 500) {
    return Promise.race([promise, new Promise( (resolve, reject) => {
        setTimeout( () => {
            reject(new Error('请求超时'));
        }, ms)
    })])
}
let getUser = mockAjax('GET', './role?userId' + userId, null);
timeoutAjax(getUser).then().catch()

9.ES6之generator

9.1 基本描述

异步的解决方案，把过程和结果解耦，使用同步的语法完成异步的处理

function * gen() {
    console.log('执行');
    yield 1 + 1;
    return 3;
}
let g = gen();
console.log(g.next());
console.log(g.next());
console.log(g.next());

200509

1. 简易沙盒环境

2. npx 安装模块，不用安装全局包

3. ES6之简介及变量声明

4. ES6之模板字符串和函数默认参数

6.ES6之class

6.1 字面量方式创建对象

6.2 new操作符创建结构类似的对象（构造函数）

6.3 手写new函数

6.4 class基本用法

7.ES6之class继承

7.1 原型链继承

7.2 类继承

8.promise知识讲解

8.1 传统异步回调

8.2 基本概念

8.3 Promise处理回调

9.ES6之generator

9.1 基本描述

10.ES6之模块