构造函数
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) //trueb +=3;alert(a,b) //5,3var a = [1,2,3],b=a;alert(a==b) //trueb.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();
原型高级办法
hasOwnProprety
看是不是对象本身上面的属性
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)
constructor
查看对象构造函数
function Aaa(){}//零碎会主动把构造函数挂载到原型的constructor下//Aaa.prototyoe.constructor = Aaa;var a1 = new Aaa();alert(a1.constructor); //Aaavar arr = [];alert(arr.constructor == Array ); //true 能够做数组的判断
会不小心笼罩掉constructor
function Aaa(){}Aaa.prototype = { name:'小明', age:20}var a1 = new Aaa();alert(a1.constructor); //Object~~~~//须要手动从新指向一下consttuctorAaa.prototype = { constructor:Aaa, name:'小明', age:20}
instanceof
对象与构造函数在原型上是否有关系
function Aaa(){}var a1 = new Aaa();alert(a1 instanceof Aaa); //truealert(a1 instanceof Array); //falsealert(a1 instanceof Object); //true
toString()
- 把对象转为字符串
零碎对象上面都是自带的,本人写的对象都是通过原型链找Object上面的
var arr = [];alert(arr.toString == Array.prototype.toString); //truealert(arr.toString == Object.prototype.toString); //falsefunction Aaa(){}var a1 = new Aaa();alert(a1.toString == Aaa.prototype.toString); //false Aaa下没有toString办法alert(a1.toString == Object.prototype.toString); //truevar 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] }}
extend
// 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;};
String
- str.split('&') //将字符串切分成数组
str.slice()/str.substring()/str.substr() //截取并返回字符串,原字符串不会产生扭转
- silce(1,-1) 含第一个下标,不含第二个下标,可传正数-2代表倒数第二位
- substring(1,5) 不能传正数
- substr(i,length) i是下标,length 代表长度
- str.trim() //移除首尾空格
Array
- 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()
Promise
then函数执行后会返回一个新的Promise对象,
如果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('返回谬误') } )
catch办法
- 解决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还会继续执行') } )
all()、race()
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) });
resolve()、rejected()
Promise.resolve().then( ()=>{ console.log(1) }, ()=>{ console.log(2) })//输入 1Promise.rejected().then( ()=>{ console.log(1) }, ()=>{ console.log(2) })//输入 2
async、 awiat
- 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()