wendyGao_Yin的博客

闭包是一种机制，函数执行，产生一个不被释放的上下文，一是保护了上下文里面的私有变量不受外界干扰，二是私有变量的值也保存了下来，可以供其下级上下文调取使用，这种机制叫做闭包。闭包的弊端是会导致栈内存增加，项目中如果滥用闭包，会导致产品性能降低。JS中获取的每一个DOM元素都是一个元素对象（堆内存），用有很多的属性和方法；实现元素点击事件行为：xxx.onclick = function(){...} ,就是给元素对象的私有属性onclick赋值；当点击的时候， 浏览器监听到事件触发帮我们.

var num = 10;var obj = {num:20};obj.fn = (function(num){ this.num = num * 3; num++; return function(n){ this.num += n; num++; console.log(num); };})(obj.num);var fn = obj.fn;fn(5);fn(10);console.log(num, obj.num);图形解析：函数每执行一次，就会形成一个...

函数在新旧浏览器中的表现当代浏览器既要支持ES5的语法，也要支持ES6的语法「块级上下文」，所以导致有些代码出现了“特殊的效果”。函数，对象以外的大括号（循环，判断，和 { } ）中出现了以 let/ const/ function/ class声明的方式，就是出现块级上下文。var 既不会产生块级上下文，也不会受块级上下文影响。练习题1：//此处打印foo undefined {//此处打印foo function foo() {} function foo() {} fo

function fun (n,o){ console.log(o); return { fun:function(m){ return fun(m, n); }; };};var c = fun(0).fun(1);c.fun(2);c.fun(3);解析步骤：全局上下文中进行变量提升。

练习题1：var test = (function(i){ return function(){ alert(i*=2); };})(2);test(5);答案解析：EC（AN2）执行完毕，立即出栈释放，此时的EC（AN1）上下文中的0x001堆内存不再被占用，则EC（AN1）上下文出栈释放练习题2：var b = 10;(function b() { // b会在私有上下文中被声明 b -> ƒ 函数本身 b = 20; //此处的修改无效

（let / const ）VS varlet 不存在变提升,不允许在定义之前使用，否则会报错：Uncaught ReferenceError:Cannot access 'x' before initialization。let不允许重复声明，不论当前上下文中，基于何种方式声明过这个变量，都允许再基于let声明。否则报错: Uncaught ReferenceError: Identifier 'x' has already been declared。此操作在词法解析阶段完成的，一旦

JavaScript 中的函数函数执行函数执行的过程形参 & 实参函数的作用域作用域链的储存规则作用域链查找机制面试题练习首先做一道练习题let x = [12,23];function fn(y){ y[0] = 100; y = [100]; y[1] = 200; console.log(y);};fn(x);console.log(x);答案及解析：函数执行函数执行的过程创建一个全新的私有上下文 [进栈]， 函数中的代码都是在这个私有上下文中执行的。JS中

JQ部分源码分析(function () { var class2type = {}; var toString = class2type.toString; //Object.prototype.toString 检测数据类型的 var hasOwn = class2type.hasOwnProperty; //Object.prototype.hasOwnProperty 检测是否私有属性的 var fnToString = hasOwn.toString; //Fun

事件和事件绑定DOM事件的基础知识DOM事件的基础知识什么是事件？什么是事件绑定？事件： 事件是浏览器赋予元素的默认行为， 也可以理解为天生具备的，不论我们是否是否为其绑定方法，当某些行为触发的时候，相关的事件都会被触发执行！如果方法不赋值，则触发事件时则什么都不做！鼠标事件click ：点击事件（PC）； 单击事件（移动端，300ms内无第二次点击操作，则是单击，所以移动端click事件有300ms延迟）dblclick： 在元素上双击鼠标按钮。contextmenu：右键点击（在右

//插件主要运用了闭包的保护和保存机制 /* 一、jQuery框架分析 1. 首先是自执行函数，设置两个形参 global, factory，传入实参A,B 实参A： 实参B： *//* JS代码执行的环境 + 浏览器环境 window = GO + webview 环境 + node环境*///利用js暂时性死区机制“基于typeof检测一个未被声明的变量，结果是undefined”：如果是在浏览器或者webview环境下运行JS，则A=window，如果是在Node环境

倒计时思路两个时间：目标时间 18:00:00当前时间目标时间-当前时间=时间差 「毫秒差：计算时间差中包含多少小时，多少分钟，多少秒」每间隔一秒中都需要重新获取当前时间「定时器 setInterval」，重算时间差等核心的问题：当前时间是不可以获取客户端本地的（因为本地的时间客户自己可以肆意的修改），需要统一获取服务器的时间「响应头->Date」获取服务器时间会存在时间偏差问题 --> HEAD AJAX状态码为2在页面不刷新的情况下，每间隔1秒，不是再次

浅克隆把对象进行克隆//1. Object.assign()let obj = { a:1, b:2, c:3 };let new_obj = Object.assign({},obj);new_obj === obj // false// 2. 还可以通过循环实现对象的克隆let new_obj = {};_.each(obj, (value, key) => { //_.each调用的是自己封装的utils.js中的each方法 new_obj[key] = v

jQuery基础框架(function( global, factory ) {"use strict"; if ( typeof module === "object" && typeof module.exports === "object" ) { module.exports = global.document ? factory( global, true ): function( w ) { if ( !w.document ) throw new

extendjQuery.extend = jQuery.fn.extend = function () { } / jQuery.extend({ })把用户自定义的方法扩展到jQuery / jQuery.fn上 （也是合并：把自己传递进来对象中的方法合并到jQuery / jQuery.fn上）把jQuery当做对象，扩展到其上面的的私有的属性和方法【完善类库】$.extend({ xxx : function(){ console.log("XXX") },});$.xxx();

(function () { "use strict"; var getProto = Object.getPrototypeOf, class2type = {}, toString = class2type.toString, hasOwn = class2type.hasOwnProperty, fnToString = hasOwn.toString, ObjectFunctionString = fnT

数据类型-Array什么是数组创建数组访问和修改数组length 和数字下标之间的关系数组的方法数组对象的方法字符串和数组之间的转换数组实例的方法数组的增删改查**push**：在数组的末尾增加一个或多个元素，并返回数组的新长度**pop**：删除数组的最后一个元素，并返回这个元素。此方法更改数组的长度。**shift**：删除数组的第一个元素，并返回这个元素。此方法更改数组的长度。**unshift**：一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。**splice**：通过

功能效果图：思路：在无限极别的菜单中，数据一般不是固定的，需要从服务器请求获取：如果数据量不大，一般是一次请求数据，获取到所有级别的信息如果数据量比较大，一般只是请求当前这一级的信息，点击展示的时候，再去请求下一级信息（再去动态生成下一级的DOM内容）创建DOM的时候，有的是一次性把所有级别的DOM创建好（数据量不大），控制显示隐藏，有的也只是渲染第一级别的DOM，点击哪个再去渲染哪个级别的DOM再优化，可能还要对已经获取的数据或者已经渲染的DOM做缓存。…添加事件：给当前树形折叠菜

需求：鼠标滑过缩略，会显示一个滑块，右侧出现滑块对应的大图部分，就是购物网站商品详情的放大镜效果。思路：首先显示缩略图abbre，缩略图上有一个滑块mark缩略图的右侧是与其对应的具体放大的部分detail，放大的盒子对应着大图片detaiIImg事件：鼠标移入缩略图abbre，滑块mark和放大部分detail显示鼠标移动，可以控制滑块mark在缩略图abbre上的移动滑块mark移动的距离不能超出缩略图abbre的范围同时还需要控制大图片detaiIImg在放大部分detail中

需求：实现鼠标的拖拽效果，盒子不能移出视口鼠标拖拽效果原理：思路：鼠标开始位置mouseStart鼠标当前位置mouseCur（移动过程中随时计算）盒子开始的位置boxStart求盒子当前位置 : boxCur = (mouseCur - mouseStart ) + boxStart触发条件：鼠标按住才开始拖拽，鼠标只要抬起则结束拖拽拖拽开始后，鼠标移动盒子才会跟着移动鼠标按住盒子mousedown：记录mouseCur记录mouseStart鼠标移动 mousem

JS中的同步异步编程JS中的单线程异步编程练习题JS中的单线程异步编程浏览器是多线程的【可以同时做多件事情】GUI渲染线程JS引擎线程【负责JS的渲染解析】DOM / 定时器 监听线程HTTP/ HTTPS 网络线程*  由上述可知，JS 是单线程的，即同时只能处理一件事情【上面的代码没有执行完，下面的代码不能执行】，这就是JS的 “同步编程”， JS中大部分代码都是同步编程的。JS中有部分代码是异步编程但是同时一次也只能处理一件事情，因为JS是单线程的。是浏览器基于 EventQ

函数三种角色剖析函数本身是一个堆内存，内部存储的代码字符串，本身还是一个对象，有自己的属性prototype和__proto__,还可以被当作类操作，用new来执行，函数的三种角色本身没有必然联系...

构造函数执行和普通函数执行的区别普通函数执行形成一个全新的私有上下文初始化作用域链<自己的上下文， 上级上下文>初始化this初始化arguments形参赋值变量提升：var function代码执行默认返回undefined构造函数执行还是以上面的函数代码为例，result改为：let result = new Fn(10, 20);，构造函数设计模式【后台语言很多称之为单例模式】“new”构造函数执行“标准面向对象的编程->构建自定义类”Fn被称为类【

JS中常见的设计模式单例设计模式 (Singleton) [ / ]命名模式(Command)Constructor构造器模式工厂模式发布订阅模式Public& Subscribe观察者模式Observer中介者模式MediatorJS设计模式：是一种思想，更规范更合理的去管理代码（方便维护、升级、扩展、开发）单例设计模式 (Singleton) [ / ]最早期的模块化编程思想（同样的还有：AMD / CMD / CommonJS / ES6Module ）避免全局变量的污染实

函数的防抖和节流在“高频”触发的场景下，需要进行防抖和节流狂点一个按钮页面滚动 ：默认情况下，页面滚动中：浏览器在最快的反应时间内（4~6MS），就会识别监听一次事件触发，把绑定的方法执行，这样导致方法执行的次数过多，造成不必要的资源浪费输入模糊匹配 (模糊搜索)轮播图左右切换…高频 : 我们自己设定，多长的时间内，触发两次及以上就算“高频”：封装方法的时候需要指定这个频率（可以设置默认值）防抖（debounce）: 在某一次高频触发下，只识别一次（可以控制开始触发，还是最后一次触发），

面试题网址：力扣 ：https://leetcode-cn.com/牛客网：https://www.nowcoder.com/

数据类型转换的核心方法1、把其他数据类型转换为Number类型特定需要转换为Number的(手动转换)Number([val]) :只要出现非有效数字字符，结果都是NaN 对象变为数字，应该先valueOf，没有原始值在toString变为字符串，最后把字符串转为数字。parseInt/parseFloat([val])机制：从字符串左侧第一个字符，开始查找有效字符，遇到非有效数字字符停止查找，不论后面是否还有数字字符，都不再找了，把找到的有效数字字符转为数字，如果一个都没有找到，

JS中的多种继承方式JS本身是基于面向对象开发的编程语言，所以学习JS的时候基本上就是学习它有哪些类，学习这些类的实例，实例可以调用类原型提供的方法，实例还有自己私有的属性和方法，面向对象想编程中有一个非常重要的知识点—类：封装、继承、多态封装 ：类也是一个函数，把实现一个功能的代码进行封装，以此实现“低耦合高内聚”多态：重载、重写- 重写：子类重写父类上的方法（把随着继承运行的）- 重载： 相同的方法，由于参数或者返回值不同，具备了不同的功能（JS不具备严格意义下的重载的），JS中的重载指

检测数据类型的四种办法typeof语法 ：typeof val优势：检测基本类型值还是很准确的，操作方便劣势：typeof null => “object”typeof 检测数组，对象、正则等都是“object”instanceof语法：[val].instanceof 类：通过检测这个值是否属于这个类，从而验证是否为这个类型优势：对于数组、正则、对象可以细分一下劣势：基本数据类型无法基于它来检测检测原理：只要在当前实例的__proto__上出现这个类，检测结果

操作符= 赋值: 变量和值的关联== 比较：如果左右两边的数据不一致，则默认转换为一致的：对象 == 字符串,把对象转换为字符串，上下的情况（除了null和undefined）一般都是要转换为数字=== 绝对比较 ：不转换直接比较，类型和值都得相同，类型不一样直接返回false，不会做转换。基本数据类型转换为数字，都是默认隐试的调用Number（）处理的对象转数字，需要先转为字符串，先调用valueof方法，获取原始值，如果原始值不是基本类型值，则继续调用toString，然后把字符串转

重写内置的new和Object.createnew一个函数所具备的功能：new一个函数执行的时候，是把他当做构造函数执行的，先创建一个类，再创建一个类的实例，在当前实例的执行上下文中会默认创建一个对象，让函数体当中的this指向这个对象，函数正常执行完毕，最后看函数当中有没有return，如果没有return，默认把实例返回，如果有return看返回的数据类型，返回的是值类型的则依旧返回默认的当前实例，如果返回的是用类型值，则用返回的引用类型值替换默认的当前实例。function Dog(name

原型 和 原型链__proto__函数数据类型：普通函数、类（内置类/自定义类）、箭头函数对象数类型：普通对象、数组对象、正则对象、日期对象、实例对象、函数对象、（函数也是一个对象，也像普通对象一样，有自己的键值对）、类的prototype也是对象…每一个函数（除ES6箭头函数外）都有一个内置的属性prototype（原型属性），属性值是一个对象，在对象中会存储当前类的公共属性和方法(为自己所属的实例提供公共的属性和方法的地方)普通函数的prototype没有用，函数有这个属性，只是没用而已（普

面向对象（OOP）OOP：（Object Oriented Programming）面向对象程序设计POP：（Procedure Oriented）面向过程程序设计什么是面向对象？JS当中所有要学习的东西都可以称之为对象，想要学习好JS，就需要把他们按照结构特点分成不同的类别，大类中又细分成小类，分好类别后，想要研究某个东西，就找到相应的类，拿出类里面的一个具体的事例，研究其结构特点功能等，研究明白这一个实例，这个类里面的其他实例也具有同样的结构特点和功能，面向对象就是我们按照一定思维方式，把

高级JS编程技巧谈谈你对闭包的理解，以及在项目中的应用阐述闭包是什么？（引申：堆栈、EC、AO、VO、SCOPE、SCOPE-CHAIN…）闭包的作用以及在真实项目中的应用场景，以及所带来的问题由闭包引发的高阶编程技巧突出自己在分析研究框架的源码（更高逼格的是自己写类库、插件的时候）是怎么应用这些有东西！建议性回答：浏览器加载页面会把代码放到栈内存（ECStack）中执行，函数进栈执行会产生一个私有的上下文（EC），此上下文能保护里面的私有变量（AO），不受外界干扰，并且如果当前上下文中的

Function.prototype及call/apply/bindFunction.prototype & Object.prototypeFunction：所有的类（包括内置类）都是函数，每一个函数都是Function的一个实例，所以他们的__proto__一定指向的是Function.prototype所有的函数都天生自带一个属性：prototype，这个属性指向当前实例所属类的原型Function.prototype是一个对象，天生自带一个属性constructor，指向当前类

1.JS中关于THIS的五种情况分析THIS（函数执行的主体，不是上下文）：谁把函数执行，执行主体就是谁，EC才是执行上下文，THIS是执行主体全局上下文中THIS指的是WINDOW会计上下文中没有自己的THIS，它的THIS是继承所在上下文中的THIS在函数的私有上下文中，THIS的情况多种多样，也是接下来重点研究的例如：郎朗在人民大会堂弹钢琴；事情本身是弹钢琴事情的主体是郎朗，也就是THIS是郎朗，在人民大会堂弹，人民大会堂是事情发生所在的上下文如何区分执行主体1. 事件

基础数据结构队列机构 Queue先进先出 FIFO（first In First Out）允许在前端（front）删除，允许在后端(rear)插入特殊：优先级队列队列相当于一个集合或者队列，一个任务集合； 特点：先进先出（谁先进来谁就在队列的头部，就能先出去），只能允许末尾添加，只能允许开头删除。自己实现队列结构自己实现队列结构要先准备一个容器，准备好容器后要有一个从末尾进队列（enter）的方法和一个从开头出队列（leave）的方法，获取队列长度（length），队列信息（v

JS底层机制–闭包函数执行会形成全新的私有上下文，这个上下文可能被释放，也可能不被释放，不论是否被释放，它的作用：保护：划分一个独立的代码执行区域，在这个区域中有自己私有变量存储的空间，而用到的私有变量和其他区域中的变量不会有任何的冲突（防止变量污染）。保存：如果上下文不被销毁，那么存储的私有变量的值也不会被销毁，可以被其下级上下文调取使用我们把函数执行形成私有上下文，来保存和保存私有变量的机制称之为“闭包”，闭包是一种机制。*市面上一般认为只有形成的私有上下文不被释放，才算是闭包（因为如

变量提升变量提升：在当前上下文中（全局/私有/块级），JS代码执行之前，浏览器会提前处理一些事情（可以理解为词法解析的一个环节，词法解析一定发生在代码执行之前）会把当前上下文中所有带VAR和FUNCTION关键字的进行提前声明或者定义var a = 10;声明declare：var a ; => 声明是创建变量的过程定义defined：a = 10；=> 定义是复制的过程** 带VAR的只会提前声明（默认值是undefined）。带FUNCTION的会提前声明加定义,所以在真实项目

函数 function函数：就是一个方法或者一个功能体，函数就是把实现某个功能的代码放到一起进行封装，以后想要操作实现这个功能，只需要把函数执行即可=>“封装”：减少页面中重复的冗余代码，提高代码重复使用率（低耦合高内聚）。洗衣机就是一个函数，生产洗衣机就是封装一个函数（把实现某些功能的代码封装进来），生产的时候不知道用户洗衣服的时候用什么水，什么洗衣粉，洗衣液，柔顺剂，洗什么衣服等，我们需要提供入口（提供的入口在函数中叫做形参，执行的时候放的具体的东西叫做实参），洗完衣服需要能拿出来，洗衣

判断条件成立做什么？不成立做什么？if / else if / else三元运算符switch case1. if/elseif(条件1){ 条件1成立执行}else if(条件2){ 条件2成立执行}...else{ 以上条件都不成立执行 }//也可以只写一个if/elseif(条件){ 条件成立执行}else{ 条件不成立执行 }//或者只写一个ifif(条件){ 条件成立执行}//当只有一个if，条件成立