1. this 别名这种方式一般就是在函数作用域顶端创建一个指向 this 的变量。 例如，在一个对象方法中在执行一个方法或者事件的时候： 123456789101112var obj = { a: 1, init: function(){ let ele = document.getElementsByClassName("ele"); let that = this; let aaa = (() => { that.a = 2; //通过this的别名that改变a的值 })(); //匿名自执行函数 }}obj.init();console.log(obj.a) //结果为2 或者在vue实例的created()方法中利用axi ...

今天在翻看红宝书的第22章的时候，发现了原来没有注意到的惰性载入函数，稍微记录一下，以加深印象。 什么是惰性载入函数因为浏览器之间行为的差异，多数JavaScript 代码包含了大量的if 语句，将执行引导到正确的代码中。看看下面的 createXHR() 函数： 1234567891011121314151617181920212223function createXHR(){ if (typeof XMLHttpRequest != "undefined"){ return new XMLHttpRequest(); } else if (typeof ActiveXObject != "undefined"){ if (typeof arguments.c ...

从一个C++函数说起： 1234567891011namespace SortTestHelper{ //生成有n个元素的随机数组，每个元素的随机范围为rangeL~rangeR int* generateRandomArray(int n,int rangeL,int rangeR){ int *arr = new int[n]; srand(time(NULL)); for(int i = 0; i < n; i++){ arr[i] = rand() % (rangeR - rangeL + 1) + rangeL; } return arr; }} 今天看了上面这个 C++ 函数生成一个随机数数组，就想琢磨着用js生成各种可能需 ...

js 模块化的发展历程: 命名空间 common.js AMD,CMD,UMD ES6 module 现在最主流的两种模块化方案为： common.js 和 ES6 module。 命名空间很多人会问?命名空间是什么呢？(我也刚知道这个说法) 我们可以认为它是一个对象，或者一个库，对象下面有类别名，属性名和方法名等，例如： 12345var NameSpace = {}NameSpace.type = NameSpace.type || {}NameSpace.type.method = function(){} 在好几年前，还没有模块化的世界里，只能通过这种命名空间去极大的避免冲突，可以一开始就跟团队里的其他人约定每个人使用什么命名空间等。 Co ...

上一篇文章说了 JSON、JSONP、AJAX、跨域之间的联系与区别，在结算 JSONP 的环节中，也深刻的通过举例说明，解释了 JSONP 实现的原理。但是都是通过简单的例子，今天我们说说我在项目中是怎么使用JSONP的。这里我用到的是github上面一个简单的JSONP接口 API它的实现源码在 index.js 中，有兴趣的童鞋可以看看，只有几十行代码。我们先说说他的API: jsonp(url, opts, fn) url (String) url opts (Object) 可选 param (String) 与后台jsonp接口约定好的回调参数名称(默认为 callback) timeout (Number) 超时报错时间(默认为 60000ms),即请求超过1分钟报超时 prefix (S ...

当前主流的前端框架 Vue 和 React 中都有着 Virtual Dom 的概念，相信大家都已经耳濡目染了。 在说 Virtual Dom 之前，我们线说说浏览器渲染页面的过程: 浏览器渲染浏览器的渲染流程（简单版本）：浏览器输入url，浏览器主进程接管，开一个下载线程，然后进行 http请求（略去DNS查询，IP寻址等等操作），然后等待响应，获取内容，随后将内容通过 RendererHost 接口转交给 Renderer 进程，然后就是浏览器渲染流程开始。 浏览器器内核拿到内容后，渲染大概可以划分成以下几个步骤： 解析html建立dom树 解析css构建render树（将CSS代码解析成树形的数据结构，然后结合DOM合并成render树） 布局render树（Layout/reflow），负责各元素尺寸 ...

前言正则表达式在平时工作中非常常见，但是它的神奇对于很多程序员可能一直像魔法一样的存在，工作中用到的大部分正则都是去网上搜索得来的，再复杂一点看着文档费时费力的拼凑一下。是不是深有感触了？一次在网上看到有关正则的视频，让我收货颇多，当时认真记录了笔记和自己的感悟，也希望给更多需要的童鞋带来帮助。文章从零开始讲正则，导致有点长，可以收藏零碎时间慢慢看，认真看完绝对受益匪浅。文章首发于我的博客，以下是正文： Regular Expression 使用单个字符串来描述、匹配一系列符合某个语法规则的字符串。说简单了就是按照某种规则去匹配符合条件的字符串。这里先推荐一个学习正则表达式的在线工具：https://regexper.com/，网站利用图像和英文解释，可以帮助我们非常形象的学习正则表达式，该工具也可以通过git ...

可以用一句话总结本书的第二部分（第4 章至第6 章）：类是一种可选（而不是必须）的设计模式，而且在JavaScript 这样的[[Prototype]] 语言中实现类是很别扭的。 这种别扭的感觉不只是来源于语法，虽然语法是很重要的原因。第4 章和第5 章介绍了许多语法的缺点：繁琐杂乱的.prototype 引用、试图调用原型链上层同名函数时的显式伪多态（参见第4 章）以及不可靠、不美观而且容易被误解成“构造函数”的.constructor。 除此之外，类设计其实还存在更深刻的问题。第4 章指出，传统面向类的语言中父类和子类、子类和实例之间其实是复制操作，但是在[[Prototype]] 中并没有复制，相反，它们之间只有委托关联。 对象关联代码和行为委托（参见第6 章）使用了[[Prototype]] 而不是将它 ...

6.1　面向委托的设计为了更好地学习如何更直观地使用[[Prototype]]，我们必须认识到它代表的是一种不同于类的设计模式。 6.1.2　委托理论你可以想象成，执行任务“XYZ”需要两个兄弟对象（XYZ 和Task）协作完成。但是我们并不需要把这些行为放在一起，通过类的复制，我们可以把它们分别放在各自独立的对象中，需要时可以允许XYZ 对象委托给Task。 下面是推荐的代码形式，非常简单： 12345678910111213141516Task = { setID: function(ID) { this.id = ID; }, outputID: function() { console.log( this.id ); }};// 让XYZ ...

5.1 [[Prototype]]JavaScript 中的对象有一个特殊的 [[Prototype]] 内置属性，其实就是对于其他对象的引用。几乎所有的对象在创建时 [[Prototype]] 属性都会被赋予一个非空的值。 注意：很快我们就可以看到，对象的 [[Prototype]] 链接可以为空，虽然很少见。 思考下面的代码： 1234var myObject = { a:2};myObject.a; // 2 [[Prototype]] 引用有什么用呢？在第 3 章中我们说过，当你试图引用对象的属性时会触发[[Get]] 操作，比如 myObject.a。对于默认的 [[Get]] 操作来说，第一步是检查对象本身是否有这个属性，如果有的话就使用它。 ES6 中的 Proxy 超出了本书 ...