Jodie Zhang

``` Promise.all = function (promises) { return new Promise(((resolve, reject) => { const result = []; let count = 0; function done(i, data) { result[i] = data; if (++count ===...

### ✅ Deploy Preview for *nostalgic-ptolemy-b01ab8* ready! | Name | Link | |:-:|------------------------| |🔨 Latest commit | ba6fb3b0add1c7267a0d1580f103e2b70ee6b068 | |🔍 Latest deploy log | https://app.netlify.com/sites/nostalgic-ptolemy-b01ab8/deploys/642b24206be471000807d196 | |😎 Deploy Preview |...

组合继承是JavaScript最常用的继承模式。组合继承最大的问题是，无论什么情况下，都会调用两次超类型构造函数：一次是在创建子类型原型的时候，另一次是在子类型构造函数内部。 组合式继承 ``` function SuperType(name){ this.name=name this.color=["red","blue","green"] } SuperType.prototype.sayName=function(){ console.log(this.name) } function SubType(name,age){ SuperType.call(this,name)//第二次调用SuperType,又有了实例属性name和color了 this.age=age } //第一次调用SuperType，实例属性name和color和SuperType的prototype属性都给了SubType的prototype对象 SubType.prototype=new SuperType() SubType.prototype.constructor=SubType SubType.prototype.sayAge=function(){ console.log(this.age) } ``` 寄生组合式继承 ``` function inheritPrototype(subType,superType){ var prototype=Object.create(superType.prototype)...

``` 1 2 3 document.getElementById('list').addEventListener('click', function (e) { if (e.target && e.target.nodeName.toUpperCase() === 'LI') { console.log(e.target) } }) ``` 减轻每个item都要绑定的开销

1.**借用构造函数** 通过使用call方法，我们再未来将要新创建的SubType实例环境下调用了 SuperType构造函数，这样一来，就会在新的SubType对象上执行SuperType()函数中定义的所有对象初始化代码。这样，SubType的每个实例都会具有自己的colors属性的副本。 ``` function SuperType(name){ this.name=name this.colors=['white','red'] } function SubType(){ //继承属性，传递参数 SuperType.call(this,'Jodie') this.age=18 } var instance1=new SubType() instance1.colors.push('black') console.log(instance1.name) console.log(instance1.age) console.log(instance1.colors) var instance2=new SubType() console.log(instance2.name) console.log(instance2.age) console.log(instance2.colors) ``` ```...

1. 使用Flex ``` 未知宽高元素水平垂直居中 .parent4{ display:flex; justify-content: center; align-items: center; width: 300px; height:300px; background: #FD0C70; } .parent4 .child{ color:#fff; } hello world-4 ``` 2. 使用绝对定位 ``` 未知宽高元素水平垂直居中 .parent3{ position:absolute; height:300px;...

要理解闭包，必须了解JS特殊的变量作用域。 变量的作用域：**全局变量和局部变量** **在函数内部可以直接读取全局变量** ``` var n=999 function f1(){ alert(n) } f1();//999 ``` **另一方面，在函数外部无法读取函数内的局部变量。** ``` 　function f1(){ 　　　　var n=999; 　　} 　　alert(n); // error ``` 我们有时候需要得到函数内的局部变量，那要怎么办呢？ 那就是在函数的内部再定义一个函数 ``` 　function f1(){ 　　　　var n=999; 　　　　...

JS语言的一大特点就是单线程，同一个时间只能做一件事情。 **任务队列** 单线程就意味着，所有的任务需要排队，前一个任务结束，才会执行后一个任务。如果前面一个任务耗时太长，后面的任务就得等着。 所有的任务分成两类，一种是同步任务，一种是异步任务。同步任务指的是，在主线程上排队执行的任务。异步任务是不进入主线程，而进入任务队列（task queue）的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程。 **JS中有两种异步任务** 宏任务：script（整体代码），setTimeout,setInterval,setImmediate,I/O,UI rendering 微任务：process.nextTick(Nodejs),Promises,Object.observe,MutationObserver **事件循环（event-loop）** 主线程从任务队列中读取执行事件， 这个过程是不断循环的，这个机制被称为事件循环。 主线程会不断的从任务队列中按顺序取任务执行，每执行完一个任务都会检查微任务队列是否为空，如果不为空则会一次性执行完所有的微任务，然后再进入下一个循环去任务队列取下一个任务执行。 1.选择当前要执行的宏任务队列，选择一个最先进入任务队列的宏任务，如果没有宏任务可以选择，则会跳转至microtask的执行步骤。 2.将事件循环的当前运行宏任务设置为已选择的宏任务。 3.运行宏任务。 4.将事件循环的当前运行任务设置为null。 5.将运行完的宏任务从宏任务队列中移除。 6.microtasks步骤：进入microtask检查点。 7.更新界面渲染。 8.返回第一步。 `setTimeout` 只能保证延时或间隔不小于设定的时间。因为它实际上只是将回调添加到了宏任务队列中，但是如果主线程上有任务还没有执行完成，它必须要等待。

测试模板 造一个10W数组，造一个5W数组，合并为一个15W数组进行测试 ``` let array1 = Array.from(new Array(100000),(x,index) => { return index }) let array2 = Array.from(new Array(50000),(x,index) =>{ return index+index }) let start = new Date().getTime() console.log('begin to remove...

首先了解**遍历器**的概念（iterator） 它是一种接口，为各种**不同的数据结构**提供**统一的访问机制**。 任何数据结构，只要部署了Iterator接口，就可以完成遍历操作。 Iterator的作用有三个： 一个**是为各种数据提供一个统一的，简便的访问接口** 二是**使得数据结构的成员能够按照某种次序排列** 三是**ES6创造了一种新的遍历命令，for...of循环，Iterator接口主要供for...of消费** Iterator的遍历过程如下： 1.创建一个指针对象，指向当前数据结构的起始位置。 2.**第一次**调用指针对象的next方法，可以将指针指向数据结构的**第一个**成员 3.第二次调用指针对象的next方法，指针就指向数据结构的第二个成员 4.不断调用指针对象的next方法，直到它指向数据结构的结束位置 每次调用next方法都会返回数据结构的当前成员信息。具体来说，就是返回一个包含value和done两个属性的对象。其中value是当前成员的值，done属性是一个布尔值，表示遍历是否结束。 ``` var it=makeIterator(['a','b']); it.next() it.next() it.next() function makeIterator(array) { var nextIndex=0; return { next: function(){ return nextIndex