Js原型Promise

10次阅读

共计 7759 个字符，预计需要花费 20 分钟才能阅读完成。

function createPerson(name){var obj = new Object();
    obj.name = name;
    obj.showName = function(){alert( this.name);  //this 指向 obj
    };
    return obj
}
var person1 = createPerson('小明').showName(); 
//createPerson 中的 this 指向 window

当 new 去调用一个函数：这个时候函数中的 this 就是创立进去的对象，而且函数的返回值间接就是 this 了（隐式返回）
new 后边的函数就是构造函数

function CreatePerson(name){
    this.name = name;
    this.showName=function(){alert(this.name)
    }
}
var p1 = new CreatePerson('小强');
//p1.showName();
var p1 = new CreatePerson('小强');
//p1.showName();
alert(p1.showNme() == p2.showNme());  //false
// 如果创立 200 个或 2000 个对象，//showNme 办法就会存在 2000 个会极大的耗费内存

根本类型赋值只是值的复制
对象类型赋值不仅是值的复制也是援用类型的传递
比拟根本类型值雷同就能够，对象类型值和援用都雷同才行

var a = 5,b=a; 
alert(a==b)  //true
b +=3;
alert(a,b)  //5,3
var a = [1,2,3],b=a;
alert(a==b)  //true
b.push(4);
alert(a,b);//[1,2,3,4],[1,2,3,4]

去改写对象下专用的办法或者属性，让专用的办法或者属性在内存中存在一份，进步性能
原型：css 中的 class
一般办法：css 中的 style

function CreatePerson(name){this.name = name;}
//showName 办法在内存中只存在一份
CreatePersion.prototype.showName() = function(){alert(this.name)
}
var p1 = new CreatePerson('小强');
//p1.showName();
var p1 = new CreatePerson('小强');
//p1.showName();

看是不是对象本身上面的属性

var arr = [];
arr.num = 10;
Array.prototype.num2 = 20;
//alert(arr.hasOwnProperty('num'));  //true   num 是 arr 独有的办法
alert(arr.hasOwnProperty('num2'));  //false num2 不是 arr 独有的办法
//true hasOwnProperty 是挂载在 Object 的原型下的~~~~
alert(arr.hasOwnProperty == Object.prototyoe.hasOwnProperty)

查看对象构造函数

function Aaa(){}
// 零碎会主动把构造函数挂载到原型的 constructor 下
//Aaa.prototyoe.constructor = Aaa;
var a1 = new Aaa();
alert(a1.constructor); //Aaa

var arr = [];
alert(arr.constructor == Array);  //true 能够做数组的判断

会不小心笼罩掉 constructor

function Aaa(){}
Aaa.prototype = {
    name:'小明'，age:20
}
var a1 = new Aaa();
alert(a1.constructor); //Object~~~~

// 须要手动从新指向一下 consttuctor
Aaa.prototype = {
    constructor:Aaa,
    name:'小明'，age:20
}

对象与构造函数在原型上是否有关系

function Aaa(){}
var a1 = new Aaa();
alert(a1 instanceof Aaa); //true
alert(a1 instanceof Array); //false
alert(a1 instanceof Object); //true

把对象转为字符串

零碎对象上面都是自带的，本人写的对象都是通过原型链找 Object 上面的

var arr = [];
alert(arr.toString == Array.prototype.toString); //true
alert(arr.toString == Object.prototype.toString); //false

function Aaa(){}
var a1 = new Aaa();
alert(a1.toString == Aaa.prototype.toString); //false Aaa 下没有 toString 办法
alert(a1.toString == Object.prototype.toString); //true

var num=255;
alert(num.toString(16));    //  'ff'     十进制转换为 16 进制 (255 的 16 进制是 ff)

利用 toString 做类型的判断

var arr = [];
alert(Object.prototype.toString.call(arr))  //[object Array]
var arr = null;
alert(Object.prototype.toString.call(arr))  //[object Null]
var arr = new RegExp();
alert(Object.prototype.toString.call(arr))  //[object RegExp]

window.onload = function(){var oF = document.createElement('iframe');
    document.body.appendChild(oF);
    var ifArray = window.frames[0]Array;
    var arr = new ifArray();
    
    alert(arr.constructor == Array); //false
    alert(arr instanceof Array); //false
    alert(Object.prototype.toString.call(arr) == '[object Array]') //true
}

子类不影响父类，子类能够继承父类的一些性能（代码复用）
不影响父类的性能
属性的继承：调用父类的构造函数 call
办法的继承：for in 拷贝继承（jquery 也是采纳的 extend）

function CreatePerson(name,sex){
    this.name = name;
    this.sex = sex;
}
CreatePerson.prototype.showName = function(){alert(this.name)
};

function CreateStar(name,sex,job){CreatePerson.call(this,name,sex);
    this.job = job;
}
//CreateStar.prototype = createPerson.prototype;  // 原型会相互影响
extend(CreateStar.prototype,CreatePerson.prototype);
createStar.prototype.showJob = function(){alert(this.job)
}
function extend(obj1,obj2){for(var attr in obj2){obj1[attr] = obj2[attr]
    }
}

// isPlainObject 函数来自于  [JavaScript 专题之类型判断 ( 下) ](https://github.com/mqyqingfeng/Blog/issues/30)
var class2type = {};
var toString = class2type.toString;
var hasOwn = class2type.hasOwnProperty;
function isPlainObject(obj) {
    var proto, Ctor;
    if (!obj || toString.call(obj) !== "[object Object]") {return false;}
    proto = Object.getPrototypeOf(obj);
    if (!proto) {return true;}
    Ctor = hasOwn.call(proto, "constructor") && proto.constructor;
    return typeof Ctor === "function" && hasOwn.toString.call(Ctor) === hasOwn.toString.call(Object);
}

function extend() {
    // 默认不进行深拷贝
    var deep = false;
    var name, options, src, copy, clone, copyIsArray;
    var length = arguments.length;
    // 记录要复制的对象的下标
    var i = 1;
    // 第一个参数不传布尔值的状况下，target 默认是第一个参数
    var target = arguments[0] || {};
    // 如果第一个参数是布尔值，第二个参数是 target
    if (typeof target == 'boolean') {
        deep = target;
        target = arguments[i] || {};
        i++;
    }
    // 如果 target 不是对象，咱们是无奈进行复制的，所以设为 {}
    if (typeof target !== "object" && !isFunction(target)) {target = {};
    }
    // 循环遍历要复制的对象们
    for (; i < length; i++) {
        // 获取以后对象
        options = arguments[i];
        // 要求不能为空 防止 extend(a,,b) 这种状况
        if (options != null) {for (name in options) {
                // 指标属性值
                src = target[name];
                // 要复制的对象的属性值
                copy = options[name];

                // 解决循环援用
                if (target === copy) {continue;}
                // 要递归的对象必须是 plainObject 或者数组
                if (deep && copy && (isPlainObject(copy) ||
                        (copyIsArray = Array.isArray(copy)))) {
                    // 要复制的对象属性值类型须要与指标属性值雷同
                    if (copyIsArray) {
                        copyIsArray = false;
                        clone = src && Array.isArray(src) ? src : [];} else {clone = src && isPlainObject(src) ? src : {};}

                    target[name] = extend(deep, clone, copy);

                } else if (copy !== undefined) {target[name] = copy;
                }
            }
        }
    }
    return target;
};

str.split(‘&’) // 将字符串切分成数组
str.slice()/str.substring()/str.substr() // 截取并返回字符串, 原字符串不会产生扭转
- silce(1,-1) 含第一个下标，不含第二个下标，可传正数 - 2 代表倒数第二位
- substring(1,5) 不能传正数
- substr(i,length) i 是下标，length 代表长度
str.trim() // 移除首尾空格

arr.join(‘#’) // 转成 #宰割的字符串
arr.slice(1,2)
- 含第一个下标，不含第二个下标可传正数 - 2 代表倒数第二位, 返回截取数组，
- 不会扭转原数组
```
var arr = [0,1,2,3,4];  
var res = arr.slice(1,2);  
// arry:[0,1,2,3,4] res:[1]
```
arr.splice(i,length,item1,item2)
- splice(n,m) // 从数组索引 n 开始，删除 m 个元素，删除局部以新数组返回，原来数组产生扭转
```
var arr = [0,1,2,3,4];  
var res = arr.splice(1,2);  
// arry:[1,2] res:[2,3]
```
- splice(n,o,x) 从索引 n 开始，不删除，把 x 增加到索引 n 之前
```
var arr = [1,2,3,4];  
var res = arr.splice(1,0,'珠峰');  
//arr:[1,'珠峰',2,3,4]  res:[]  
```

arr.sort()// 数组排序

 var arr = ['b','a','c'];  
 arr.sort()  // 升序   
 arr.sort().reverse();    // 降序
 
 var arr = [1,40,5];
 // a 是以后项 b 是下一项，后果大于零让他们替换地位
 arr.sort(function(a,b){a-b})  // 数字升序   
 arr.sort(function(a,b){b-a})  // 数字降序

arr.map()

如果 then 没有传入处理函数，则会返回一个继承了上一个解决状态的 Promise 对象

    new Promise((res,rej)=>{rej()
    }).then().then(()=>{console.log(1) },
        ()=>{ console.log(2) }
    )
    //then 没有参数，会返回上一个 Promise 的状态 rej(), 则输入 2

如果 then 传入处理函数，那么默认返回一个全新的 Promise 对象

    new Promise((res,rej)=>{rej()
    }).then(
        // 传入了参数，然而没对返回的 Promise 解决
        // 返回一个胜利状态的 Promise, 下一个 then 会输入 3
        ()=>{ console.log(1) },           
        ()=>{ console.log(2) }
    ).then(()=>{console.log(3) },
        ()=>{ console.log(4) }
    )
    //2,3

如果 then 传入处理函数, 并且手动解决返回

    new Promise((res,rej)=>{rej()
    }).then(
        // 传入了参数，然而没对返回的 Promise 解决
        // 返回一个胜利状态的 Promise, 下一个 then 会输入 3
        ()=>{ console.log(1) },           
        ()=>{console.log(2);
            return new Promise((res,rej)=>{rej() })
        }
    ).then(()=>{console.log(3) },
        ()=>{ console.log(4) }
    )
    //2,4

then 不易终止，一但执行就会把所有的 then 都执行上来

    new Promise((res,rej)=>{rej()
    }).then(()=>{return new Promise((res,rej)=>{rej('登录失败') })
         }
    ).then(()=>{console.log('获取权限') }
    ).then(()=>{console.log('拿到资源') }
    ).catch(
        // 前边任意一个 then 中返回谬误，会间接在最初的 catch 中输入
        ()=>{ console.log('返回谬误') }
    )

    new Promise((res,rej)=>{rej()
    }).then(()=>{return new Promise((res,rej)=>{rej('登录失败') })
         }
    ).then(()=>{console.log('获取权限') },
        ()=>{ console.log('获取权限失败') }// 任意一个 then 中监听谬误，最初的 catch 会被疏忽
    ).then(()=>{console.log('拿到资源') }
    ).catch(()=>{console.log('返回谬误') }
    )

解决 rejected 的状况，与 then 的第二个参数 onRejected 雷同
返回一个 Promise 对象
能够捕捉 catch 之前 then 中的任一谬误（如果之前的 then 中没做错误处理的话）

    new Promise((res,rej)=>{rej()
    }).then(()=>{return new Promise((res,rej)=>{rej('登录失败') })
         }
    ).then(()=>{console.log('获取权限') },
    ).then(()=>{console.log('拿到资源') }
    ).catch(()=>{console.log('返回谬误') }
    ).then(()=>{console.log('catch 之后的 then 还会继续执行') }
    )

let p1 = new Promise((res,rej)=>{setTimeout(()=>{consoel.log(1);resolve(10)
    },2000);
})
let p2 = new Promise((res,rej)=>{setTimeout(()=>{consoel.log(1);resolve(20)
    },3000);
})
// 所有接口执行完，开始执行
Promise.all([p1,p2]).then(arr=>{ console.log(3,arr) });
// 任一接口执行完，开始执行
Promise.race([p1,p2]).then(arr=>{ console.log(3,arr) });

Promise.resolve().then(()=>{console.log(1) },    
    ()=>{ console.log(2) }
)
// 输入 1
Promise.rejected().then(()=>{console.log(1) },    
    ()=>{ console.log(2) }
)
// 输入 2

async 用来申明异步函数，返回的是一个 promise 对象
await 必须在异步函数外部应用，期待后续函数的执行，并且拿到执行的后果

function getVal(num){return new Promise((resolve,rejected)=>{setTimeout(()=>{num<100?resolve(num * 11):rejected('传入的值太大了')
        },200)
    })
}
async function fn(){
    try{
        var v = 1;
        console.log(v)
        var w = await getVal(10);
        console.log(w);
        var y = await getVal(30);
        console.log(y);
        var z = await getVal(200);
        console.log(z);
    } catch(e) {console.log(e)
    }
}
fn()

正文完

javascript

发表至： javascript

2020-07-12

0

2019-Google-IO-大会面向Web开发人员的WebAssembly-下

带入gRPC：gRPC Client and Server

第-5-届-FEDAY-前端大会的完整-PPT-内容已出炉站在大牛的肩膀上学习

关于javascript:玩转-AbortController-控制器

前端进阶面试链表不再怕

Js原型Promise

构造函数

数据类型

原型

原型高级办法

hasOwnProprety

constructor

instanceof

toString()

继承：

extend

String

Array

Promise

then 函数执行后会返回一个新的 Promise 对象，

catch 办法

all()、race()

resolve()、rejected()

async、awiat

站内搜索