JavaScript
文章平均质量分 83
JS
yleavesw
这个作者很懒,什么都没留下…
展开
-
Object or Function-JS 中的鸡与蛋问题
个人博客 JS 中有一个奇怪的现象: 我们知道,instanceof 关键字是用于判断左值的原型链上是否存在右值,那按照这样的话不就是说 Object 和 Function 存在循环继承了吗? 那 Function 和 Object 的关系到底是什么呢?探究 其实对于所有构造函数/类,其 __proto__ 属性都是指向了一个函数:ƒ () { [native code] },而 Function 的 prototype 属性也指向了这个函数: 而这个 [naitve code]原创 2021-07-03 22:14:27 · 344 阅读 · 1 评论 -
React | Expected an assignment or function call and instead saw.....
记一个 react 程序报的错误:Expected an assignment or function call and instead saw an expression,直译是:需要是一个函数调用或赋值,不过却是一个表达式。 这个错误让我摸不着头脑,反复看代码也没发现哪出问题了,最后在看到这篇文章的时候才发现是哪错了(箭头函数里的括号问题)。这里记录一下来加深印象,也给出现同样问题的朋友们提供一个案例。 其实主要也是自己基础不扎实的问题 在我对箭头函数的印象中:若箭头函数的函数体中只有一原创 2021-05-29 20:02:26 · 9506 阅读 · 2 评论 -
dom 元素拖拽实现
文章目录原生 JS 实现 div 拖拽HTML 拖拽 APIREF 之前找实习的时候,面试官出了道 “原生 JS 实现 div 元素拖拽”,当时实现了个大概,不过很多细节都没写好,刚好最近又看到了相关文章,因此这里再好好整理一下 JS 中的元素拖拽实现。原生 JS 实现 div 拖拽实现效果:演示地址 要实现这样的元素拖拽效果,一般思路是这样的:首先要被拖拽的 div 元素需要是定位元素,因为我们要使用 left 和 top 样式来不断更新 div 的位置设置一个 flag ,当鼠标左键在原创 2021-05-28 21:39:19 · 2694 阅读 · 0 评论 -
JS自动插入分号机制ASI
文章目录问题背景ASI 插入分号的时机1. JS 中一些语法后加上换行符后会自动加上分号2. 并入新行后若成为非法语句则会自动插入分号3. 以自增/减运算符 ++、-- 开头4.特殊情况如何查看自动插入分号后的代码小结REF个人博客文章同步地址问题背景 敲代码的时候写了一条判断语句,大致作用是判断两个长方体是否贴合,因此需要对三个维度分别进行判断:return check(b1.min.x, b2.min.x) && check(b1.max.x, b2.max.x) &a原创 2021-05-28 21:35:39 · 817 阅读 · 0 评论 -
JS深入--词法作用域、执行上下文与闭包
文章目录词法作用域执行上下文与词法环境闭包闭包练习作用域链REF 个人博客文章同步地址词法作用域 JS 使用的是词法作用域(或称为静态作用域),函数的作用域在定义的时候就决定了,与词法作用域相对的是动态作用域,动态作用域会在运行时确定的。 一个《JS权威指南》中的例子:var scope = "global scope";function checkscope(){ var scope = "local scope"; function f(){ retur原创 2021-05-28 21:31:59 · 494 阅读 · 1 评论 -
函数作用域和闭包
文章目录闭包1. 闭包可以访问当前函数以外的变量2. 即使外部函数已结束,闭包仍能访问其中定义的变量3. 闭包可以更新外部变量的值作用域链全局环境非嵌套的函数嵌套的函数多个闭包闭包 引用红皮书 p178 上对闭包的陈述:闭包是指有权访问另一个函数作用域中的变量的函数。 有两个要点:闭包是函数它可以访问另一个函数的作用域中的变量 闭包有几个特点:1. 闭包可以访问当前函数以外的变量function getOuter() { let date = '112'; f原创 2021-01-14 20:47:51 · 697 阅读 · 0 评论 -
原型和原型链
文章目录prototype`__proto__`constructor原型的原型实例与原型链补充constructor`__proto__`属性 “继承” 首先,在 JS 中可以使用类或构造函数来创建一个实例:function Person() {}// orclass Person {}Person.prototype.name = 'Kevin';let p1 = new Person();let p2 = new Person();// p1.name === p2.name =原创 2021-01-08 22:17:08 · 292 阅读 · 0 评论 -
词法作用域和动态作用域
文章目录作用域静态作用域和动态作用域作用域 作用域是指程序源代码中定义变量的区域。 它规定了如何查找变量,也是就确定当前执行代码对变量的访问权限。 JS 采用了词法作用域(lexical scoping),也就是静态作用域。静态作用域和动态作用域 JS 采用的词法作用域是静态作用域,因此函数的作用域在函数定义的时候就决定了。 与静态作用域相对的是动态作用域,函数的作用域是在函数调用的时候才决定的。例如:var value = 1;function foo() { co原创 2021-01-08 22:14:48 · 256 阅读 · 0 评论 -
3.JS内存机制
文章目录变量的存放内存回收垃圾回收算法引用计数标记清除内存泄漏内存泄漏的识别方法1 浏览器方法2 命令行方法四种常见的 JS 内存泄漏1.意外的全局变量2. 被遗忘的计时器或回调函数3. 脱离 DOM 的引用4. 闭包 JS 内存空间分为 栈、堆、池(一般归类为栈中)。其中栈存放变量,堆存放复杂对象,池存放常量,因此也叫常量池。变量的存放 JS 使用了传统的堆栈来保存变量:基本类型:保存在栈内存中,这些类型在内存中有固定的大小,通过按值来访问。基本数据类型一共有 6 种:Undefined、N原创 2021-01-08 22:12:43 · 625 阅读 · 0 评论 -
1.JS 执行上下文和执行栈
文章目录执行上下文的类型全局执行上下文函数执行上下文Eval 函数执行上下文执行栈执行上下文的创建This Binding词法环境(Lexical Environment)变量环境(Variable Environment)执行阶段 执行上下文就是当前 JS 代码被解析和执行时所在的环境的抽象概念,JS 中运行的代码都是在执行上下文中进行的。执行上下文的类型全局执行上下文 默认的执行上下文,一个程序中只有一个全局执行上下文。不在任何函数中的代码都位于全局执行上下文中。它会:1. 创建一个全局对象原创 2021-01-02 16:14:34 · 340 阅读 · 0 评论 -
2.JS执行上下文和变量对象
文章目录执行上下文栈函数上下文变量对象执行过程进入执行上下文代码执行两个例子12 JS 是单线程语言,因此执行顺序是顺序执行,不过 JS 引擎在执行 JS 代码的时候并不是逐行执行,而是一段一段地分析执行,先是编译阶段,然后才是执行阶段。 具体的体现可看例子:例一 变量提升 我们在未定义 foo 之前就使用了它,结果不会报错,而是会为 undefined,随后, foo 会像我们定义的那样先是输出 foo1 ,后输出 foo2。console.log(foo); // undefine原创 2021-01-02 16:13:42 · 233 阅读 · 3 评论 -
JS 知识点杂记
文章目录闭包this 指向函数上下文类上下文箭头函数作为构造函数作为一个 DOM 事件处理函数作为一个内联事件处理函数闭包this 指向函数的调用方式决定了 this 的值(运行时绑定)。ES5 引入了 bind 方法来设置函数的 this 的值,ES2015 引入了箭头函数,箭头函数不提供自身的 this 绑定,this 的值将保持为闭合词法上下文的值。可以使用 globalThis 来获取全局对象,无论代码是否在当前上下文中运行。函数上下文在函数内部,this的值取决于函数被调用的方式。原创 2020-12-15 20:30:55 · 108 阅读 · 0 评论 -
Set、Map、和WeakSet、WeakMap
文章目录集合(Set)Set 实例属性constructorsizeSet 实例方法操作方法遍历方法WeakSet字典 MapMap 的属性constructorsize操作方法遍历方法与其他数据结构的相互转换map 转 arrayarray 转 mapmap 转 object方法 1方法 2方法 3object 转 mapmap 转 JSONJSON 转 mapWeakMap方法集合(Set)Set 是 ES6 新增的数据结构,类似于数组,但其成员是唯一无序的,没有重复的值。Set 对象可根据 it转载 2020-12-15 20:30:02 · 293 阅读 · 0 评论 -
JS 数组
文章目录数组获取数组中的最大、最小值创建多维数组数组去重1.使用 set 去重2.使用 filter 去重3.数组遍历判断两个数组的内容是否相同1. 数组排序 + 转字符串2. 编写 Array.prototype.equals数组获取数组中的最大、最小值let arr = [3, 5, 1, 7, 4];console.log(Math.max(...arr)); // 7console.log(Math.min(...arr)); // 1创建多维数组 以创建 5x5 的二维数组为例:原创 2020-11-27 16:35:22 · 99 阅读 · 0 评论 -
JS 函数
文章目录函数函数也是对象构造器函数构造器函数实例化参数arguments函数中的默认参数展开语法作为函数的默认参数Apply & Callapplycall第一个例子第二个例子apply 和 call 的使用选择apply 的一些妙用Math.max / min + applyarray.pushbind 函数例1函数函数也是对象function bark() { console.log('Woof!');}bark.animal = 'dog'; 上面的代码在 JS 中是可行原创 2020-11-27 16:33:35 · 368 阅读 · 0 评论 -
JS 对象
文章目录对象JS 中,对象的 `key` 都会被转为 `string` 类型。判断对象是否为空1. object.keys()2.将对象转化为json字符串,再判断该字符串是否为"{}"3.for in 循环判断4.Object.getOwnPropertyNames()方法比较对象中的内容是否相同,编写 Object.equals 函数对象的一些方法Object.prototype.hasOwnProperty()Object.defineProperty()Object.entriesObject.as原创 2020-11-27 16:30:12 · 392 阅读 · 0 评论 -
JS中的offsetWidth, clientWidth, scrollWidth, innerWidth, outerWidth, pageXOffset
valuedescriptionoffsetWidth返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)offsetHeight返回元素的高度(包括元素高度、内边距和边框,不包括外边距)clientWidth返回元素的宽度(包括元素宽度、内边距,不包括边框和外边距)clientHeight返回元素的高度(包括元素高度、内边距,不包括边框和外边距...原创 2020-02-13 22:25:30 · 399 阅读 · 0 评论 -
Array.prototype.map() 、 Array.prototype.reduce()、Array.prototype.filter()
文章目录1. map2. reduce3. filter1. map map 函数接收一个回调函数作为参数,然后返回一个数组,这个数组中的每个元素都是调用回调函数后返回的结果。如:function pow(x) { return x * x;}var arr = [1, 2, 3, 4, 5];var results = arr.map(pow); console.log(...原创 2019-11-23 18:50:46 · 228 阅读 · 0 评论 -
箭头函数
箭头函数是一种定义函数的方式,如:x => x * x上面的箭头函数相当于:function (x) { return x * x;}如:var fn = x => x * x;console.log(fn(2)); // 4相当于:var fn = function (x) { return x * x;}还有一种写法可以包含多条语...原创 2019-11-23 17:02:02 · 185 阅读 · 0 评论 -
解构赋值
解构赋值是ES6 中一种灵活的赋值方式。如一次为多个变量同时赋值,其中变量与值需要用 [] 括起来:var [x, y, z] = ['hello', 'JavaScript', 'ES6'];let [x, [y, z]] = ['hello', ['JavaScript', 'ES6']];x; // 'hello'y; // 'JavaScript'z; // 'ES6'...原创 2019-11-23 17:00:25 · 81 阅读 · 0 评论 -
JS中的 generator
JS 中的 generator (生成器)和 Python 中的很相似。 一个generator看上去像一个函数,但可以返回多次。与函数不同的是,generator由function*定义(注意多出的*号),并且,除了return语句,还可以用yield返回多次。比如用 generator 写一个生成斐波那契数列的函数:function* fib(max) { var ...原创 2019-11-23 16:52:32 · 203 阅读 · 0 评论 -
JS 中的 Map,Set 和 iterable
文章目录1. Map2.Set3. Iterable1. Map 初始化 Map。var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);var m = new Map(); // 空Map Map 具有以下方法:m.set('Adam', 67); // 添加新的key-valuem.set('Bob',...原创 2019-11-22 17:04:50 · 178 阅读 · 0 评论 -
Canvas画线
画一条线:var ctx = csv.getContext('2d');ctx.moveTo(50,50);ctx.lineTo(50,150);ctx.strokeStyle='blue';ctx.stroke(); 其中,stroke()方法会实际地绘制出通过 moveTo() 和 lineTo()方法定义的路径。默认颜色是黑色。可以先画线最后再调用 stroke 方法...原创 2019-11-19 15:29:42 · 1103 阅读 · 0 评论 -
方法
JS 包含了一套小型的可用在标准类型上的标准方法集。文章目录一、Arrayarray.concat(item...)array.join(separator)array.pop()array.push(item...)array.reverse()array.shift()array.slice(start,end)array.sort(cmp)array.splice(start,dele...原创 2019-11-10 01:34:02 · 143 阅读 · 0 评论 -
正则表达式
文章目录一、一个例子一、一个例子 先来看一个正则表达式的例子:语法:/pattern/modifiers;var parse_url = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^#]*))?(?:\?([^#]*))?(?:#(.*))?$/;var url = 'http://www.ora.c...原创 2019-11-04 17:42:27 · 390 阅读 · 0 评论 -
数组
文章目录一、数组字面量 数组是一段线性分配的内存,它通过整数计算偏移并访问其中的元素。不过,JavaScript 中没有像此类数组一样的数据结构。 作为替代,JavaScript 提供了一种拥有一些类数组(array-like)特性的对象。一、数组字面量...原创 2019-11-02 00:21:02 · 109 阅读 · 0 评论 -
继承
文章目录伪类(Pseudoclassical)对象说明符(Object Specifiers)原型(Prototype) 在基于类的语言中,对象是类的实例,并且类可以从另一个类继承。JavaScript 是一门基于原型的语言,这意味着对象直接从其他对象继承。伪类(Pseudoclassical) JavaScript 原型机制存在诸多矛盾。它不直接让对象从其他对象继承,反而插入了一个多余...原创 2019-10-06 00:08:11 · 215 阅读 · 0 评论 -
JS知识碎片
文章目录1.JS 中的 replace() 方法1.JS 中的 replace() 方法定义和用法replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。语法stringObject.replace(regexp/substr,replacement)参数描述regexp/substr必需。规定子字符串或要替换的模式的...原创 2019-09-28 17:21:39 · 234 阅读 · 0 评论 -
函数
文章目录函数对象函数字面量调用方法调用模式函数调用模式构造器调用模式Apply 调用模式参数返回扩充类型的功能函数对象 JavaScript 中的函数就是对象。 每个函数在创建时也随配有一个 prototype 属性。它的值是一个拥有 constructor 属性且值即为该函数的对象。 因为函数是对象,所以它们可以像任何其他的值一样被使用。函数可以保存在变量、对象和数组中。函数可以被...原创 2019-10-05 01:09:57 · 265 阅读 · 0 评论 -
对象
文章目录对象字面量检索更新引用原型反射枚举 JavaScript 的简单数据类型包括数字、字符串、布尔值、null 值和 undefined 值。其他所有的值都是对象。 JavaScript 中的对象是可变的键控集合。对象字面量 对象字面量提供了一种非常方便地创建对象值的表示法。一个字面量就是包围在一对花括号中的零个或多个 ‘键/值’ 对。 var stooge = { '...原创 2019-09-16 20:04:30 · 200 阅读 · 0 评论