haonan_z的博客

前言如果不了解bind的使用的请前往 Function.prototype.bind，这里不在赘述。想要看bind原理的童鞋，需要对以下知识有了解：闭包原型链this的指向Array.prototype.slicenew的过程Object.create思路bind方法不会立即执行函数，而且需要保存一个入参，所以这里利用到了 闭包改变函数的作用域，因此要利用 apply 或者 call方法来实现获取函数的所有入参arguments，以及使用 slice 转化出一个数组先利用上

先来一段代码var a = 1function handle(){ if(true){ var a = 1 let b =2 const c = 3 }}handle()然后我们来看下执行过程中，各个作用域的表现从上面的截图我们可以看到有三种作用域，分别是全局作用域Global（一般指window）函数作用域Local（局部作用域）块状作用域Block全局变量会挂载在window上面局部变量在函数内部创建，一旦函数执行完释放后就会被回

利用navigator.userAgent获取设备相关字符串，通过关键字匹配判断设备信息是否是苹果手机：!!u.match(/iphone/i) || u.match(/Ipad/i)是否安装手机：!!u.match(/android/i)是否是在微信中打开的网页：!!u.match(/micromessenger/i)获取设备类型（例如手机类型）：u.substring(u.indexOf(’(’)+ 1, u.indexOf(’)’))// 各主流浏览器function getBrow

完美的js URLEncode函数当需要通过查询字符串传值给服务器时需要对get参数进行encode。escape()函数，不会encode @*/+ (不推荐使用)encodeURI()函数，不会encode ~!@#$&*()=:/,;?+' (不推荐使用)encodeURIComponent()函数，不会encode ~!*() 这个函数是最常用的我们需要对encodeURIComponent函数，最一点修改：function urlencode (str) { s

先来看看 MDN是怎么描述的： 微任务与Javascript运行时环境宏任务除了我们比较了解的 setTimeout 和 setInterval 之外，还有 requestAnimationFrame这里有一篇文章介绍 被誉为神器的requestAnimationFrame

在js中，继承的方法有以下几种：构造函数继承function Parent() { this.name = 'parent';}function Child(age) { Parent.call(this); this.age = age;}var c = new Child(12);console.log(c.name); //输出parent原理是在Child构造函数中利用call改变了this指向，使得Child对象增加了name属性，值为’parent’，完

JS的继承

事实上

最近我在面试一些5年的前端，问他们有哪些对闭包的应用，竟然一个都搭不上来，问他们用过防抖节流吗，他们说用过，但不会写真的，作为一个5年的前端，这样真的不行，他们我们从思路上去讲防抖和节流的做法一、防抖（debounce）首先我们介绍一下什么是防抖，防抖就是当多次事件产生时，只需要最后一次真实的触发事件最经典的应该是，模糊匹配搜索，即用户在搜索框里输入，我们会去模糊搜索出用户可能想搜索的内容的列表这个时候为了减少搜索频次，我们就会加入防抖，以便在用户停在输入的一段时间后再触发搜索，减少服务端压力说

很多小伙伴会被this的指向问题弄得焦头烂额，或者这次记住了，下次别人一问，又答不上来，那么这次就让我们彻底捋清楚首先，要清楚一点，this的指向在函数声明的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁this永远指向的是最后调用它的对象，这里强调最后window是浏览器中js中的全局对象，globalwindow是nodejs的全局对象，我们创建的变量实际上是给全局对象添加属性非严格模式下，例如user()其实等价于window.user()，所以默认指向是window，

很多小伙伴其实对prototype这个东西都是一知半解的，更别说__proto__，今天就让我们来梳理一下他们的关系，首先我们通过一段代码来看下这几个属性的概念function User(name){ this.name=name}User.prototype.getName = function(){ return this.name}const user = new User('henry')console.log(user.getName()) //打印出 henryconsol.

基本数据类型 -> 栈string number boolean null undefined Symbol(es6)引用数据类型 -> 堆array object function data Set(es6) Map(es6)

前言前面我们说完了JavaScript的解析过程，接着来讲讲它是怎么执行的，估计大部分的人会认为JS是一行一行执行的，所以我们以为JS都是这样的：let a = '1';console.log(a);let b = '2';console.log(b);然而实际上JS是这样的：setTimeout(function(){ console.log('定时器开始啦')});new Promise(function(resolve){ console.log('马上执行fo

了解javascript解析引擎简单地说，JavaScript解析引擎就是能够“读懂”JavaScript代码，并准确地给出代码运行结果的一段程序。比方说，当你写了 var a = 1 + 1; 这样一段代码，JavaScript引擎做的事情就是看懂（解析）你这段代码，并且将a的值变为2。Javascript引擎的基本原理是: 它可以把JS的源代码转换成高效，优化的代码，这样就可以通过浏览器解析甚至可以被嵌入到应用当中。它的唯一目的是读取和编译javascript代码JavaScript引擎是浏览器

Javascript是一种解释型的动态语言。在程序中，有编译型语言和解释型语言。那么什么是编译型语言，什么是解释型语言呢?编译型语言: 它首先将源代码编译成机器语言，再由机器运行机器码(二进制)。解释型语言: 相对于编译型语言而存在的，源代码不是直接编译为目标代码，而是将源代码翻译成中间代码，再由解释器对中间代码进行解释运行的。比如javascript/python等都是解释型语言(但是javascript是先编译完成后，再进行解释的)。主要的编译型语言有c++, 解释型语言有Javascript

前言JavaScript的默认对象表示方式{}可以视为其他语言中的Map或Dictionary的数据结构，即一组键值对。但是JavaScript的对象有个小问题，就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。为了解决这个问题，最新的ES6规范引入了新的数据类型Map以上摘抄自雪峰老师的教程MapMap是一组键值对的结构，具有极快的查找速度，且内部的key（键）是唯一的const user = { age: 26, name: 'haonan'}le

yield是什么yield是ES6的新关键字，可以使生成器函数执行暂停，yield关键字后面的表达式的值返回给生成器的调用者。它可以被认为是一个基于生成器版本的return关键字。yield关键字实际返回一个IteratorResult（迭代器）对象，它有两个属性，value和done，分别代表返回值和是否完成。yield无法单独工作，需要配合generator(生成器)的其他函数，如next，懒汉式操作，展现强大的主动控制特性。...

Symbol.iterator

函数式编程

for，for in , for of 和forEach四者都是用于循环的，但是每个使用场景都是有所不同，接下来进行一个对比1. 可枚举对象const person = { name: 'henry', age: 26,};for (const key in person) { console.log(key);}//输出结果：name agefor (const value of person) { console.log(value);}// TypeError: pers

async function tmd(i) { await new Promise((resolve) => { setTimeout(() => { console.log(i) resolve() },1000) })}let arr = [1, 2, 3]async function forlog() { for (let i of arr) { await tmd(i) }}async function felog() { arr.for

非整数的 Number 类型无法用 （= 也不行） 来比较，例如：console.log( 0.1 + 0.2 == 0.3);这里输出的结果是 false，说明两边不相等的，这是浮点运算的特点，也是很多同学疑惑的来源，浮点数运算的精度问题导致等式左右的结果并不是严格相等，而是相差了个微小的值。所以实际上，这里错误的不是结论，而是比较的方法，正确的比较方法是使用 JavaScript 提供的最小精度值： console.log( Math.abs(0.1 + 0.2 - 0.3) <= N

一、最优的数据类型判断方法var type = function (o){ var s = Object.prototype.toString.call(o); return s.match(/\[object (.*?)\]/)[1].toLowerCase();};['Null', 'Undefined', 'Object', 'Array', 'String', '...

引文能看到这篇文章的同学大部分应该已经多少看过闭包的概念了（没看过的自行去看下廖雪峰老师的介绍），但是觉得它很深奥，这里就简单的让你们看懂，并且知道他的大概应用已经面试可能会出现的题目一.什么是闭包闭包是指有权访问另外一个函数作用域中的变量的函数.可以理解为(能够读取其他函数内部变量的函数)闭包的作用: 正常函数执行完毕后,里面声明的变量被垃圾回收处理掉,但是闭包可以让作用域里的 变量,在......

类型装换1、string转为number：123==='123'*12、number转为string：'123'===123+''3、把一个数组的元素全部转为String类型：const arr1=arr.map(String)获取数组中的最大或最小值const arr=[6,1,7,2,10,3,9,4,8,5];Math.max.apply(null,arr)Math.min.a...

Function.apply(obj,args)方法能接收两个参数obj：这个对象将代替Function类里this对象args：这个是数组，它将作为参数传给Function（args-->arguments）

var与let、const一、var声明的变量会挂载在window上，而let和const声明的变量不会：var a = 100;console.log(a,window.a); // 100 100let b = 10;console.log(b,window.b); // 10 undefinedconst c = 1;console.log(c,window.c...

缩略版就例如如我们关注了某一个公众号,然后他对应的有新的消息就会给你推送, //发布者与订阅模式 var shoeObj = {}; // 定义发布者 shoeObj.list = []; // 缓存列表 存放订阅者回调函数 // 增加订阅者 shoeObj.listen = function(fn) { shoeObj.list.push(f...