Donnien的博客

class Sub { events = {}; on(type, func) { !Array.isArray(this.events[type]) ? (this.events[type] = []) : null; let arr = this.events[type]; if (arr.includes(func)) return; arr.push(func); } off(type, func) { let arr = this.eve

1.let和var的区别var存在变量提升,而let不存在变量提升(更严谨)console.log(x); //undefinedconsole.log(y); //Uncaught ReferenceError: Cannot access 'y' before initializationvar x = 12;let y = 13;全局上下文中基于var声明的变量是直接存储到GO(window)中,而let声明的变量是存储到VO(G)中,和GO没有关系var x = 12;le

/* * http://www.axios-js.com/zh-cn/docs/ * * 基于Promise封装的ajax库，核心XMLHttpRequest * * axios 函数(对象) * + CancelToken 用于取消ajax请求 * + all 基于promise.all实现ajax的并行，当所有的ajax请求都成功，整体才会返回一个成功的promise实例 * + spread 解析出基于all返回的结果 * + create 创建一个新的实例，来做

const toType = function toType(obj) { // null/undefined if(obj == null) return obj+''; let reg = /^\[object ([a-zA-Z0-9]+)\]$/; // 引用数据类型 return typeof obj === 'object' || typeof obj === 'function' ? // 正则捕获exec [Object xxx] 捕获.

// 模拟发送网络请求const query = (interval) => { return new Promise((resolve) => { setTimeout(() => { resolve(interval); }, interval); });};/* 并行 同时发送多个请求 等待所有请求都成功之后再继续往下执行 Promise.all 等待所有promise实例都是成功态才执行then的回调函数 *//*

/* 判断体中的变量提升机制 带var的还是只声明 判断体中带function的,在变量提升阶段,也是只声明了,不在判断体中的function是声明加定义的*/console.log(a); // undefinedconsole.log(b); // undefinedif (!('a' in window)) { // 'a' in window 检测'a'是否是window的一个属性 var a = 13 function b(){}}console.l

class Interator { constructor(assemble){ let self = this self.assemble = assemble self.index = 0 } next(){ let self = this, assemble = self.assemble if (self.index > assemble.length - 1) {

/* function* fn(){ console.log(this); return 10}fn.prototype.name = '小林'// 普通函数执行 返回这个函数的一个实例 但是函数内部的代码并没有执行let itor = fn()console.log(itor);// 调用itor.next方法才会将fn中的代码执行 并放回一个对象{ value: 10, done: true }console.log(itor.next());*/// ===

(function () { "use strict"; function Promise(executor) { var self = this; if (typeof executor !== "function") throw new TypeError("Promise resolver is not a function"); if (!(self instanceof Promise)) throw new TypeError("

// Map// let m = new Map()// m.set('name', '小林')// m.set('name', '小谢')// console.log(m); // Map(1) { 'name' => '小谢' } 同键名会覆盖(即去重)// let obj = { name: 1 }// m.set(obj,'456') // 这个obj的引用空间还是被set所引用导致v8垃圾回收机制回收不了obj// obj = null // 把obj清空// conso

// Promise.all([promise数组:{要求数组中的每一项尽可能都是promise实例}])：返回一个新的promise实例AA，AA成功还是失败，取决于数组中的每一个promise实例是成功还是失败，只要有一个是失败，AA就是失败的，只有都成功AA才是成功的// Promise.race：传入一个数组,最先知道状态的promise实例，是成功还是失败，决定了AA是成功还是失败function fn(interval) { return new Promise((resolv

// async function async1() {// console.log('async1 start');// await async2();// // 下一行代码放到了微任务队列当中// console.log('async1 end');// }// async function async2() {// console.log('async2');// }// console.log('script start');// set.

// setTimeout就是作为宏任务来存在的，而Promise.then则是具有代表性的微任务，// 上述代码的执行顺序就是按照序号来输出的。// setTimeout((_) => console.log(4));// new Promise((resolve) => {// resolve();// console.log(1);// }).then((_) => {// console.log(3);// });// console.log(2)

function fn (x,y,ev) { console.log(this,x,y,ev); return x+y}obj = { name: 'obj'}// 重写bind方法 基于call实现Function.prototype._bind = function _bind(context,...params) { // this->fn context->obj params->[10,20] // 这里多一个arg

// 重写内置call方法Function.prototype._call = function _call(context, ...params) { // this->fn context->obj params->[10,20] // context是undefined或者null的情况 if (context == null) context = window; // context是传的是原始值得情况 if (!/^(object|function)

/* * 闭包进阶之：单例设计模式 & 模块化编程思想 * 模块化编程历史「当代前端开发，都是模块化编程：公用性&复用性、提高开发效率、方便管理、团队协作开发...」 * @1 高级单例设计模式「闭包+对象」 问题：根据模块之间的依赖，需要明确导入顺序 * @2 AMD 按需加载(require.js) 问题：所有的依赖都是需要提前导入的 “前置依赖” * @3 CMD(sea.js) & CommonJS规范(Node.js) 问题：客户端浏览

// 柯里化函数编程思想是指利用闭包的保存机制(形成闭包,把一些信息预习存储起来),供其上下文来使用// 例题// 写一个函数fn 使得满足下面条件// let res = fn(1,2,3,4,5)(3)// console.log(res) // => 1+2+3+4+5+3 = 18function fn(...params){ return function (...args) { // 利用上面保存的parmas的值 args = args.c

/* * 把其它类型转换为string * + [val].toString() & String([val]) * + 原始值类型：基于引号包起来、bigint会去掉n * + 对象类型值： * + 调用 Symbol.toPrimitive * + 如果不存在则继续调用 valueOf 获取原始值，有原始值则把其转换为字符串 * + 如果不是原始值，则调用toString转换为字符串 * 特殊

每个js文件都可以看成是一个模块在node环境下,一般使用CommonJS规范导入用require导出用module.exports在浏览器器环境下一般使用ES6Module规范导入用import导出用export主页面引入入口js文件要script标签要设置type='module'...

// 检测某个属性是否为对象的“私有属性”// + f1是Fn类的实例，也是Object这个类的实例// + Object.prototype.hasOwnProperty 这个方法就是用来检测私有属性的// console.log(f1.hasOwnProperty('say')); //=>true 特点：必须是它的一个私有属性才可以「有这个属性，但是不是私有的不行 & 没有这个属性更不行」// console.log(f1.hasOwnProperty('hasOwnP

let time = "2019-08-13";//=>变为"2019年08月13日"let reg = /^(\d{4})-(\d{1,2})-(\d{1,2})$/;//=>这样可以实现//time = time.replace(reg,"$1年$2月$3日");//console.log(time); //=>2019年08月13日//=>还可以这样处理 [str].replace([reg],[function])//1.首先拿REG和TIME进行匹配捕获，

/* // 每一次执行getCss方法，都需要验证当前浏览器是否兼容getComputedStylefunction getCss(element, attr) { if (typeof getComputedStyle !== 'undefined') { return getComputedStyle(element)[attr]; } return element.currentStyle[attr];} */// 第一次执行会产生闭包funct

//=>构造函数因为传递的是字符串，\需要写两个才代表斜杠let reg = /\d+/g;reg = new RegExp("\\d+","g");//=>正则表达是中的部分内容是变量存储的值//1.两个斜杠中间包起来的都是元字符（如果正则中要包含某个变量的值，则不能使用字面量方式创建）let type = "zhufeng";reg = /^@"+type+"@$/; console.log(reg.test("@zhufeng@")); //=>falseconso

// let和const声明可以让变量在其作用域上受限于它所使用的块、语句或表达式。// 与var不同的是，这些变量没有被提升，并且有一个所谓的暂时死区(TDZ)。// 试图访问TDZ中的这些变量将引发ReferenceError，因为只有在执行到达声明时才能访问它们。let a = 10; // 全局使用域function foo() { // TDZ 开始 // 创建了未初始化的'a' console.log(a); // ReferenceError 报错 // TDZ结束，'

// 词法作用域就是指作用域是由代码中函数声明的位置来决定的，// 所以词法作用域是静态的作用域，通过它就能够预测代码在执行过程中如何查找标识符。function bar() { var myName = "极客世界" let test1 = 100 if (1) { let myName = "Chrome浏览器" console.log(test) }}function foo() { var myName = "极客邦"

/* * 鸭子类型：长得像鸭子，就想让期具备鸭子的方法 * 类数组「还有类Promise...」结构很像数组，但是不是Array的实例，所以无法直接调用Array.prototype上的方法，而我们期望他可以使用这些方法的，这样就需要函数借用 */// let elements = document.getElementsByTagName('*');// 它是HTMLCollection集合/实例「类数组集合」，不能直接使用数组的办法，如果想使用数据的办法？ // 前提条件：类数组结构和数

function Dog(name) { this.name = name;}Dog.prototype.bark = function () { console.log('wangwang');}Dog.prototype.sayName = function () { console.log('my name is ' + this.name);}/* * 重写内置NEW * Ctor:constructor 想创造谁的实例，就传递哪一个构造函数 Do

var myFish = ["angel", "clown", "mandarin", "sturgeon"];// 从第 2 位开始删除 0 个元素，插入“drum”/* var removed = myFish.splice(2, 0, "drum");console.log(myFish); // [ 'angel', 'clown', 'drum', 'mandarin', 'sturgeon' ] */// 从第 2 位开始删除 0 个元素，插入“drum” 和 "guitar"/*

// URLSearchParams // url Params // 1 可以帮我们将一个对象 转成 url 参数 格式字符串 // 2 将 url参数格式的 字符串 变成 对象 // const data = { // a: 1, // b: 2, // c: 3, // d: 4 // } // // a=1&b=2&c=3&d=4 // // 1 .

子类继承父类的私有属性以及公有属性(es5)<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=

/* * THIS:函数执行的主体（谁执行的函数） * + 事件绑定 * + 函数执行「普通函数执行、成员访问、匿名函数、回调函数...」 * + 构造函数 * + 箭头函数「生成器函数generator」 * + 基于call/apply/bind强制修改this指向 * + ... *///->全局上下文中的this:window//->块级上下文中没有自己的this，所用的this都是继承上级上下文中的this「箭头函数也是」 /* *

代码案例let data = {};let name = "小林";Object.defineProperty(data, "name", { get() { console.log("获取data.name时调用了get方法"); return name; }, // 这里接受一个参数,新赋值的值 set(newValue) { // 这里就可以写重新渲染的代码 console.log(`设置data.name为${newValue}时调用了se

// es6的属性有三种: 静态属性,私有属性,公有属性class Person { // 静态属性/方法的定义 这些静态属性/方法只可以通过类来获取 // 类的实例获取不到 // es7可以直接定义静态属性 // static age = 123; // es6只支持定义静态方法 static age() { return 123; } /* es7定义的私有属性 */ // year = 2021; // 类的私有属性定义的地方 可通过实例获得私有属

注意要在浏览器环境下运行,不要在node环境下运行不然结果会不一样的// 1.// console.log(a, b, c);// var a = 12,// b = 13,// c = 14;// function fn(a) {// console.log(a, b, c);// a = 100;// c = 200;// console.log(a, b, c);// }// b = fn(10);// console.log(a, b, c);

Google图解：Chrome 快是有原因的，科普浏览器架构！图解Chrome：HTML/CSS/JS是如何在浏览器中，渲染成你看到的页面？Google图解：输入 URL 按下 “Enter”，Chrome 干了什么？

/* * 数据类型分类 * 1.原始值类型「俗称：值类型、基本数据类型」 * + number 特殊:NaN(isNaN & Object.is)、Infinity * + string * + boolean * + null * + undefined * + symbol * + 给对象设置唯一值属性「对象属性名的类型：字符串、Symbol」 * + Symbol.hasInstance/to

js实现数组的随机排序利用sort方法let arr = [1, 12, 45, 34, 5, 6]; const randomSort = () => { return Math.random() > 0.5 ? -1 : 1; }; arr.sort(() => randomSort()); console.log("arr", arr);创建一个新的数组，从原数组中随机抽取一个元素插入到新数组中，然后返回新

/* * 闭包应用之：循环中的闭包处理方案 * + 循环事件绑定 * + 自定义属性 * + 闭包的N中方案「含LET处理机制」 * + 事件委托 * + 循环中的定时器 * + 闭包的处理方案 * + 定时器本身处理方案 */// 无法实现？ 每次点击按钮，执行对应的方法，方法中的i不是私有的，而是全局的，而此时全局的i已经是循环结束的5了.../* var btnList = document.querySelectorAll('.

/* * 单例设计模式 *//* let AModule = (function () { let n = 10; const query = () => {}; const sum = () => {}; // 暴露API return { query };})();let BModule = (function () { let n = 20; const sum = () => {};

创建代码// 创建节点class Node { constructor(element) { this.element = element; this.next = null; }}// 创建链表class MyLinkedList { constructor() { // 初始头节点为空 this.head = null; // 链表长度 this.length = 0; } // 获取链表 即获取头指针 getList