阿超的博客

There’s a special syntax to work with promises in a more comfortable fashion, called “async/await”. It’s surprisingly easy to understand and use.async/await是一种让开发者更舒服地写Promise的方式。关于它的用法可以详见下面两篇文档：...

1 问题URL.createObjectURL的介绍如下：The URL.createObjectURL() static method creates a DOMString containing a URL representing the object given in the parameter. The URL lifetime is tied to the document in...

1 想说的话JavaScript异步编程是前端面试中一个重要内容。为了加深我对此部分内容的印象，故写此博客，主要介绍JS异步编程的运行原理。pre栈队列2 正文本文主要是阐述下面这张图的内容。一图胜千言啊。和C语言类似，JS也有执行栈（execution stack）。执行栈内存储执行上下文（execution context），execution context也被译作执行环境。执行环境一般分为

原文：Understand JavaScript’s “this” With Clarity, and Master It上一篇文章：[译文]深入理解JavaScript的this关键字（一）1 this关键词最令人误解的场景和相关技巧当然我们将一个方法（方法内使用this）将作为一个回调函数，事情就变量有些麻烦。比如下面这个例子： // We have a simple object with a

1 原型式继承原型式继承时道格拉斯，克罗克福德在06年提出的一种新的继承方式。记住这个人，他还推广了另一种继承方式。现给出具体代码：function object(o) { function F() {} F.prototype = o; return new F();}我们可以看到：在object函数内部，我们先创建一个临时性的构造函数，然后让这个构造函数的protot

原文：Understand JavaScript’s “this” With Clarity, and Master It1 前言（在这篇文章中，我们还会学习所有this关键字容易让人误解的场景。） 前置要求：一点点的JS知识 阅读本文需要的时间：大约40分钟一般来说，无论是新人还是经验丰富的JS开发者，都曾对this关键字感到迷惑。这篇文章目标在于完整地阐述this。（我相信），只要我们理解了

1 组合式继承的问题组合继承是JS最常用的继承模式，但是它也有问题，（OS：还有完没完了），就是无论在什么情况下，都会调用两次超类型构造函数。具体如何，请看代码：function SuperType(name) { this.name = name; this.colors = ['red', 'blue', 'green'];}SuperType.prototype.sayNa

1 前言JS在诞生之初，正值Java火热，其作者创造JS是模仿Java，在很多地方又做了简化，被人称为玩具语言。但是它在创造对象，继承这方面又是如此复杂。就继承而言，就有6种方式。这是在我学习的其他语言，如Python, C++, Java中，我未曾见过的。不得不说，这真的很神奇。本文是要讲的创建对象的3种方式：工厂模式，构造对象模式和组合模式。这些内容我是第二遍看了，但是第一遍看是在今年3月份，我

1 借用构造函数为了解决原型链继承引起的不同实例共享引用类型值的问题，开发人员开始使用一种叫constructor stealing的技术，也叫做伪造对象或经典继承。这种技术的思想是：在子类型构造函数的内部调用超类型构造函数。看下面的代码：function SuperType() { this.colors = ['red', 'blue', 'green'];}function SubT

1 前言《JS高级程序设计》第13章在讲述事件冒泡和事件捕获时没有提供实例，我想这部分内容如果有实例，会有助于读者理解。2 事件冒泡和事件不会首先看一张图：描述了事件冒泡和事件捕获的流程。 首先声明，不同浏览器以及规范在事件流是否会触发顶层元素（document,html,body)有细微的差别，非常混乱。IE事件流，即事件冒泡，是从达到触发条件的最小标签向上冒泡。比如上图中的img，即使绑定了

这也是面试官问我的一个问题我的第一反应是typeof。但是正中对方下怀。> typeof {}'object'这样返回的是object这是一个JS很怪异的地方。为什么很怪异的呢，因为小白往往以{}和[]区分Array和Object但是如果你看JS的Object官方文档，typeof这样的行为或许有点道理All objects in JavaScript are descended from Ob

1 前言JS的OO(面向对象)之所以与一般OO语言不同，一个关键原因在于JS多了原型，也就是prototype这个概念在这篇文章之前，你应该先读下面这篇文章：《JS高级程序设计》第6章读书笔记：创建对象（一）之工场模式和构造函数模式2 原型模式实际上，当我们创建函数时，函数都有一个prototype的属性，指向一个对象，这个对象被称为原型对象，这个对象的用途是：”包含可以由特定类型的所有实例共享的属

1 前言我前后写了3篇博文阐述创建对象的4种方式。更为可怕的是：《JS高级程序设计》阐述6种对象的方式，虽然其中只有一种方式是常用的。学习了这部分内容，我觉得，如此繁杂的继承方式，即使当初创造JS的作者也会觉得吃惊。2 原型链（继承）原型链自然是基于原型的。我在之前的博客：JS高级程序设计》第6章读书笔记：创建对象（二）原型模式和组合模式以及《JS高级程序设计》第6章读书笔记：创建对象（三）再探原型

在Nicholas的《JS》高级程序设计中是这样描述描述canvas的rotate()API的。rotate(angle):围绕原点旋转图像angle弧度首先注意angle参数的单位是弧度我刚看到这个API的描述时认为：这是要把画布上已经画好的内容，旋转angle弧度吗，实则不然。首先让我们看下面这段代码 <canvas id="drawing" width="200px" height="200p

昨天美图面试有一题是写出XHR是什么以及写出其get请求的代码。其实我前几天才写过，不过之后又写了angular.js的$http的get请求，原生的一时间想不起来，就用angular.js写了。其实原生的也不复杂先给出代码：//JSvar xhr=new XMLHttpRequest(); xhr.onreadystatechange=function () { if(x

先给出代码<canvas id="drawing" width="200px" height="200px"></canvas><script type="text/javascript"> var drawing=document.getElementById("drawing"); if(drawing.getContext){ var context=draw

上周四晚上数梦工场笔试，其中有一道题目考察原生JS拖拽元素节点，我以为是用onmouseover事件实现，实则要更复杂些，其中的一些代码接口我就更谈不上熟悉了我查阅了网上的资料，找到一种比较简单的写法（虽然原来版本是错误的，当然被我修正了），给出代码:<div id='box' style="width:100px;height:100px;background-color:red;positio

跨域技术是前端面试中常见话题。JSONP就是一种跨域技术我撰写此文是为了加深对JSONP的印象何为跨域？A resource makes a cross-origin HTTP request when it requests a resource from a domain or port which is different from the one which the first reso

1 环境node:v6.11.12 问题为了方便，我在node环境下测试RegExp.exec()测试结果如下：我们可以看到:同样的代码，返回的结果是交替变化的这是为什么呢？还是要看文档：Finding successive matchesIf your regular expression uses the "g" flag, you can use the exec() method mul

环境浏览器：版本 57.0.2987.133 (64-bit)OS:macOS:10.12.3遇到的问题昨天做了美图的前端笔试题，其中一题是给定一张图片URL，将其画在canvas上，canvas我是会用的，但是drawImage这个函数的接口我记不大清了，所以回来我又试了下。后来发现我竟然画不出来了。先给出我的示例代码<img id="myImg" src="img/001.jpg"><c

上周四的数梦工场前端开发实习生笔试有这么一道题：要求你用JS实现[1,2,3,4,5].duplicator()。当然数组是任意的JS中数组是对象，当然可以添加方法。复制，就用数组的splice将诶口实现呗，看起来很简单，实则是有陷阱的。我想到的代码是这样的：var arr=[1,2,3,4,5];arrar.foo=function () { var length=arr.length;

1 前言其实，在 上一篇博客：《JS高级程序设计》第6章读书笔记：创建对象（二）原型模式和组合模式，我们讨论了原型了模式，但是关于原型，我们还没讲完。这一节，我们讨论原型的一些细节。2 原型与in操作符在单独使用in操作符时，如果能够通过对象访问给定属性，无论是是通过原型还是实例，则会返回truefunction Person() {}Person.prototype.name = 'Nichol