共计 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();
原型高级办法
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); //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
}
instanceof
对象与构造函数在原型上是否有关系
function Aaa(){}
var a1 = new Aaa();
alert(a1 instanceof Aaa); //true
alert(a1 instanceof Array); //false
alert(a1 instanceof Object); //true
toString()
- 把对象转为字符串
-
零碎对象上面都是自带的,本人写的对象都是通过原型链找 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]
}
}
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) }
)
// 输入 1
Promise.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()
正文完
发表至: javascript
2020-07-12