Patrick Huang 99-CSDN博客

原创 JS 四大数据类型检测底层机制

四大数据类型检测底层机制typeof返回结果是一个字符串，字符串中包含了对应的数据类型"number/string/boolean/undefined/symbol/bigint/object/function"typeof null => “object” => 原理：按照计算机底层存储的二进制结果来检测，对象都是以 000… 开始的 => 无法细分普通对象还是数组等对象instancof用来检测当前实例是否属于这个类，不是来检测数据类型的一般只应用于普通对象/数组

2021-10-30 15:24:58 130

原创 call apply bind一些应用以及简单重写

类数组转为数组（call apply）arguments 是类数组，无法直接调用 Array.prototype 上的方法function mySum() { // 我们可以把 arguments 转为数组 let ary = Array.prototype.slice.call(arguments); console.log(ary) // => [1, 2, 3, 4, 5] // 这样就可以调用数组的方法了 let result = 0;

2021-10-28 15:39:47 86

原创 JS 中的原型和原型链

JS 中的原型和原型链函数数据类型普通函数箭头函数生成器函数构造函数对象数据类型普通对象/数组对象/正则对象实例也是对象数据类型（除7种基本类型以外）prototype/__proto__原型属性值也是对象大部分函数（重点是构造函数）都内置一个 prototype（原型）（显式原型）的属性，属性值是一个对象，对象中存储属性和方法供当前类的实例调用的公共属性和方法。箭头函数没有 prototype原型对象上有一个内置属性 constructor (构造器)，属性值

2021-10-20 15:54:28 79

原创 JS 中构造函数及对象属性一些问题

构造函数函数执行的时候基于 new 执行构造函数执行，最开始会和普通函数一样，形成私有上下文创建上下文后，浏览器会再创建一个实例对象初始化 this 的时候，让 this 指向当前实例对象在代码执行完成后，返回时：若不返回，则默认返回实例对象若返回基本数据类型值或不返回，浏览器会把实例对象返回若返回引用数据类型值，则返回该引用类型值function fn(x, y) { let total = x + y; this.x = x; this.y =

2021-10-07 22:57:49 190

原创闭包进阶应用（4）- 防抖和节流

闭包进阶应用（4）- 防抖和截流函数的防抖 => 对于频繁触发某个操作，只识别一次<body> <button id='btn'>点我</button> <script> const btn = document.querySelector('#btn'); btn.addEventListener('click', () => { console.log('点击');

2021-10-04 14:15:58 73

原创闭包进阶应用（3）-重写 reduce；柯里化函数思想；两道面试题

闭包进阶应用（3）-重写 reduce；柯里化函数思想；两道面试题let arr = [10, 20, 30, 40];let result = reduce(arr, (result, item, index) => { return result + item;})console.log(result); // => 100//如何重构 reduce 函数，达到此例效果？？？function reduce(arr, callback, initvalue) { let r

2021-09-21 15:08:06 127

原创闭包进阶应用（2）-惰性思想

闭包进阶应用（2）-惰性思想上篇博客介绍了两个闭包的应用，这篇从 3 开始惰性函数 => 能干一次的绝不干第二次// 获取元素的样式//getComputedStyle 不支持老版本浏览器// get_css => 判断浏览器是否支持 getComputedStyle，支持则返回，不支持则返回 currentStylefunction get_css(element, attr){ if(window.getComputedStyle){ return window.

2021-09-21 09:28:48 66

原创闭包进阶应用（1）-循环处理和单例设计模式

闭包进阶应用（1）-循环处理和单例设计模式循环事件绑定或者循环操作中对于闭包的应用 for(var i = 0; i < 3; i++){ setTimeout(() => { console.log(i); }, (i + 1) * 1000); } //=> 3 3 3如何将上例的输出改为 0 1 2呢，我们可以利用闭包，把相应的 i 值存在函数私用上下文中。 for(var i = 0; i < 3; i++){ (

2021-09-20 23:56:11 93

原创 JS 函数中的 arguments 以及匿名函数具名化的问题

JS 函数中的 arguments 以及匿名函数具名化的问题var a = 4;function b(x, y, a) { console.log(a); arguments[2] = 10; console.log(a);}a = b(1, 2, 3);console.log(a);//arguments 是一个类数组集合//以上例子中:arguments:{ 0:1, 1:2, 2:3, length:3, callee:function b(

2021-09-17 22:32:22 241

原创 layui 无法监听 select 框解决方法

layui form中，写入的 select 不会被渲染，layui 会创造个 input 框，把选中的 option 加一个 class="layui-this" 再渲染上去。不是很懂这样做的原因，但直接监听 select 是没用的。给 select 加一个 lay-filtter，再用上面的方法就可以正常监听了。...

2021-09-16 14:27:54 658 1

原创 JS 中的变量提升中的难题

JS 中的变量提升中的难题之前遇到变量提升问题总是凭感觉，系统学习一下后感觉好好分析一下还是不难，这里总结了几道我觉得比较难的题。值得注意的是，新旧版本浏览器对变量提升，块级作用域的处理是完全不同的，学习时应注意。并且由于浏览器为了兼容 ES6 和更早版本，有各种特别的机制，需要注意。在项目中也应该避免触发这种机制，不然真的 debug 到疯。变量提升：在当前上下文中（全局/私有/块级），JS 代码自上而下执行之前，浏览器会提前处理一些事情（可以理解为此法解析的一个环节，词法解析一定发生在代码执行

2021-09-12 22:35:41 132

原创彻底弄懂 JS 4 大数据类型转换

彻底弄懂 JS 4 大数据类型转换JS == 比较特殊点类型相同比较{} == {} => false 对象比较的是堆内存地址[] == [] => falseNaN == NaN => false类型不相同比较null == undefined => true; null === undefine => falseString == Object 把对象转为字符串其余如果两边数据类型不一样，都转为 Number 比较把其它数据类

2021-09-12 10:19:15 120

原创 JS 中 this 几种基本情况

JS 中 this 几种基本情况this -> 函数的执行主体函数执行主体：谁把函数执行函数执行上下文：在哪执行的函数执行主体规律：事件绑定：给当前元素的某个事件行为绑定方法，当事件触发，方法执行，方法中的 this 是当前元素本身普通函数执行函数执行前面是否有"点"，没有点，this => window(严格模式下是 undefined)function fn(){ console.log(this);}fn(); // => window/un

2021-09-09 22:35:17 63

原创全面分析 let 和 var 和 const

全面分析 let 和 var 和 constJS中声明变量传统：var functionES6：let const importlet vs constlet 声明一个变量，变量存储可以改值const 声明的变量，一旦赋值，则不能再和其他值关联（不允许指针重新指向）const obj = { name: 'Patrick'};obj.name = 'Tom';console.log(obj.name) // => Tom//只是指针不能重新指向，可以改变原指针

2021-09-09 21:52:20 64

原创循环事件绑定的多种解决方法

循环事件绑定的多种解决方法闭包：函数运行的一种机制函数执行会形成一个私有上下文，如果上下文中的某些内容（一般指的是堆内存地址）被上下文以外的一些事物（例如：变量/事件绑定）所占用，则当前上下文不能被出栈释放 => 闭包的机制：形成一个不被释放的上下文保护：保护私有上下文的私有变量和外界互不影响保存：上下文不被释放，上下文中的私有变量和值都会被保存起来，可以供其下级上下文中使用弊端：大量使用闭包，导致栈内存太大，页面渲染变慢，性能受到影响看一个例子 <button>

2021-09-06 23:55:13 455

原创从一个例子图解彻底了解闭包机制

从一个例子图解彻底了解闭包机制let x = 5;function fn(x) { return function(y) { console.log(y + (++x)); }}let f = fn(6);f(7);fn(8)(9);f(10);console.log(x);这里图解省略了执行栈以及进栈执行的过程，同样也省略了初始化 this ，arguments，和变量提升的过程！！！首先，如之前笔记所述，浏览器会先放置值在执行栈中，再定义变量，再将两

2021-09-05 15:04:58 130

原创 JS中的堆栈内存及函数底层处理机制（4）

闭包及浏览器垃圾回收机制GC(Garbage Collection)GC => 浏览器的垃圾回收机制（内存释放机制）栈内存释放加载页面，形成一个全局的上下文，页面关闭后，全局上下文才会被释放函数执行会形成一个私有的上下文，进栈执行；当函数执行完毕，大部分情况下，形成的上下文都会被出栈释放掉，以此来优化栈内存大小特殊情况例子：function fn() { var a = 100; return function () { console.log('Patrick

2021-09-01 21:48:25 88

原创 JS中的堆栈内存及函数底层处理机制（3）

函数的底层处理机制创建一个函数和创建一个变量类似：都是声明一个变量储存值函数函数名（也算是变量）创建一个函数也是开辟一个新的堆内存对象的堆内存中，存储的是它的键值对函数的堆内存中，存储的是它的代码，以字符串的形式存储创建函数的时候就声明了它的作用域（scope） => 值是当前创建函数时所处的上下文在哪个上下文中创建的，作用域就是谁形成 AO(FN1) => Active Object 私有变量对象函数执行的步骤形成一个私有的上下文（AO）=> 存储当前上

2021-09-01 21:47:30 97

原创 JS中的堆栈内存及函数底层处理机制（2）

浏览器运行机制浏览器底层运行机制浏览器会在计算机的内存中（内存条）分配出一块内存，用来供代码执行的栈内存（Stack）=> ECStack(Execution Context Stack) 执行环境栈为了区分是哪个区域（全局或者函数等）下的代码执行，会产生一个执行上下文 EC(G) => Execution Context(global) 全局执行上下文运行时进栈运行全局上下文 EC(G)函数执行，会形成全新的私有上下文块级私有上下文…在 EC(G) 中，会有 VO(G

2021-08-31 21:41:47 160

原创 JS中的堆栈内存及函数底层处理机制（1）

一直想从底层好好学 JS，这次终于下定决心，坚持学习，并和大家分享我的笔记，希望能一起学习。JS中的数据类型JS 数据类型共有 7 种基本数据类型， 2 种引用数据类型基本数据类型(值类型，原始类型)numberNaNInfinitystringbooleannullundefinedsymbolstatic SymbolSymbol.prototypebigint引用数据类型object普通对象数组对象正则对象日期对象JSON对象Se

2021-08-31 20:43:02 99

weixin_44501796的博客