this-closure

Author: wang-jun-coder

Note/closure/closure.js

@@ -0,0 +1,92 @@
+(function() {
+
+	function fn() {
+		// a 为函数作用域, 在 a 声明后, 函数体内均可访问该变量
+		const a = 'a';
+		console.log(a);
+	}
+	fn();
+
+	// 变量 b 挂载在全局对象上, 其作用域是全局的, 无论嵌套多少层均可访问
+	global.b = 'b';
+	console.log(b);
+
+}); //();
+
+(function(){
+
+	// 块级作用域, 作用范围为代码块内{}, 
+	// ES6 之前, js 只有函数作用域, 部分使用场景必须使用闭包来进行变量保持
+	// ES6 引入 let/const 关键字, 这两个关键字声明的变量具备块级作用域
+
+	function f1() {
+		// var 存在变量提升, 函数作用域内可在声明代码之前访问该变量
+		console.log(a);	// undefined
+		var a = 1;
+		console.log(a);	// 1
+
+		console.log(b);	// undefied
+		// var 没有块级作用域, 此代码块无效
+		{	
+			var b = 2;
+		}
+		console.log(b); // 2
+	}
+	f1();
+
+	function f2() {
+		// 使用 let/const 存在暂时性死区, 在声明代码之前访问会报引用错误
+		// console.log(a); // 暂时性死区
+		// ReferenceError: a is not defined
+		const a = 1;
+		console.log(a);
+
+		{
+			const b = 2;
+			console.log(b); // 块级作用域内有效
+		}
+		// console.log(b); // b 在代码块中声明, 使用 const 具备块级作用域, 故超出代码块该变量已失效
+		// ReferenceError: b is not defined
+	}
+	f2();
+}); // ();
+
+
+(function(){
+	'use strict'
+
+	function f1() {
+		// 变量 a 由 var 声明, 存在变量提升, 声明提前, 函数体内均可访问
+		console.log(a); // undefind 
+
+		// 变量 b 由 const 声明, 具备块级作用域, 不存在变量提升. 在函数开始, 至变量 b 声明之前, b 变量不可访问, 这块区域称为暂时性死区
+		//console.log(b); // ReferenceError: b is not defined
+
+		var a = 1;
+		const b = 2;
+
+		console.log(`${a}, ${b}`);
+	}
+	f1();
+
+	// 函数 f2 这也是一种暂时性死区, arg2 尚未声明, 故不能使用
+	function f2(arg1 = arg2, arg2) {
+		console.log(`${arg1} ${arg2}`);
+	}
+	f2(undefined, 1); // ReferenceError: arg2 is not defined
+
+
+
+})();
+
+
+
+
+
+
+
+
+
+
+
+

Note/closure/closure.md

@@ -0,0 +1,112 @@
+## 闭包
+
+### 前置概念
+#### 作用域
+**作用域实际上是一套规则，用于确定在特定场景下如何查找变量**
+
+* 函数作用域与全局作用域
+	* 函数作用域则表示在函数体内有效
+	* 全局作用域，则在全局生效
+	
+	示例代码
+	
+	```js
+	function fn() {
+		// a 为函数作用域, 在 a 声明后, 函数体内均可访问该变量
+		const a = 'a';
+		console.log(a);
+	}
+	fn();
+
+	// 变量 b 挂载在全局对象上, 其作用域是全局的, 无论嵌套多少层均可访问
+	global.b = 'b';
+	console.log(b);
+	```
+	
+* 块级作用域
+	* 作用于代码块内({})
+	* 示例代码
+
+	```js
+	// 块级作用域, 作用范围为代码块内{}, 
+	// ES6 之前, js 只有函数作用域, 部分使用场景必须使用闭包来进行变量保持
+	// ES6 引入 let/const 关键字, 这两个关键字声明的变量具备块级作用域
+
+	function f1() {
+		// var 存在变量提升, 函数作用域内可在声明代码之前访问该变量
+		console.log(a);	// undefined
+		var a = 1;
+		console.log(a);	// 1
+
+		console.log(b);	// undefied
+		// var 没有块级作用域, 此代码块无效
+		{	
+			var b = 2;
+		}
+		console.log(b); // 2
+	}
+	f1();
+
+	function f2() {
+		// 使用 let/const 存在暂时性死区, 在声明代码之前访问会报引用错误
+		// console.log(a); // 暂时性死区
+		// ReferenceError: a is not defined
+		const a = 1;
+		console.log(a);
+
+		{
+			const b = 2;
+			console.log(b); // 块级作用域内有效
+		}
+		// console.log(b); // b 在代码块中声明, 使用 const 具备块级作用域, 故超出代码块该变量已失效
+		// ReferenceError: b is not defined
+	}
+	f2();
+	```
+* 暂时性死区
+	* 作用域内，变量声明前，不可访问该变量，这块区域称为暂时性死区
+	* 示例代码
+	
+	```js
+	function f1() {
+		// 变量 a 由 var 声明, 存在变量提升, 声明提前, 函数体内均可访问
+		console.log(a); // undefind 
+
+		// 变量 b 由 const 声明, 具备块级作用域, 不存在变量提升. 在函数开始, 至变量 b 声明之前, b 变量不可访问, 这块区域称为暂时性死区
+		//console.log(b); // ReferenceError: b is not defined
+
+		var a = 1;
+		const b = 2;
+
+		console.log(`${a}, ${b}`);
+	}
+	f1();
+
+	// 函数 f2 这也是一种暂时性死区, arg2 尚未声明, 故不能使用
+	function f2(arg1 = arg2, arg2) {
+		console.log(`${arg1} ${arg2}`);
+	}
+	f2(undefined, 1); // ReferenceError: arg2 is not defined
+	```
+
+#### js 执行
+* 执行步骤
+	* 预编译阶段
+	* 执行阶段
+* 执行上下文与调用栈
+
+### 闭包
+
+#### 闭包定义与示例
+
+#### 内存管理
+
+#### 内存泄露
+
+#### 垃圾回收
+
+### 应用场景
+
+### 参考资料
+* [老司机也会在闭包相关知识点翻车](https://gitbook.cn/gitchat/column/5c91c813968b1d64b1e08fde/topic/5c99a9a3ccb24267c1d01960)
+

Note/this/apply.js

@@ -0,0 +1,27 @@
+// 完整实现 https://github.com/wang-jun-coder/node-every-day/blob/d5c57789152db6be0a80ac7a5cb4e66ec5790580/js-%E5%9F%BA%E7%A1%80/simulate/apply.js#L25
+function apply(obj, args) {
+	if ('function' !== typeof this) throw new TypeError('apply must be called by function');
+
+	const target = new Object(obj);
+	const key = Symbol('target-key');
+
+	target[key] = this;
+
+	const ret = target[key](...args);
+	delete target[key];
+	return ret;
+}
+
+Function.prototype.c_apply = Function.prototype.c_apply || apply;
+
+
+function fn(a, b) {
+	this.c = a+b;
+}
+
+
+const a = {};
+fn.c_apply(a, [1, 2]);
+console.log(a);
+
+

Note/this/bind.js

@@ -0,0 +1,27 @@
+function bind(obj, ...args) {
+	if ('function' !== typeof this) throw new TypeError('bind must be called by function');
+
+	const self = this;
+	// 构造原型
+	function F(){};
+	F.prototype = this;
+
+	function bound(...innerArgs) {
+		return self.apply(this.prototype && this.instanceof(F) ? this : obj || this, [...args, ...innerArgs]);
+	}
+	// new 一个实例, 避免原型污染
+	bound.prototype = new F();
+	return bound;
+}
+
+Function.prototype.c_bind = Function.prototype.c_bind || bind;
+
+
+function fn(a, b) {
+	this.c = a +b;
+}
+
+const a = {};
+
+fn.c_bind(a)(1,2);
+console.log(a);

Note/this/call.js

@@ -0,0 +1,23 @@
+// https://github.com/wang-jun-coder/node-every-day/blob/d5c57789152db6be0a80ac7a5cb4e66ec5790580/js-%E5%9F%BA%E7%A1%80/simulate/call.js#L1
+function call(obj, ...args) {
+
+	if ('function' !== typeof this) throw new TypeError('call must be called by function');
+
+	const target = new Object(obj);
+	const key = Symbol('target-key');
+	target[key] = this;
+
+	const ret = target[key](...args);
+	delete target[key];
+	return ret;
+}
+
+Function.prototype.c_call = Function.prototype.c_call || call;
+
+function fn(a, b) {
+	this.c = a+b;
+}
+
+const a = {};
+fn.call(a, 1, 2);
+console.log(a);

Note/this/hook.js

@@ -0,0 +1,16 @@
+const express = require('express');
+const app = express();
+app.use(function(req, res, next) {
+	// 利用 apply/call 可以 hook 函数的对应事件, 比如此处用于统计请求时间
+	console.time(`${req.method} ${req.url}`);
+	const end = res.end;
+	res.end = function(...args) {
+		end.apply(res, args);
+		console.timeEnd(`${req.method} ${req.url}`);
+	}
+	next();
+});
+app.get('/', function(req, res, next) {
+	res.end('hello world');
+});
+app.listen(3000);