JS高级对象es6生成器和promise

学习总结

对象高级

 var p={       
            name:'tom',
            age:12,
            setName:function(name){
                this.name=name；
            }
        }

一般创建对象 但是需要写的语句较长 采用第二种工厂模式

function creatPerson(name,age){
            var obj={
                name:name,
                age:age,
                setName:function(name){
                    this.name=name
                }
            }
            return obj;
            // 工厂模式：
            // 返回一个对象的函数
        }
        // 创建两个人
        var p1=creatPerson('tom',12);
        var p2=creatPerson('tom2',16)
       // 但是这种可能不能指定类型 所有的类型都是obj
       //所以可以自定义
           // 定义类型
        function Person(name,age){
            this.name=name;
            this.age=age;
            this.setName=function(name){
                this.name=name;
            }
        }
        var p1=new Person('tom',12);
        p1.setName('jack')
        // 可以自定义 比如我要是学生我就创建
        // function Student

原型链继承

       function Person(name,age){
            this.name=name;
            this.age=age;
        }
        Person.prototype.setName=function(name){
            this.name=name;
            console.log(name);
        }
        function Student(name,age,price){
            Person.call(this,name,age)
            // 相当于
            // this.Person(name,age);
            this.price=price;
        }
        Student.prototype=new Person();
        // 子类型的原型等于父类型的实例
        Student.prototype.constructor=Student
        Student.prototype.setPrice=function(price){
            this.price=price;
        }
        var s=new Student('tom',12,12000);
        console.log(s.name,s.age,s.price);
        s.setName('bob');
        // 相当于用s去调用这个方法

ES6生成器
生成器是一个特殊的函数 用来进行异步编程

 function*gen(){
         console.log("hao");
        }
        let iteractor=gen();
        console.log(iteractor);
        // 这样输出的就是迭代器对象
        // 所以我们要借助next方法
        iteractor.next();
        // yield是函数代码的分隔符
        function*gen2(){
            console.log(111);
            yield console.log('一只没有耳朵')
            console.log(222);
            yield'一只没有眼睛'
        }
        let iteractor2=gen2();
        // 调用里面的函数内容
        iteractor2.next();
        iteractor2.next();
        iteractor2.next();
        // 遍历 用这种方法可以得到yield的值
        // for(let v of gen2()){
        //     console.log(v);
        // }

生成器创建完对象之后
调用函数的内容 变量名.next();
返回的是yield后面的结果或者参数
遍历获取yield内容 yield对代码内容进行分割

生成器传参数包括next方法传参数问题 作为上一个yield语句的整体返回
调用一次next方法 第二次调用的是next 整体的语句会作为yield的整体返回

 // 单个封装
        function getUser() {
            setTimeout(() => {
                let data = '用户数据';
                // 调用next方法 将数据传入
                // 获取每一次data的值 给yield
                iteractor.next(data);
            }, 1000)
        }
        function getOrder() {
            setTimeout(() => {
                let data = '订单数据';
                iteractor.next(data);
            }, 1000)
        }
        function getGoods() {
            setTimeout(() => {
                let data = '商品数据';
                iteractor.next(data);
            }, 1000)
        }
        function*gen(){
           let user= yield getUser();
        //    第二次调用next方法 即将data值赋给user
           console.log(user);
        let orders= yield getOrder();
            console.log(orders);
           let goods= yield getGoods()
            console.log(goods);
        }
        // 调用生成器函数
        let iteractor=gen();
        iteractor.next();

promise
promise解决异步编程 防止回调地狱

var pro=new Promise(function(reslove,reject){
    setTimeout(function name(){
        let data='数据'
        reslove(data)
    },1000)
 })
 pro.then(function(value){
    console.log(value);
 },function(reason){
    console.log(reason);
 })

promise.then的几种状态 非promise promise对象 抛出错误

  // 创建promise对象
        const p=new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve('用户数据');
            },1000)
        });
        // 调用then方法 then方法的返回结果是Promise对象 
        // 对象的状态由then方法的回调函数执行结果决定
        // 1 如果是非prmise的类型 状态为成功 返回值为成功的值 如果
        // 啥也不写 返回值为undefined
        p.then(value=>{
            console.log(value);
            // 1 非Promise
            return 111;
            // 2 是promise
            return new Promise((resolve,reject)=>{
                // resolve('ok');
            //     // 此时then方法中也会是成功 并且值是ok
            //     // reject('失败');
            //   // 此时then方法中也会是reject 并且值是失败
            })
            // 3 抛出错误
            // 此时回调函数会错误 且promiseValue是出错了
            throw new Error('出错了！');
        },reason=>{
            console.warn(reason);
        })

用Promise封装ajax

    // 手动封装ajax
        const p=new Promise((resolve, reject) => {
              // 1 创建对象
        const xhr=new XMLHttpRequest();
        // 2 初始化 第二个是ur的值
        xhr.open("GET","111");
        // 3 发送
        xhr.send();
        // 4 绑定事件 处理响应结果
        xhr.onreadystatechange=function(){
            // 判断
            if(xhr.readyState==4){
                // 判断响应码状态 200-299
                if(xhr.status >=200&&xhr.status<300){
               resolve(xhr.response);

                }else{
                    reject(xhr.status);
                }
            }
        }
        })
        // 指定回调
        p.then(function(value){
            console.log(value);
        },function(reason){
            console.log(reason);
        })

async函数和await
async函数 返回的只要不是一个Promise对象 他的结果就是一个成功的prmoise

  async function fn(){
            // return 'xxx';
            // throw new Error("出错");
            // 2抛出错误 返回的结果是个失败的promise
            // 3 返回的是一个promise
            return new Promise ((resolve,reject)=>{
                reject("失败");
            });
        }
        const result=fn();
        console.log(result);
        result.then(value=>{
            console.log(value);
        } ,reason=>{
            console.warn(reason);
        })

await放在async函数中 可以用来接收promise对象的状态

 const p=new Promise((resolve,reject)=>{
            resolve("成功的值");
        })
        async function main(){ 
             var result=await p;
             console.log(result);
        }
        main();
        // await放在async中
        // await返回结果是p返回的值

用 try catch对异常数据进行捕获

 // 用try catch对异常数据进行捕获
        const p=new Promise((resolve,reject)=>{
            reject("失败了")
        })
        async function main(){ 
            try{
                var result=await p;
             console.log(result);
            }catch(e){
                console.log(e);
            }
        }
        main();

总结
还有很多知识点没总结到 es6还要多看文档仔细研究研究