JS核心之ES6应用基础(二)

前端呆头鹅
38 阅读4分钟

对象简化

属性简化

对象的属性值来自于对象外的变量，且变量名刚好和属性名相同时，可以参照对象解构中 的简化方式，无需重复写出两个相同的名，写一遍即可。

obj{
	属性名:变量名 => 属性名/变量名 
	//属性名与变量名相同时可省略冒号及后面的变量名
}

方法简化

可以省略:function。

注：由于箭头函数会使this发生变化，对象中的方法不可使用箭头函数简写。

obj{
	方法名: function(){...} => 方法名(){...}
}

class

特点

class可以封装一个对象的构造函数与原型对象，使两者定义于同一程序结构中，利于程序的模块化。
当要实现两种类型间的继承时，可以将两者共同的部分封装在上层父类型中集中保存。

封装

class的封装分为三步:

  1. 创建最外层class，class后跟随类名，即原构造函数名。
  2. 在class内添加以constructor为名的构造函数。
  3. 在class内直接添加方法，方法自动保存在构造函数的原型对象中。
class Student2{
	constructor(sname,sage){
		this.sname = sname;
		this.sage = sage;
	}
	intr(){
		console.log(this.sname,this.sage);
	}	
}

注：封装完成后，使用方法与原构造函数相同，具体见前几篇文章 对象的封装继承和多态。

继承

子类继承父类：

class 子类型 extends 父类型{
	super();
	...
}

extend可以使子类型继承父类型的原型对象内容，而super()可以调用父类型构造函数，使子类型继承父类的属性私有部分。
两者必须共同使用。

promise

优势

保证多个异步函数，可以顺序执行的机制。优化了异步回调，防止回调地狱。
当我们希望多个异步函数之间相互等待，顺序执行时，直接顺序书写在主程序中式无法达到效果的，每个异步函数都是一条单独的跑道，而主程序是持续执行的，不会等待异步函数执行完毕，如果直接写在主函数中，几个异步函数几乎是同步执行的，当上一个异步函数开始时，下一个函数就开始执行。
传统的解决方法是使用回调函数，将下一个任务作为回调函数传入上一个任务中，在上一个任务的函数末端进行主动调用，将单独的跑道变为了接力跑道，脱离了主程序。
但当连续执行的异步函数非常多时，就会出现多个回调函数嵌套，程序冗长复杂，可读性差，这就是回调地狱。
回调函数嵌套传参的写法是造成回调地狱的根源。

function liang(next){
	console.log("亮起跑..");
	setTimeout(function(){
		console.log("亮终点..");
		next();
	},6000);
}
function dong(next){
	console.log("东起跑..");
	setTimeout(function(){
		console.log("东终点..");
		next();
	},6000);
}
function ran(next){
	console.log("然起跑..");
	setTimeout(function(){
		console.log("然终点..");
		next();
	},6000);
}
console.log("比赛开始！pia！");

//回调函数 实现多个异步顺序执行 嵌套太多形成回调地狱
liang(
//liang next
	function(){
		dong(
//dong next
			function(){
			 	ran(
			 	//ran next
			 		function(){
			 			console.log("比赛结束！");
			 		}
			)}
		);
	}
)

promise

promise可以避免回调地狱的产生，promise的使用也分为三步。

  1. 创造promise对象:在原函数内部，返回promise对象包裹的函数体。
  2. 在函数体后添加调用promise的回调函数中的形参，形参名称任意，示例中为para。
function 函数名(){
	return new Promise(
		function(para){
			...
        	函数体
        	...
        	para(); 
		}
	)
}

para是一个形参，该参数代表着下一个then中的参数，也就是下一个任务，当我们写para(),代表着下一个任务开始执行，para()也可以携带参数，参数会自动赋给下一个任务的形参。

  1. 函数调用
前一个异步函数().then(下一个异步函数)

liang()
.then(ran)
.then(dong)
.then(()=>console.log("比赛结束!"));

示例：

function liang(){
	return new Promise(
		function(door){
			var b = "接力棒";
			console.log("亮起跑..");
			setTimeout(function(){				
					console.log("亮终点..");
					door(b);//传出参数 自动给后续then中形参				
			},Math.random()*6000);
		}
	)
}
function ran(b){
	return new Promise(
		function(door){
			var b = "接力棒";
			console.log("然起跑..");
			setTimeout(function(){				
					console.log("然终点..");
					door(b);//传出参数 自动给后续then中形参				
			},Math.random()*6000);
		}
	)
}
function dong(b){
	return new Promise(
		function(door){
			var b = "接力棒";
			console.log("东起跑..");
			setTimeout(function(){				
					console.log("东终点..");
					door(b);//传出参数 自动给后续then中形参				
			},Math.random()*6000);
		}
	)
}

//连锁运行及报错处理
liang()
.then(ran)
.then(dong)
.then(()=>console.log("比赛结束!"));

promise.all

等待多个异步任务完成才执行，

Promise.all([
	可以添加函数体和支持promise的函数调用(),
	..., 
	...
]).then(function(arr){ 后续操作...})

then中的参数可以以数组的形式保存Promise.all中的promise函数的返回值，无返回值可省略。

avatar
文章
阅读
粉丝