JavaScript 学习笔记
关注
分享
扫一扫
主要是归纳日常学习js的收获
林夏天
这个作者很懒，什么都没留下…
展开
-
JS中的异步以及事件轮询机制
1. JS为何是单线程的？ JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。（在JAVA和c#中的异步均是通过多线程实现的，没有循环队列一说，直接在子线程中完成相关的操作） JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有转载 2020-05-21 14:23:13 · 316 阅读 · 0 评论 -
JavaScript 事件
事件是与浏览器或文档交互的瞬间，如点击按钮，填写表格等，它是JS与HTML之间交互的桥梁。（一）事件流DOM是树形结构，如果同时给父子节点都绑定事件时，当触发子节点的时候，这两个事件的发生顺序如何决定? 这就涉及到事件流的概念，它描述的是页面中接受事件的顺序。事件流有两种:事件冒泡(Event Capturing): 是一种从下往上的传播方式。事件最开始由最具体的元素(文档中嵌套层次最深的那个节点接受, 也就是DOM最低层的子节点), 然后逐渐向上传播到最不具体的那个节点，也就是DOM中最高层的父原创 2020-05-21 14:15:22 · 434 阅读 · 0 评论 -
EventBus 实现
实现：class MyEventBus{ constructor() { this.eventQueue = {} } on(eventName, callback) { //订阅 if (!this.eventQueue[eventName]) { this.eventQueue[eventName] = [] } this.eventQueue[eventName].push(callback) } once(eventName, callback) {原创 2020-05-17 17:52:44 · 348 阅读 · 0 评论 -
js中的隐式转换
js中的不同的数据类型之间的比较转换规则如下：1. 对象和布尔值比较对象和布尔值进行比较时，对象先转换为字符串，然后再转换为数字，布尔值直接转换为数字[] == true; //false []转换为字符串'',然后转换为数字0,true转换为数字1，所以为false2. 对象和字符串比较对象和字符串进行比较时，对象转换为字符串，然后两者进行比较。[1,2,3] == '1,2,3' // true [1,2,3]转化为'1,2,3'，然后和'1,2,3'， so结果为true;3.转载 2020-05-13 20:32:07 · 233 阅读 · 0 评论 -
JS 异步编程
教程简介作者: TigerChain地址: https://www.jianshu.com/p/876e68fd6a1c本文出自 TigerChain 简书 手把手教 Vue 系列本节大纲正文js 是一门单线程、非阻塞、异步、并发语言。一、同步和异步1. 同步同步指的是任务是一个接一个的去完成，上一个任务没有完成，下一个任务就不能开始，单线程和多线程都可以实现同步，但是单线程一定是同步的「一个线程只有执行完前面的任务，才能执行后面的」2. 异步异步是一个相对概念，多线程.转载 2020-05-12 13:44:12 · 354 阅读 · 0 评论 -
事件绑定中this指向问题
<!DOCTYPE html><html lang="zh-cmn-Hans"><head> <meta charset="utf-8"> <title>This</title> <style> #container{ width: 100%; ...原创 2020-05-07 16:04:31 · 815 阅读 · 0 评论 -
JS异步操作：概述
目录1. 单线程模型什么是单线程模型JS为什么采用单线程模式单线程模式的优缺点2. 同步任务 和 异步任务3. 任务队列 和 事件循环4. 单线程模型回调函数事件监听发布/订阅5. 单线程模型串行执行并行执行并行和串行的结合本文转载于：异步操作概述（一）单线程模型1. 什么是单线程模型？单线程模型指：JavaScript 只在一个线程上运行。也就...转载 2020-05-05 13:14:22 · 759 阅读 · 0 评论 -
防抖、节流 和 预加载、懒加载
目录1. 防抖 节流2. 预加载3. 懒加载（一）防抖 节流1. 防抖对于短时间内连续触发的事件（如滚动事件），防抖的含义就是让某个时间期限（如上面的1000毫秒）内，事件处理函数只执行一次。**防抖实现思路：**在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms，然后：如果在200ms内没有再次触发滚动事件，那么就执行函数如果在200ms内再次触发滚动事件，...原创 2020-05-03 18:04:18 · 922 阅读 · 0 评论 -
JS 类的创建继承 与 new原理实现
目录1. 类的创建工厂模式构造函数模式原型模式组合模式2. 类的继承原型链继承构造继承实例继承拷贝继承组合继承寄生组合继承3. new 的原理实现学习和参考于：JS定义类的六种方式详解JS实现继承的几种方式JavaScript深入之创建对象的多种方式以及优缺点js new一个对象的过程，实现一个简单的new方法（一）类的创建1. 工厂模式fun...原创 2020-05-03 15:35:27 · 844 阅读 · 0 评论 -
call、apply、bind 原理实现
目录1. call 的模拟实现2. apply 的模拟实现3. bind 的模拟实现4. 三者异同学习并参考于：JavaScript深入之call和apply的模拟实现JS的call,apply与bind详解，及其模拟实现（一）call的模拟实现call 用法 ： MDN Function.prototype.call()call() 方法使用一个指定的 this 值和可...原创 2020-05-03 11:11:53 · 533 阅读 · 0 评论 -
async 、await、Generator 原理实现
目录1. async await2. Generator本文仅是学习：异步编程二三事 | Promise/async/Generator实现原理解析 中一部分知识的学习笔记，（强烈推荐阅读原文）（一）async await在多个回调依赖的场景中，尽管Promise通过链式调用取代了回调嵌套，但过多的链式调用可读性仍然不佳，流程控制也不方便，ES7 提出的async 函数，终于让 J...原创 2020-05-02 19:48:58 · 1220 阅读 · 0 评论 -
Promise 学习笔记
目录1. Promise 基本结构2. Promise 状态和值3. Promise 的 then 方法4. Promise基本实现5. Promise零碎知识学习 Promise 用法 见 ：MDN Promise学习 Promise 底层实现 见：Promise实现原理（附源码） （本文学习并参考的一篇博客，推荐直接阅读）其他推荐：Promise简单实现（一）Promis...原创 2020-05-02 11:48:09 · 1123 阅读 · 0 评论 -
九种跨域方式实现原理
目录1. 同源策略及其限制内容同源策略同源策略限制2. 跨域什么是跨域跨域的常见场景3. 跨域解决方案JSONP 跨域CORS 跨域资源共享Node 中间件代理(两次跨域)nginx 代理跨域websocketpostMessage 跨域window.name + iframe 跨域location.hash + iframe 跨域document.dom...转载 2020-05-01 15:21:56 · 488 阅读 · 0 评论 -
ES6 for...of / 解构赋值 / 扩展、剩余运算符 / reduce()
目录for…in 和 for…of解构赋值扩展运算符(spread)和剩余运算符(rest)reduce()1. for…in 和 for…of（1）for…in是遍历数组、对象的keyindex索引为字符串型数字，不能直接进行几何运算遍历顺序有可能不是按照实际数组的内部顺序使用for in会遍历数组所有的可枚举属性，包括原型。所以for in更适合遍历对象，不要使用fo...原创 2020-03-29 19:51:33 · 891 阅读 · 0 评论 -
ES6 Set和Map对象
1. 目录SetMap2. Set（1）什么是Set对象？Set对象一些元素的集合。可以在其中添加及移除元素。它类似于数组，但又有着很大区别。语法：new Set([iterable]);其中：参数：iterable如果传递一个可迭代对象，它的所有元素将不重复地被添加到新的 Set中。如果不指定此参数或其值为null，则新的 Set为空。返回值：一个新的Set对象。...原创 2020-03-27 16:48:19 · 290 阅读 · 0 评论 -
JavaScript设计模式
JavaScript设计模式**设计模式：**代码经验的总结，是可重用的用于解决软件设计中一般问题的方案。设计模式都是面向对象的。学习设计模式，有助于写出可复用和可维护性高的程序。常用的12种设计模式：工厂模式单例模式原型模式适配器模式代理模式策略模式迭代器模式观察者模式发布-订阅模式命令模式组合模式建造者模式设...原创 2020-03-24 10:47:07 · 6968 阅读 · 0 评论 -
ES6 Proxy 和 Reflect
ES6 Proxy 和 Reflect（一）ReflectReflect是什么？Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。这些方法与proxy handlers的方法相同。Reflect不是一个函数对象，因此它是不可构造的。与大多数全局对象不同，Reflect不是一个构造函数。你不能将其与一个new运算符一起使用，或者将Reflect对象作为一个函数...原创 2020-03-22 14:09:26 · 254 阅读 · 0 评论 -
重新认识JavaScript面向对象: 从ES5到ES6
重新认识JavaScript面向对象: 从ES5到ES6一. 重新认识面向对象1. JavaScript是一门面向对象的语言在说明JavaScript是一个面向对象的语言之前, 我们来探讨一下面向对象的三大基本特征: 封装, 继承, 多态。封装把抽象出来的属性和对方法组合在一起, 且属性值被保护在内部, 只有通过特定的方法进行改变和读取称为封装我们以代码举例, 首先我们构造一个P...转载 2020-03-17 19:13:15 · 219 阅读 · 0 评论 -
JavaScript 字符串
JavaScript字符串JavaScript 字符串用于存储和处理文本。字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号：var carname = "Volvo XC60";var carname = 'Volvo XC60';可以使用索引位置来访问字符串中的每个字符：var character = carname[7];可以在字符串中使用引号，字符串...原创 2020-03-16 09:42:14 · 253 阅读 · 0 评论 -
ES6 class学习笔记
class传统的javascript中只有对象，没有类的概念。它是基于原型的面向对象语言。原型对象特点就是将自身的属性共享给新对象。如果要生成一个对象实例，需要先定义一个构造函数，然后通过new操作符来完成。构造函数示例：//函数名和实例化构造名相同且大写（非强制，但这么写有助于区分构造函数和普通函数）function Person(name,age) { this.name = ...原创 2020-03-16 08:49:04 · 166 阅读 · 0 评论 -
JavaScript深入之执行上下文(例子)
JavaScript深入之执行上下文(例子)var scope = "global scope"; function checkscope(){ var scope = "local scope"; function f(){ return scope; } return f(); } checkscope();...转载 2020-02-10 15:18:49 · 322 阅读 · 0 评论 -
JavaScript深入之作用域链
JavaScript深入之作用域链当JavaScript代码执行一段可执行代码(executable code)时，会创建对应的执行上下文(execution context)。对于每个执行上下文，都有三个重要属性：变量对象(Variable object，VO)作用域链(Scope chain)this今天重点讲讲作用域链。作用域链当查找变量的时候，会先从当前上下文的变量对象...转载 2020-02-10 15:01:42 · 196 阅读 · 0 评论 -
JavaScript深入之变量对象
JavaScript深入之变量对象当 JavaScript 代码执行一段可执行代码(executable code)时，会创建对应的执行上下文(execution context)。对于每个执行上下文，都有三个重要属性：变量对象(Variable object，VO)作用域链(Scope chain)this变量对象变量对象是与执行上下文相关的数据作用域，存储了在上下文中定义的变...转载 2020-02-10 14:39:32 · 151 阅读 · 0 评论 -
JavaScript深入之执行上下文栈
JavaScript深入之执行上下文栈顺序执行？如果要问到 JavaScript 代码执行顺序的话，想必写过 JavaScript 的开发者都会有个直观的印象，那就是顺序执行，毕竟：var foo = function () { console.log('foo1');}foo(); // foo1var foo = function () { consol...转载 2020-02-04 14:12:54 · 238 阅读 · 0 评论 -
JavaScript深入之词法作用域和动态作用域
JavaScript深入之词法作用域和动态作用域作用域作用域是指程序源代码中定义变量的区域。作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限。JavaScript 采用词法作用域(lexical scoping)，也就是静态作用域。静态作用域与动态作用域因为 JavaScript 采用的是词法作用域，函数的作用域在函数定义的时候就决定了。而与词法作用域相对的是动态作用...转载 2020-02-04 13:50:24 · 124 阅读 · 0 评论 -
JavaScript深入之从原型到原型链
JavaScript从原型到原型链构造函数创建对象我们先使用构造函数创建一个对象：function Person() {}var person = new Person();person.name = 'Kevin';console.log(person.name) // Kevin在这个例子中，Person 就是一个构造函数，我们使用 new 创建了一个实例对象 person...转载 2020-02-04 13:18:41 · 294 阅读 · 0 评论 -
JavaScript 中的执行上下文和执行栈
JavaScript 中的执行上下文和执行栈1. 什么是执行上下文？简而言之，执行上下文是评估和执行 JavaScript 代码的环境的抽象概念。每当 Javascript 代码在运行的时候，它都是在执行上下文中运行。执行上下文的类型JavaScript 中有三种执行上下文类型。全局执行上下文(GlobalExectionContext) ： 这是默认或者说基础的上下文，任何不在函数内...转载 2020-02-03 21:59:11 · 242 阅读 · 0 评论 -
JavaScript深入之运行机制
Js运行机制1.基础知识JavaScript 是一门单线程语言，在最新的HTML5 中提出了Web-Worker，但JavaScript 是单线程这一核心仍未改变。Js 作为浏览器脚本语言，它的主要用途是与用户互动，以及操作DOM，因此Js是单线程，也避免了同时操作同一个DOM的矛盾问题；为了利用多核CPU的计算能力，H5的Web Worker实现的“多线程”实际上指的是“多子...转载 2020-02-03 15:51:59 · 168 阅读 · 0 评论 -
JavaScript闭包
（本文是对网上一些关于闭包的资料的小总结，主要参考链接link,对其中坑点例子的代码进行小修正，并加入自己的理解和代码注解，方便读者理解。）闭包定义：闭包就是能够读取其他函数内部变量的函数。清晰地说，闭包就是一个函数，这个函数能够访问其他函数作用域中的变量。function outer() { var a = '变量1' var inner = function () ...原创 2020-01-03 11:30:45 · 269 阅读 · 0 评论