ES6 原型闭包异步 - Js - 综合技术 | Yume Shoka = 山河 = 你喜欢我吗

# 前言

复习 ES6 部分知识

# 闭包

闭包让你可以在一个内层函数中访问到其外层函数的作用域，那么也就是函数的标识符跨作用域

# 标识符

标识符是变量名、函数名、函数的形参、对象的属性

# 实例

fn() 创建了一个局部变量 num 并且返回一个匿名函数，它没有自己的局部变量，然而它可以访问到外部函数的变量。外部函数返回内部函数，内部函数标识符要跨作用域

	function fn() {
	var num = 10;
	return function () {
	return num;
	}
	}
	let r = fn()
	console.log(r());

使用立即执行函数调用一次，外部函数把内部函数 fn() 挂载在 window 下，此时内部函数要跨作用域

	; (function () {
	var num = 10;
	window.fn = function () {
	return num;
	}

	})();
	console.log(fn());

# 作用

保护变量，防止全局污染。形成一个简单块级作用域

# 经典面试题

我们要知道先走同步再走异步，如果此时使用 var 声明的变量是全局变量，此时循环走完后 i=5 ，所以定时器里面的结果也是 5；如果此时使用 let 声明的变量是区块变量，每次循环会形成一个块级作用域，所以结果将会是 0-4；使用函数的形参来保存每次循环的 i ，其实定时器里面跨作用域是闭包，这样我们改写后同样也能得到熟悉的 0-4

	for (var i = 0; i < 5; i++) {
	setTimeout(function () {
	console.log(i);
	});
	}
	for (let i = 0; i < 5; i++) {
	setTimeout(function () {
	console.log(i);
	});
	}
	for (var i = 0; i < 5; i++) {
	function _loop(i) {
	setTimeout(function () {
	console.log(i);
	});
	};
	_loop(i);
	}

# 原型、原型链

每个函数 (箭头函数除外) 都有一个 prototype 显示原型，它的值是一个对象
每个实例对象里面都有 __proto__ 隐式原型，它指向构造函数的显式原型
prototype 显示原型里面的 constructor 构造器，它指向构造函数本身
原型链的查找规则是就近原则，一层层向上查找

# 构造函数的写法

构造函数命名规则是大驼峰
构造函数的属性和方法都是挂载在 this 上
构造函数没有 return
它的实例对象通过关键字 new 得到

# 实例对象的原理

创建一个空对象
把构造函数的 this 指向这个空对象
执行构造函数，给这个对象添加属性和方法
把上面这个对象返回

# 原型链图

意思到了就行了

查看图片

# 异步和单线程

常见的异步：定时器、Ajax、回调函数、事件处理函数

平常经常会写出层层嵌套代码形成回调地狱

# Promise

Promise 对象用于表示一个异步操作的最终完成 (或失败) 及其结果值

	new Promise(resolve => {
	console.log(1)
	setTimeout(function () {
	console.log(2)
	resolve()
	}, 3000)
	}).then(data => console.log(3))

# Axios

axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

axios.get("./serve/a.json").then(res => axios.get("./serve/b.json?id=" + res.data.id)).then(res => axios.get("./serve/c.json?code=" + res.data.code)).then(res => console.log(res.data))

# Async

async 函数是使用 async 关键字声明的函数， async 和 await 关键字让我们可以用一种更简洁的方式写出基于 Promise 的异步行为，而无需刻意地链式调用

	function setTime() {
	return new Promise(resolve => {
	setTimeout(function () {
	console.log(2)
	resolve("success")
	}, 1000)
	})
	}
	async function consoleLog() {
	console.log(1);
	let res = await setTime();
	console.log(res);
	console.log(3);
	}
	consoleLog()