有没有想过浏览器如何读取和运行JS代码？ 这看起来很神奇，我们可以通过浏览器提供的控制台来了解背后的一些原理。 在Chrome中打开浏览器控制台，然后查看Sources这栏，在右侧可以到一个 Call Stack 盒子。 JS 引擎是一个可以编译和解释我们的JS代码强大的组件。 最受欢迎的JS 引擎是V8，由 Google Chrome 和 Node.j s使用，SpiderMonkey 用于Firefox，以及Safari/WebKit使用的 JavaScriptCore。 虽然现在 JS 引擎不是帮我们处理全...
作为前端工程师必备技能，JavaScript 的重要性不言而喻。虽然易上手，但却有着诸多复杂微妙的机制，想要真正掌握绝非易事。 专栏面向JavaScript语言的实际应用者与深度爱好者，以讲述JavaScript语言特性、原理以及核心实现技术为主。 周爱民将综合代码的特殊性、代码所涉问题的领域、与该代码相似的或同类的问题，将代码逐步分解、解析，一方面发掘它们潜在的应用，另一方面帮助你构建一个语言知识结构。 周爱民，前端“绿皮书”...
Promise Promise.resolve(x) 可以看作是 new Promise(resolve => resolve(x)) 的简写，可以用于快速封装字面量对象或其他对象，将其封装成 Promise 实例返回一个Promise对象，使用该对象来注册处理结果和错误的回调 同时可以串联.then 和 .catch本质最终要被交付的结果的容器 可以注册监听器的对象（指运行resolve之后能够按需执行下来的代码）例子 function addAsync(x, y) {return new Promise((resolve, reject) => { // (A)if ...
一、JavaScript原型链ECMAScript中描述了原型链的概念，并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。在JavaScript中，用 __proto__ 属性来表示一个对象的原型链。当查找一个对象的属性时，JavaScript 会向上遍历原型链，直到找到给定名称的属性为止！ 比如现在有如下的代码： 扩展Object类，添加Clone和Extend方法 1 /*扩展Object类，添加Clone，JS实现克隆的方法*/2 O...
1、链式调用是什么 使用过JQuery 的同学应该都知道，代码如下 $('text’).setStyle('color', 'red').show();这就是链式调用，就是调用完一个方法以后，不用另起一行，重新再当前this 对象上再去调用方法。 普通的函数调用方式，如下： var sched = {wakeup: function () {console.log('Running')return this},morning: function () {console.log('Going shopping')return this} } sched.wakeup() // Running sched.morning() // Go...
一个以@开头的描述性词语。英语的decorator动词是decorate，装饰的意思。其中词根dek(dec发音)原始印欧语系中意思是“接受”。即，原来的某个事物接受一些新东西（而变得更好）。从另外一个角度描述，装饰器主要是在被装饰对象的外部起作用，而非入侵其内部发生什么改变。装饰器模式同时也是一种开发模式，其地位虽然弱于MVC、IoC等，但不失为一种优秀的模式。 JavaScript的装饰器可能是借鉴自Python也或许是Java。较为明显的不同的...
1、入门实例 首先我们来看一个简单模板： <script type="template" id="template"><h2><a href="{{href}}">{{title}}</a></h2><img src="{{imgSrc}}" alt="{{title}}"></script>其中被{{ xxx }}包含的就是我们要替换的变量。接着我们可能通过ajax或者其他方法获得数据。这里我们自己定义了数据，具体如下：var data = [{title: "Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5",href: "http://net.tutsplus.co...
随着Node 7的发布，越来越多的人开始研究据说是异步编程终级解决方案的 async/await。 异步编程的最高境界，就是根本不用关心它是不是异步。 async 函数就是隧道尽头的亮光，很多人认为它是异步操作的终极解决方案。 async 和 await 起了什么作用 async 起什么作用 这个问题的关键在于，async 函数是怎么处理它的返回值的！ 我们当然希望它能直接通过return语句返回我们想要的值，但是如果真是这样，似乎就没 await 什么事了。所以...
文章目录new关键字进行的操作 自己实现new操作符JavaScript中new操作符用于创建一个给定构造函数的对象实例。如下例子： function Person(name, age){ this.name = name; this.age = age; } const person1 = new Person(Tom, 20) console.log(person1) // Person {name: "Tom", age: 20} 我们定义了一个构造函数Person，然后通过new操作符生成Person构造函数的一个实例并将其引用赋值给变量person1。然后控制台打印出person1的内容...
简介最近做项目的时候，发现无论是前端还是后端，indexOf出现的概率都非常频繁，今天我们来看下他的实现原理吧！indexOf的含义：给定一个字符串去匹配另一个字符串的下标，如果匹配到，返回下标，如果匹配不到则返回-1，其实原理还是比较简单的，如果需要你实现，那么应该怎么做呢？原理现在给定匹配的字符串A，原始字符串B，比如匹配字符串A等于“叫练”，原始字符串B等于“边叫边练，我喜欢叫练”，你可能一眼就发现“叫练”是最...
一、基本架构Javascript的绑定方法和lua的绑定方法有些不同，主要原因是javascript的引擎有很多种，比如嵌入式系统常用的jerryscript和PC上常用的V8。不同的引擎提供注册C/C++函数的能力不同，所以在绑定时我们只对引擎做一个最低能力的要求：提供注册全局函数的能力。 我们把绑定的代码分两层： 引擎相关的代码负责把awtk的函数一一映射到js层面。 引擎无关的代码(awtk.ts)负责把awtk的函数包装成面向对象的接口。 基本架构如下：...
冒泡排序很简单，两重循环即可。今天有伙伴问起原理，用一个图详细解释其冒泡原理。 核心原理是：把每一个元素和数组中的每一个元素进行位置比较，如果满足移动的条件，相比较的两个元素交换位置（冒泡） 先撸代码，代码简短：/*** 数组的冒泡排序* @param {array} arr * @author xinxiang84@126.com*/ function bubbleSort(arr) {for( let i=0; i<arr.length; i++ ) {for(let j=0; j<arr.length; j++) {// 比较大小，交换顺序，也...
一、拖拽原理 假设浏览器上有一个元素（已经进行绝对定位了），起始位置为(mx,my)，即距浏览器左方位置为mx px，距离浏览器上方位置为my px， 拖拽过程中就是改变left top值，假设鼠标点击元素，并设点击元素的点为(x,y)，这个点肯定是在拖拽元素里面的，随着鼠标的移动可以 得到新的位置，把这个点设为(nx,ny)，这时left值应该为nx-x+mx，top值为ny-y+my，下图所示：二、用到的方法1、mousemove （鼠标移动时） 2、mousedon （鼠...
JavaScript是Web前端人员必须要掌握的知识点之一，也是一门高级语言。最初JavaScript只是在Web浏览器中运行，随着Node的出现，JavaScript也可以在服务端运行。接下来我就给大家讲解一下JavaScript引擎工作原理。一、JavaScript引擎是什么？ JavaScript引擎是一种用于将我们的代码转换为机器可读语言的引擎。如果没有JavaScript引擎，你编写的代码对计算机来说简直是一堆“胡言乱语”。不仅仅是JavaScript，其他所有编程语言都需要一...
javascript引擎工作原理什么是JavaScript解析引擎？ 简单地说，JavaScript解析引擎就是能够“读懂”JavaScript代码，并准确地给出代码运行结果的一段程序。比方说，当你写了 var a = 1 + 1; 这样一段代码，JavaScript引擎做的事情就是看懂（解析）你这段代码，并且将a的值变为2。学过编译原理的人都知道，对于静态语言来说（如Java、C++、C），处理上述这些事情的叫编译器（Compiler），相应地对于JavaScript这样的动态语言则叫...