feral_coder的博客

许多人发现下面的概念是js中复杂的部分：作用域链 闭包 this其实，这些概念要比它们看起来更加容易理解，尤其是了解了执行上下文相关的知识。这三个部分有什么共同点？它们都与变量查找有关-js引擎查找变量的方法。变量查找在下面的例子中，变量查找可能是令人迷惑的。当执行isApple函数时，执行栈中有三个堆叠的执行上下文。全局执行上下文 isBanana 函数执行上下文 isApple函数执行上下文接下来console开始查找apple变量。直观来说，我们可以通过

自从ES6更新后，js有三种作用域全局作用域 函数作用域 块级作用域从执行上下文的角度来看作用域是什么？全局作用域是全局执行上下文，函数作用域与函数执行上下文相关联块级作用域在ES6中被介绍，它不同于以上两种作用域。全局作用域的一个例子最简单的方式理解块级作用域是将它与其他两中作用域比较变量在全局作用域和函数作用域中工作相似，所以在这篇文章我们仅仅讨论全局作用域和块级作用域。在这个例子中，我们仅有一个全局执行上下文和一个全局变量环境。第二个apple覆盖了前一个

在上一篇文章中我们讨论了有关执行上下文，它是编译阶段创建的第一个执行上下文。我们称这个第一个执行上下文为全局执行上下文（global EC）,这个执行上下文存储的相关变量是全局变量。全局执行上下文并不是唯一的，当脚本运行时，多个执行上下文可以被创建或移出。那么这些执行上下文来自哪？一个执行上下文与编译阶段联系在一起，那么多个执行上下文暗示有多个编译阶段。这个机制与函数有关上面的代码中，我们知道在程序运行结束后控制台会打印20，但是在执行上下文里到底发生了什么？一如既往，从

对于大多数人来说，js是神秘的，它有许多唯一的特点你可能听过如下术语：提升 作用域和作用域链 闭包 this它们都有一些“怪异”的行为，在js中是唯一的理解这些概念的关键是执行上下文，我希望这篇文章提供一个不同的角度来理解javascript,如不是从MDN上复制一些准确但模糊的信息。不要误会，我也会从MDN上阅读一些相关信息，然后，我更相信理解比去记住这些信息更加有用。两步：编译和执行当一个js代码片段运行时，我们会讨论它的两个步骤：编译和执行这个看起来很简单，然后，j

svg是一种基于XML格式的图像描述语音，它是矢量图，相比较与canvas,放大时不会失真，相对于图像来说，因为它本就是文本形式存在，尺寸会更小。传统使用方式，我们会将svg复制到需要用到的地方，或者到处import，这样代码不仅不美观，而且维护起来很麻烦，特别时图标多了的时候。接下来我们讲讲怎么以组件的方式使用svg图标（以vue为例react同理）。实现原理：利用svg的use标签，通过i...

前言：react的生命周期描述了react组件从初始化，组件运行，更新和销毁的整个过程，其中react为某些生命周期环节提供了钩子函数，便于开发者进行业务逻辑编写。1、初始化阶段getDefaultProps： 获取初始化props，由组件内部调用，不提供钩子函数，在初始化state之前 initState：初始化state，constructor()中初始化state static ...

前言、今天逛社区，无意间看到一道面试题，觉得很有意思，特此记录一下，题目如下function LazyMan() {} //设计LazyMan函数满足下列需求LazyMan('Tony');// Hi I am TonyLazyMan('Tony').sleep(10).eat('lunch');// Hi I am Tony// 等待了10秒...// I am eating...

一、redux是什么？redux是一个状态管理工具，随着 JavaScript 单页应用开发日趋复杂，我们需要管理应用的state(数据)也越来越多，这些 state 可能包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据，也包括 UI 状态，如激活的路由，被选中的标签，是否显示加载动效或者分页器等等。管理不断变化的 state 非常困难。如果一个 model 的变化会引起另一个 m...

废话不多说，直接上代码，水平有限，欢迎大家一起讨论！基本思想：使用异步队列存储处理函数，再根据传入的fn来改变Promise的状态，调用相应队列里的处理函数。function Promise(fn) { //初始化 this.status = 'PENDING' this.value = undefined this.successQueues = [] ...

apply与call都是用来改变js函数this指向的，因为比较简单，就不多赘述了！Function.prototype.apply = function(context) { var args if (arguments.length > 1) { args = arguments[1] } context.fn = this ...

前言：上一篇文章讲完了redux的基础核心部分，我们知道在实际开发中，我们会将reducer进行拆分，这样便于代码的阅读与维护，数据管理更加清晰。而通过上一篇文章，我们知道createStore只能接受一个reducer作为参数，如果我们将reducer进行拆分，那么怎么将多个reducer传入createStore函数呢？接下来，我们就来聊聊combineReducers的作用。首先我们先来...

前言：首先，jsonp的出现是为了解决跨域请求的。跨域是由于浏览器的同源策源造成的，同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。同源是指协议、域名和端口号相同，如果三者有一不同则出现跨域。1、jsonp跨域机制虽然ajax受到同源策略的限制，但是script标签的src属性不会受到同源策略的限制，可以任意获取服务器上...

概述：Iterator是ES6新加入的概念，Iterator是一种接口。接口是一系列特征的集合，是方法的声明，是一种抽象概念，同时接口也是实现继承的一种方式。为什么说接口是抽象概念呢，对于OOP语言来说，接口只提供方法的声明，不提供方法的实现，具体实现由其实现类来重写。类可以看成是某一类型具有相同特征的数据结构的描述。通俗来说，就是为实现了接口的不同数据接口提供了统一的特性访问机制。对于js来...

一、webpack4.x使用babel7.x 版本使用：babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime 等包npm install babel-loader @ba...

1、配置js文件中使用jsx语法"files.associations": { ".js": "javascriptreact"}2、配置jsx中html标签自动补全"emmet.includeLanguages": { "javascript": "javascriptreact"}...

js函数执行的时都有执行期上下文，也就是我们所说的this,当函数空执行的时候，在非严格模式下this指向全局gloal或者window对象，在严格模式下指向undefined。一般我们可以通过apply或者call来改变this的指向，除此之外还可以通过bind来绑定this的指向。Function.prototype.myBind = function() { let context ...

class Eventer { constructor() { this._events = {} } on(eName,fn) { if(eName in this._events) { this._events[eName].push(fn) //向已存在的事件中添加回调 }else{ this._events[eName] = [fn] } } e...

1、概念：在js中，当运算符在运算时，如果两边数据不统一，CPU就无法计算，这时我们编译器会自动将运算符两边的数据做一个数据类型转换，转成一样的数据类型再计算，即隐式转换。2、隐式转换规则：字符串连接符+：只要两边有一个为字符串，则+为字符串连接符。1 + 'abc' // '1abc'算术连接符+：两边都是数字,或者null,boolean,undefined时，则+为算术连接...

1、前言：执行环境是js中最重要的一个概念，执行环境定义了变量或函数有权访问的其他数据，决定了他们各自的行为。每个执行环境都有一个与之关联的变量对象（variable object），环境中定义的所有变量都保存在这个变量。全局执行环境是最外层的一个执行环境，根据js运行的宿主环境不同而不同，在web浏览器中，全局执行环境是window对象，因此，所有的全局变量和函数都是window的属性。某个执行...

1、概念：二叉树是每个节点最多有两个子树的有序树。通常子树被称作“左子树”(left subtree)和“右子树”(right subtree)。二叉树常被用于实现二叉查找树和二叉堆。2、原理（灵魂画手），如下数组，遍历生成二叉树，则可以得到升序3、代码实现class Node { //树节点 constructor(value) { this.value = va...

前言：js是单线程这个特性不多赘序，单线程意味着一次只能做一件事，对于现代计算机来说，存在着多个CPU，如果只使用单线程，对CPU的利用率将大大降低。而web worker的出现正式为了解决这个问题，web worker允许在后台创建线程，可以将一些比较耗时的任务交给worker线程来做，在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。一、使用注意项：web worker受...

前言：Symbol是ES新加入的一种数据类型，属于原始数据类型。symbol表示独一无二的值。1、创建symbol//通过Symbol函数来创建一个symbol对象let s = Symbol()//可以传入一个字符串参数来描述当前symbol对象let s2 = Symbol('hello')typeof s // symbol2、symbol不能与任何类型进行运算，...

一、定义：Event接口表示在DOM中发生的任何事情；一些是用户生成的（如用户点击鼠标，按下键盘等，都会生成一个事件），一些是由其它API生成的（如动画结束事件，过渡结束，视频播放被暂停等...）。事件通过由外部源触发，也可由编程方式触发，例如ele.click(),触发一个单击事件，或者通过定义事件，然后使用eleTarget.dispatch(event)分发一个事件。二、DOM元素注册事...

前言：在说拷贝之前，先说说js中的数据存储，我们知道js这广义上数据类型分为两种，原始数据类型和引用数据类型，原始数据类型包括string,boolean,number,null,undefined,symbol,引用类型有Function,Array,Object,Date,RegExp等等其实这些都可以归总为Object类型。对于原始类型数据，赋值即是拷贝，因为原始类型栈里存的就是其值。对...

1、到npm官网，注册一个账号2、打开cmd，登录npm账号npm login3、按照提示输入自己注册时的用户名，密码，邮箱回车键4、新建一个文件夹test5、cd进入test,初始化库信息npm init -y6、在test下新建一个index.js文件，库的入口文件7、发布npm publish test8、撤销发布的库npm --force...