二刷高级js之新领悟

JavaScript

V8引擎工作原理：

文件流 -> A.词法、语法解析 -> B.parse编译+preparse -> C.字节码 -> 机器码

A阶段. GO中的变量提升
B阶段. 确定作用域范围
C阶段. 边解释边执行： 解释成全平台通用的字节码，再交给CPU翻译成机器码

解析js代码De过程

1. 首先在内存中创建GO对象（声明全局属性/方法）
2. 其次在内存中创建执行上下文栈（ECS），准备编译
3. 词法语法解析：解析全局作用域，准备执行
   首先创建全局执行上下文（GEC），VO指向GO
   紧接着开始声明变量
4. 执行赋值/函数调用：
   赋值：在栈中赋值，同时改变GO中的值
   调用函数：首先在内存中创建函数执行上下文（FEC）
   紧接着解析变量，VO指向该函数AO，变量赋值，作用域确立

函数

函数是一等公民：可做另一函数的参数，及返回值，或单独使用

1. 普通函数：单独使用
2. 高阶函数：
   A.接受函数作为入参的函数 或 接受返回值为函数的函数
   A.比如 map filter find findIndex reduce等
   B.把接收多个参数的函数，变成接收一个参数的函数，且返回剩余参数跟函数的函数
3. 纯函数：固定的输入，产出相同的输出（无side effect: 不做与外界交互的操作）

函数跟变量的交集

1. 普通函数跟变量的交集：
   函数执行结束，函数弹出栈，函数AO销毁，且因从根对象[GO]的不可达，即将被GC回收
   栗子：function foo() {var name = ‘tom’ log(name)}
2. 闭包函数跟变量的交集:
   函数执行结束，函数弹出栈，函数AO因为内部函数作用域内的变量引用这AO环境中的变量，因此不能被销毁
   栗子：function foo() { // foo 就称为闭包函数
   var name = ‘tom’
   var age = 12
   return function() { // 内层函数 内部引用着外层作用域中的自由变量name，导致foo的AO环境被保留
   debugger // 控制台中打印age 发现age is not defined 由于V8引擎做了优化 在OA中无用变量自动销毁
   log(name)
   }
   }
   var fn = foo()
   fn()

this指向

1.this是在函数运行时产生。
由于调用方法不同，this指向不同：
默认绑定：作为独立函数调用；
栗子：foo()
隐式绑定：作为对象的方法调用；
栗子：obj.eating()
显式绑定：call/apply/bind()
栗子：var bar = fn.bind(‘123’); bar()；
new绑定：new foo.bar()
特殊绑定规则：
A.call(undefined/null, 1) // this绑定到window
B.箭头函数

arguments.callee

1.在函数内部使用，表示调用arguments的当前函数,降低耦合；
栗子：function foo() {
console.log(arguments.callee) // Function function foo() {log(…)}
}
1-1.是个类数组对象array-like：-> []
A.Array.prototype.slice.call(arguments)
通过原型调用方法、slice返回新数组、arguments可遍历（不能map）
B.Array.from(arguments)
C.[…arguments]
2.箭头函数没有arguments, 用…rest参数代替

js方法实现原理

slice

// slice 不改变原数组
---------------------使用
var arr = [1, 2, 3, 4]
var newArr = arr.slice(1, 3)
console.log(newArr)
--------------------实现

Array.prototype.slice = function() {
	// this -》 arr
	var arr = this
	var n = []
	for (var i = 0; i < arr.length - 1; i++) {
		n.push(arr[i])
	}
	return n
}

splice

// 改变原数组

柯里化函数的实现

function tomCurring(fn) {
	return function() {
		// ...
	}
}
var curryAdd = tomCurring(add1)
add1(10, 20, 30)
curryAdd(10)(20)(30)