前言
本文目标
从JS的运行，设计，数据，应用四个角度来梳理JS核心的知识点
主题大纲
JS运行
变量提升
执行上下文
作用域
let
作用域链
闭包
事件循环
JS设计
原型
原型链
this
call
apply
bind
new
继承
JS数据
数据类型
数据的存储（深浅拷贝）
数据类型判断（隐式转换，相等和全等，两个对象相等）
数据的操作（数组遍历，对象遍历）
数据的计算（计算误差）
JS应用
防抖，节流，柯里化
一. JS运行
大概分为四个阶段
词法分析：将js代码中的字符串分割为有意义的代码块，称为
词法单元
浏览器刚拿到一个JS文件或者一个script代码段的时候，它会认为里面是一个长长的字符串
这是无法理解的，所以要分割成有意义的代码块，比如:
var a = 1
语法分析：将词法单元流转换成一颗 抽象语法树(AST)，并对生成的AST树节点进行处理，
比如使用了ES6语法，用到了let,const，就要转换成var。
为什么需要抽象语法树呢？
抽象语法树是不依赖于具体的文法，不依赖于语言的细节，方便做很多的操作
另一方面说，现在有许多语言，C，C++，Java，Javascript等等，他们有不同的语言规范
但是转化成抽象语法树后就都是一致的了，方便编译器对其进行进一步的增删改查等操作，
预解析阶段：
会确定作用域规则
变量和函数提升
执行阶段：
创建执行上下文，生成执行上下文栈
执行可执行代码，依据事件循环
1.作用域
指定了函数和变量的作用范围
分为
全局作用域和函数作用域，JS不像C，JAVA语言一样，没有块级作用域,简单说就是花括号的范围
2.变量和函数提升
全局变量和函数声明会提升
函数声明方式有三种，
function foo() {}var foo = function () {}var foo = new Function()可归为两类，
直接创建和变量赋值
变量赋值函数和赋值普通变量的优先级按位置来，变量名相同前者被覆盖函数直接创建优先级高于变量赋值，同名取前者，与位置无关，也就是说函数直接创建即使再变量声明后面，也是优先级最高
3. 执行上下文
有不同的作用域，就有不同的执行环境，我们需要来管理这些上下文的变量
执行环境分为三种，执行上下文对应执行环境
全局执行环境
函数执行环境
eval执行环境（性能问题不提）
全局执行上下文
先找变量声明，
再找函数声明
函数执行上下文
先找函数形参，和变量声明
把实参赋值给形参
找函数声明
多个函数嵌套，就会有多个执行上下文，这需要
执行上下文栈来维护，后进先出执行上下文里包含着
变量环境和词法环境变量环境里就包含着当前环境里可使用的变量当前环境没有用哪的, 这就说到了
作用域链
4. 作用域链
引用JS高程的定义：作用域链来保证对执行环境有权访问的变量和函数的有序访问
变量的查找顺序不是按执行上下文栈的顺序，而是由
词法作用域决定的词法作用域也就是
静态作用域，由函数声明的位置决定，和函数在哪调用无关，也就js这么特殊
5. 静态作用域和动态作用域
词法作用域是在写代码或者定义时确定的
而动态作用域是在运行时确定的（
this也是！）
var a = 2; function foo() { console.log(a); // 静态2 动态3 } function bar() { var a = 3; foo(); } bar();闭包
由于
作用域的限制，我们无法在函数作用域外部访问到函数内部定义的变量，而实际需求需要，这里就用到了闭包引用JS权威指南定义：闭包是指有权访问另一个函数作用域中的变量的函数
1. 闭包作用
for循环遍历进行事件绑定输出i值时为for循环的长度+1这结果显示不是我们想要的, 因为JS没有块级作用域，var定义的i值，没有销毁，存储与全局变量环境中
在事件具体执行的时候取的i值，就是全局变量中经过多次计算后的i值
for(var i = 0;i < 3;i++){ document.getElementById(`item${i+1}`).onclick = function() { console.log(i);//3，3，3 } }闭包特性：外部函数已经执行结束，内部函数引用外部函数的变量依然保存在内存中,变量的集合可称为
闭包在编译过程中，对于内部函数，JS引擎会做一次此法扫描，如果引用了外部函数的变量，堆空间创建换一个
Closure的对象,用来存储闭包变量利用此特性给方法增加一层闭包存储当时的i值， 将事件绑定在新增的匿名函数返回的函数上
for(var i = 0;i < 3;i++){ document.getElementById(`item${i+1}`).onclick = make(i);}function make(e) { return function() { console.log(e)//0，1，2};闭包注意
我们在不经意间就写成了闭包，内部函数引用外部函数的变量依然保存在内存中，
该销毁的没有销毁，
由于疏忽或错误造成程序未能释放已经不再使用的内存，就造成了内存泄漏同时注意闭包不会造成内存泄漏，我们错误的使用闭包才是内存泄漏
事件循环
JS代码执行依据 事件循环
JS是单线程，通过异步保证执行不被阻塞
执行机制
简单说就是，一个执行栈，两个任务队列
发现宏任务就放入宏任务队列，发现微任务就放入微任务队列，
执行栈为空时，执行微任务队列所有微任务，再取宏任务队列一个宏任务执行
如此循环
宏&微任务 macroTask: setTimeout, setInterval, I/O, UI rendering microTask: Promise.then
二. JS设计
1. 原型
JS的设计
有new操作符，构造函数，却没有类的概念，而是使用原型来模拟类来实现继承
JS设计心路历程
JS在设计之初，给的时间较短，并且定义为简单的网页脚本语言，不用太复杂，且想要模仿Java的理念，(这也是为什么JS叫JavaScript的原因)
因此就借鉴了Java的
对象、构造函数、new操作符理念，而抛弃掉了了复杂的class(类)概念
继承机制
需要有一种
继承的机制，来把所有对象联系起来，就可以使用构造函数但是构造函数生成实例对象的缺点就是
无法共享属性和方法
prototype属性
为解决上面问题，就引入了
prototype属性，就是我们常说的原型为构造函数设置一个
prototype属性，实例对象需要共享的方法,都放在此对象上，
整个核心设计完成后，后面的API也就顺理成章
原型
每一个js对象在创建的时候就会与之关联另一个对象
这个对象就是原型，每个对象都会从原型继承属性
proto
每个对象都有一个属性叫proto,该属性指向对象的原型
构造函数的prototype属性等于实例化对象的proto属性
此属性并不是ES5 中的规范属性，只是为了在浏览器中方便获取原型而做的一个语法糖，
我们可以使用
Object.getPrototype()方法获取原型
constructor原型没有指向实例，因为一个构造函数可以有多个对象实例 但是原型指向构造函数是有的，每个原型都有一个constructor属性指向关联的构造函数
function Per() {} // 构造函数const chi = new Per() // 实例对象chi.__proto__ === Per.prototype // 获取对象的原型 也是就构造函数的prototype属性Per.prototype.constructor === Per // constructor属性 获取当前原型关联的构造函数
实例与原型
读取实例属性找不到时，就会查找与对象关联的原型的属性，一直向上查找，
这种实例与原型之间的链条关系，这就形成了
原型链
function Foo() {} Foo.prototype.name = 'tom' const foo = new Foo() foo.name = 'Jerry' console.log(foo.name); // Jerry delete foo.name console.log(foo.name); // tom2.原型链
首先亮出大家熟悉的网图
就是实例与构造函数，原型之间的链条关系
实例的 proto 指向 原型
构造函数的 prototype 属性 指向 原型
原型的 constructor 属性 指向 构造函数
所有构造函数的 proto 指向 Function.prototype
Function.prototype proto 指向 Object.prototype
Object.prototype proto 指向 null
函数对象原型（Function.prototype） 是负责造构造函数的机器，包含Object、String、Number、Boolean、Array，Function。再由构造函数去制造具体的实例对象
function Foo() {}// 1. 所有构造函数的 __proto__ 指向 Function.prototypeFoo.__proto__ // ƒ () { [native code] }Function.__proto__ // ƒ () { [native code] }Object.__proto__ // ƒ () { [native code] }// 2. 所有构造函数原型和new Object创造出的实例 __proto__ 指向 Object.prototypevar o = new Object()o.__proto__ // {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ ...}Function.prototype.__proto__ // {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ ...}// 3. Object.prototype 指向nullObject.prototype.__proto__ // null
2. this
作为对象方法调用时，指向该对象
obj.b();// 指向obj`作为函数方法调用,
var b = obj.b; b();// 指向全局window（函数方法其实就是window对象的方法，所以与上同理，谁调用就指向谁）作为构造函数调用
var b = new Per();// this指向当前实例对象作为call与apply调用
obj.b.apply(object, []);// this指向当前指定的值
谁调用就指向谁
const obj = {a: 1, f: function() {console.log(this, this.a)}}obj.f(); // 1const a = 2;const win = obj.f;win(); // 2function Person() {this.a = 3;this.f = obj.f;}const per = new Person()per.f() // 3const app = { a: 4 }obj.f.apply(app); // 4
this 指向是动态作用域，谁调用指向谁,
3. call
定义：使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法
举例：
var obj = { value: 1,}function foo (name, old) { return { value:this.value, name, old }} foo.call(obj, 'tom', 12); // {value: 1, name: "tom", old: 12}要求：
call改变了this的指向,
执行了foo函数
支持传参，参数个数不固定
this参数可以传null，传null时 指向window
函数可以有返回值
非函数调用判断处理
实现及思路
Function.prototype.call1 = function (context, ...args) { if(typeof this !== 'function') {throw new Error('Error')} // 非函数调用判断处理 context = context || window; // 非运算符判定传入参数 null则指向window const key = Symbol(); // 利用symbol创建唯一的属性名，防止覆盖原有属性 context[key] = this; // 把函数作为对象的属性，函数的this就指向了对象 const result = context[key](...args) // 临时变量赋值为执行对象方法 delete context[key]; // 删除方法，防止污染对象 return result // return 临时变量}应用场景 改变this指向，大部分是为了借用方法或属性
判断数据类型，借用
Object的toString方法Object.prorotype.toString.call()
子类继承父类属性，
function Chi() {Par.call(this)}
4. apply
定义：使用一个指定的 this 值和一个数组（数组包含若干个指定的参数值）的前提下调用某个函数或方法
举例：
var obj = { value: 1,}function foo (name, old) { return { value:this.value, name, old }} foo.apply(obj, ['tom', 12], 24); // {value: 1, name: "tom", old: 12}要求：
call改变了this的指向,
执行了foo函数
支持传参，第二个参数为数组，之后的参数无效，数组内参数个数不固定,
this参数可以传null，传null时 指向window
函数可以有返回值
非函数调用判断处理
实现及思路
Function.prototype.apply1 = function (context, args) { // 与call实现的唯一区别，此处不用解构 if(typeof this !== 'function') {throw new Error('Error')} // 非函数调用判断处理 context = context || window; // 非运算符判定传入参数 null则指向window const key = Symbol(); // 利用symbol创建唯一的属性名，防止覆盖原有属性 context[key] = this; // 把函数作为对象的属性，函数的this就指向了对象 const result = context[key](...args) // 临时变量赋值为执行对象方法 delete context[key]; // 删除方法，防止污染对象 return result // return 临时变量}应用场景
同 call
5. bind
定义
bind方法创建一个新函数，
新函数被调用时，第一个参数为运行时的this,
之后的参数会在传递实参前传入作为它的参数
举例
const obj = { value: 1};function foo(name, old) { return { value: this.value, name, old }}const bindFoo = foo.bind(obj, 'tom'); bindFoo(12); // {value: 1, name: "tom", old: 12}要求
返回一个函数，第一个参数作为执行时this
可以在bind时传一部分参,执行函数时再传一部分参
bind函数作为构造函数，this失效，但参数有效，
并且作为构造函数时，原型应指向绑定函数的原型，以便实例来继承原型中的值
非函数调用bind判断处理
实现及思路
Function.prototype.bind1 = function (context, ...args) { if(typeof this !== 'function') {throw new Error('Error')} // 非函数调用判断处理 const self = this; // 保存当前执行环境的this const Foo = function() {} // 保存原函数原型 const res = function (...args2) { // 创建一个函数并返回 return self.call( // 函数内返回 this instanceof res ? this : context, // 作为构造函数时，this指向实例，：作为普通函数this正常指向传入的context ...args, ...args2) // 两次传入的参数都作为参数返回 } Foo.prototype = this.prototype; // 利用空函数中转，保证在新函数原型改变时bind函数原型不被污染 res.prorotype = new Foo(); return res;}6. new
看看new出的实例能做什么
可访问构造函数的属性
访问prototype的属性
构造函数如有返回值，返回对象，实例则只能访问返回的对象中的属性，this无效
返回基本类型值，正常处理，this有效
function Persion(name, age) { this.name = name; this.age = age;}Person.prototype.sayName = function () { console.log(this.name)}var per = new Person('tom', 10)per.name // 10 可访问构造函数的属性per.sayName // tom 访问prototype的属性new实现
var person = factory(Foo)function factory() { // new是关键字，无法覆盖，函数替代var obj = {}; // 新建对象objvar con = [].shift.call(arguments); // 取出构造函数obj._proto_ = con.prototype; // obj原型指向构造函数原型var res = con.apply(obj, arguments); // 构造函数this指向objreturn typeof(res) === 'object' ? ret : obj;}
7. 继承
原型链继承和原型式继承
无法向父类传参数，只能共用属性
借用构造函数和寄生继承
方法不在原型上，每次都要重新创建
组合继承
虽然解决了以上俩个问题，但是调用了两次父亲，
实例和原型上会用相同属性
寄生组合继承
目前最优方案
寄生组合继承实现
function P (name) { this.name = name; } // 父类上绑定属性动态传参P.prototype.sayName = function() { // 父类原型上绑定方法console.log(111)}function F(name) { // 子类函数里，父类函数利用`call`函数this指向子类，传参并执行P.call(this, name)}const p = Object.create(P.prototype) // Object.create 不会继承构造函数多余的属性和方法p.constructor = F; // constructor属性丢失，重新指向F.prototype = p; // 子类原型 指向 中转对象const c = new F('tom'); // 子类实例 化c.name // tomc.sayName() // 111
三. JS数据
1.数据类型
JS分为基本类型和引用类型
基本类型：
BooleanUndefinedStringNumberNullSymbol引用类型：
ObjectFuncitonArray等
2.数据存储 （深浅拷贝）
js数据类型中分为基本类型，和引用类型
基本类型 保存在栈内存中
赋值时 编译系统重新创建一块内存来存储新的变量 所以基本类型变量赋值后就断绝了关系
引用类型 保存在堆内存中
赋值时 只是对对象地址的拷贝 没有开辟新的内存，堆内存地址的拷贝，两者指向了同一地址
修改其中一个，另外一个就会收到影响
两个对象 指向了同一地址 修改其中一个就会影响另一个
特殊的数组对象方法（深拷贝一层）
obj2 = Object.assign({}, obj1)
arr2 = [].concat(arr1)
arr2 = arr1.slice(0)
arr2 = Array.form(arr1)
arr2 = [...arr1];
以上方法都只能深拷贝一层
JSON.parse(JSON.stringify(obj))（多层）不拷贝一个对象，而是拷贝一个字符串，会开辟一个新的内存地址，切断了引用对象的指针联系
缺点
时间对象 => 字符串的形式
RegExp、Error => 只得到空对象
function,undefined => 丢失
NaN、Infinity和-Infinity => 序列化成null
对象是由构造函数生成 => 会丢弃对象的 constructor
存在循环引用的情况也无法实现深拷贝
手动实现深拷贝（多层）
function Judgetype(e) { return Object.prototype.toString.call(e).slice(8, -1).toLowerCase(); } function Loop(param) { let target = null; if(Judgetype(param) === 'array') { target = []; for(let key of param.keys()){ target[key] = Deep(param[key]); } } else { target = {}; Object.keys(obj).forEach((val) => { target[key] = Deep(param[key]); }) } return target; } function Deep(param) { //基本数据类型 if(param === null || (typeof param !== 'object' && typeof param !== 'function')) { return param; } //函数 if(typeof param === 'function') { return new Function('return ' + param.toString())(); } return Loop(param); }3.数据类型判断（类型判断，相等和全等，隐式转换，两个对象相等）
类型判断typeof
无法区分 object, null 和 array对于基本类型，除 null 以外，均可以返回正确的结果。
对于引用类型，除 function 以外，一律返回 object 类型
typeof(1) // numbertypeof('tom') // stringtypeof(undefined) // undefinedtypeof(null) // objecttypeof(true) // booleantypeof(Symbol(1)) // symboltypeof({a: 1}) // objecttypeof(function () {}) // functiontypeof([]) // object
instanceof
判断一个实例是否属于某种类型
[] instanceof Array; // true{} instanceof Object;// truevar a = function (){}a instanceof Function // true
Object.prototype.toString.call
目前最优方案
toString() 是 Object 的原型方法，调用该方法，默认返回当前对象的 [[Class]] 。这是一个内部属性，其格式为 [object Xxx] ，其中 Xxx 就是对象的类型。
对于 Object 对象，直接调用 toString() 就能返回 [object Object] 。而对于其他对象，则需要通过 call / apply 来调用才能返回正确的类型信息
这里就是call的应用场景，巧妙利用call借用Object的方法实现类型的判断
function T(e) {return Object.prototype.toString.call(e).slice(8, -1).toLowerCase();}T(1) // numberT('a') // stringT(null) // nullT(undefined) // undefinedT(true) // booleanT(Symbol(1)) // symbolT({a: 1}) // objectT(function() {}) // functionT([]) // arrayT(new Date()) // dateT(/at/) // RegExp
相等和全等
==非严格比较 允许 类型转换===严格比较 不允许 类型转换
引用数据类型栈中存放地址，堆中存放内容，即使内容相同 ，但地址不同，所以两者还是不等的
const a = {c: 1}const b = {c: 1}a === b // false隐式转换
==可能会有类型转换，不仅在相等比较上，在做运算的时候也会产生类型转换，这就是我们说的隐式转换
布尔比较，先转数字
true == 2 // false||1 == 2// if(X)var X = 10if(X) // true10 ==> true// if(X == true)if(X == true) // false10 == true||10 == 1
数字和字符串做比较，字符串转数字
0 == '' // true||0 == 01 == '1' // true||1 == 1
对象类型和原始类型的相等比较
[2] == 2 // true|| valueOf() // 调用valueOf() 取自身值[2] == 2|| toString() // 调用toString() 转字符串"2" == 2|| Number() // // 数字和字符串做比较，`字符串`转`数字`2 == 2
小结 js使用某些操作符会导致类型变换, 常见是+，==
运算时
加法 存在一个字符串都转字符串
乘 - 除 - 减法 字符串都转数字
相等比较时
布尔比较，先转数字
数字和字符串做比较，
字符串转数字对象类型比较先转原始类型
const a = { i: 1, toString: function () { return a.i++; }}a == 1 && a == 2 && a == 3判断两个对象值相等
引用数据类型栈中存放地址，堆中存放内容，即使内容相同 ，但地址不同，所以
===判断时两者还是不等的但引用数据内容相同时我们如何判断他们相等呢？
// 判断两者非对象返回// 判断长度是否一致// 判断key值是否相同// 判断相应的key值里的对应的值是否相同这里仅仅考虑 对象的值为object，array，number，undefined，null，string，boolean关于一些特殊类型 `function date RegExp` 暂不考虑function Judgetype(e) {return Object.prototype.toString.call(e).slice(8, -1).toLowerCase();}function Diff(s1, s2) {const j1 = Judgetype(s1);const j2 = Judgetype(s2);if(j1 !== j2){return false;}if(j1 === 'object') {if(Object.keys(s1).length !== Object.keys(s2).length){return false;}s1[Symbol.iterator] = function* (){let keys = Object.keys( this )for(let i = 0, l = keys.length; i < l; i++){yield {key: keys[i],value: this[keys[i]]};}}for(let {key, value} of s1){if(!Diff(s1[key], s2[key])) {return false}}return true} else if(j1 === 'array') {if(s1.length !== s2.length) {return false}for(let key of s1.keys()){if(!Diff(s1[key], s2[key])) {return false}}return true} else return s1 === s2}Diff( {a: 1, b: 2}, {a: 1, b: 3}) // falseDiff( {a: 1, b: [1,2]}, {a: 1, b: [1,3]}) // false
其实对象遍历 return 也可以用for in， 关于遍历原型的副作用可以用hasOwnproperty判断去弥补
对象for of 遍历还得自己加迭代器，比较麻烦
for(var key in s1) { if(!s1.hasOwnProperty(key)) { if(!Diff(s1[key], s2[key])) { return false } } }4.数据操作（数组遍历，对象遍历）
1.数组遍历
`最普通 for循环` // 较为麻烦for(let i = 0,len = arr.length; i < len; i++) {console.log(i, arr[i]);}`forEach` 无法 break return`for in` 不适合遍历数组，`for...in` 语句在w3c定义用于遍历数组或者对象的属性1. index索引为字符串型数字，不能直接进行几何运算2. 遍历顺序有可能不是按照实际数组的内部顺序3. 使用for in会遍历数组所有的可枚举属性，包括原型`for of` 无法获取下标// for of 兼容1for(let [index,elem] of new Map( arr.map( ( item, i ) => [ i, item ] ) )){console.log(index);console.log(elem);}// for of 兼容2let arr = [1,2,3,4,5];for(let key of arr.keys()){console.log(key, arr[key]);}for(let val of arr.values()){console.log(val);}for(let [key, val] of arr.entries()){console.log(key, val);}2.
2.对象遍历
for in
缺点：会遍历出对象的所有可枚举的属性, 比如prototype上的
var obj = {a:1, b: 2}obj.__proto__.c = 3;Object.prototype.d = 4for(let val in obj) {console.log(val) // a,b,c,d}// 优化for(let val in obj) {if(obj.hasOwnProperty(val)) { // 判断属性是存在于当前对象实例本身，而非原型上console.log(val) // a,b}}
object.keys
var obj = { a:1, b: 2 }Object.keys(obj).forEach((val) => { console.log(val, obj[val]); // a 1 // b 2})for of
只有提供了 Iterator 接口的数据类型才可以使用 for-of
Array 等类型是默认提供了的
我们可以给 对象 加一个 Symbol.iterator 属性
var obj = { a:1, b: 2 }obj[Symbol.iterator] = function* (){let keys = Object.keys( this )for(let i = 0, l = keys.length; i < l; i++){yield {key: keys[i],value: this[keys[i]]};}}for(let {key, value} of obj){console.log( key, value );// a 1// b 2}
5.数据计算（计算误差）
0.1 + 0.2 = 0.30000000000000004
所有的数都会转换成二进制，逐位去计算，
小数 二进制不能二等分的 会无限循环
js数据存储 64 位双精度浮点数，这里不做赘述，超出会被截取（大数计算误差与限制也是因为这个）
相加后再转换回来就会出现误差
那么如何做出精确的计算呢
对于数字十进制本身不超过js存储位数的小数，可以同时变为整数，计算后再化为小数
function getLen(n) { const str = n + ''; const s1 = str.indexOf('.') if(s1) { return str.length - s1 - 1 } else { return 0 } }function add(n1, n2) { const s1 = getLen(n1) const s2 = getLen(n2) const max = Math.max(s1, s2) return (n1 * Math.pow(10, max) + n2 * Math.pow(10, max)) / Math.pow(10, max)}add(11.2, 2.11) // 13.31对于超出存储位数的可以，转换成数组，倒序逐位相加，大于10进位，字符串拼接得到值
function add(a, b) { let i = a.length - 1; let j = b.length - 1; let carry = 0; let ret = ''; while(i>=0|| j>=0) { let x = 0; let y = 0; let sum; if(i >= 0) { x = a[i] - '0'; i-- } if(j >=0) { y = b[j] - '0'; j--; } sum = x + y + carry; if(sum >= 10) { carry = 1; sum -= 10; } else { carry = 0 } ret = sum + ret; } if(carry) { ret = carry + ret; } return ret;}add('999999999999999999999999999999999999999999999999999999999999999', '1') // 1000000000000000000000000000000000000000000000000000000000000000四. JS应用
1.防抖
场景：
搜索框输入下拉联想，请求后台接口，为了避免频繁请求，给服务器造成压力 定义：
在事件触发n秒后执行，在一个事件触发n秒内又触发了该事件，就以新的事件为准
实现思想：
定时器的执行与清除
apply 改变this指向
apply传参继承
function debounce(func, wait) { var timeout; return function () { var context = this; var args = arguments; clearTimeout(timeout) timeout = setTimeout(function(){ func.apply(context, args) }, wait); }}2.节流
场景：
可以将一些事件降低触发频率。
比如懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费资源；
定义：
持续触发事件，规定时间内，只执行一次
方法一：时间戳
实现思想:
触发时间取当前时间戳now, 减去flag时间戳（初始值为0）
如果大于规定时间，则执行，且flag更新为当前时间，
如果小于规定时间，则不执行
function foo(func, wait) { var context, args; var flag = 0; return function () { var now = +new Date(); context = this; args = arguments; if(now - flag > 0) { func.apply(context, args); flag = now; } }}方法二：定时器
实现思想:
判断当前是否有定时器，
没有 就定义定时器，到规定时间执行，且清空定时器
有则不执行
function foo(func, wait) { var context, args; var timeout; return function() { if(!timeout){ setTimeout(()=>{ timeout = null; func.apply(context, args); }, wait) } }}3.柯里化
定义:将能够接收多个参数的函数转化为接收单一参数的函数，并且返回接收余下参数且返回结果的新函数
特点：
参数复用,提前返回,延迟执行实现过程
创建一个函数，利用 apply,给柯里化函数重新传入合并后的参数
利用reduce迭代数组所有项，构建一个最终返回值
function add(...args) { var fn = function(...args1) { return add.apply(this, [...args, ...args1]); } fn.toString = function() { return args.reduce(function(a, b) { return a + b; }) } return fn;}add(1)(2)(3).toString(); // 6扫描下方二维码
获取web前端、学习资料视频
备注‘公众号’
