- 博客(56)
- 收藏
- 关注
RSS订阅原创 JavaScript 的严格模式
JavaScript 的严格模式是使用受限制的 JavaScript 的一种方式，从而隐式地退出“草率模式”。对严格模式大多数需要注意的是他带来的一些语法上的改变，特别是有些写法，在之前是不会报错的，开启严格模式后就会报错，如果没有进行错误处理，就会导致程序的中断。非严格模式下的 eval 作用域是其本身所在的作用域，而严格模式下，eval 执行过程中会创建一个新的作用域，并在结束后销毁。number = 1;在非严格模式下，函数的 arguments 可以被重新赋值，在严格模式下，做赋值操作会报错。
2024-07-07 00:15:28
1453
原创 JavaScript this
这里 thisTest 方法输出的 username 就会是个 undefined，因为他的 this 指向的是 window，因为他不属于 object 对象的一个方法，所以 this 就指向了 window。number1 和 number2 都是 object 变量的属性，但却可以被 sum 方法中的 this 访问到，所以在原型链的方法中，this 指向的就是调用该方法的对象。say函数作为对象下的方法，在被调用后，其 this 指向的是他所在的对象，在这里就是 person 对象。
2024-07-07 00:12:22
502
原创 JavaScript instanceof
instanceof 可以用来检测对象和构造函数之间的关系，其检测的原理是左操作数的原型上是否有右操作数的 prototype 属性，所以要注意一些检测的特殊情况。使用的时候要注意这个问题，如判断某个对象的原型链上是否有 Object.prototype 的时候，要考虑到一些其他对象。instanceof 是另一种检测类型的手段，但通常用于检测对象之间的关系，如某个对象是不是由某个构造函数生成的。数组的原型链上也是有 Object.prototype 的，所以做一些检测的时候要考虑一些特殊情况。
2024-07-07 00:10:51
430
原创 new 运算符与构造函数
构造函数用于生成对象，理解构造函数和原型机制非常重要，不但是面试中的高频题，也可以提升编写高质量、可复用的代码的能力。任何函数都能被 new 运算符调用，但是一般会从设计上将一个函数考虑为构造函数，提供给 new 运算符调用。有其他面向对象语言开发经验的同学可能会觉得使用 new 运算符的语法和创建类的示例很像，其实本质是不一样的。使用 new 运算符调用函数的时，背后有一套运行机制，这套机制说明了构造函数是怎么产生对象的。当一个函数被 new 运算符调用的时候，这个函数就会被称为构造函数。
2024-07-07 00:09:29
320
原创 DOM 和 JavaScript 的关系
但是在 Web 开发中，页面内容的展示全部通过浏览器解析展现，JavaScript 想动态的修改页面，就必须由浏览器提供一些方法，交给开发者来操作页面上的元素，因为 JavaScript 本身是没有操作这些元素的能力的。JavaScript 和 DOM 本身是可以没有关系的，但是开发者需要操作 DOM ，浏览器实现了对应的方法，暴露给开发者，开发者使用 JavaScript 来调用以达到操作 DOM 的目的。DOM 有自己的一套标准，JavaScript 也有自己的一套标准。
2024-06-30 10:31:07
431
原创 JavaScript 原型
利用原型，可以很好的复用一些代码，虽然在 JavaScript 中没有类，但是我们可以利用原型这个特性来模拟类的实现，达到继承、多态、封装的效果，实现代码逻辑的复用，同时可以更好的组织代码结构。JavaScript 中采用的是原型的机制，很多文献会称其为 原型代理，但个人认为对于初学者使用 原型继承 的方式会更好理解一点，日常讨论中其实是一个意思，不需要过多纠正其说法。这就是属性查找的机制，直到查到原型的末端，也就是 null ，就会停止查找，这个时候已经确定没有这个属性了，就会返回 undefined。
2024-06-28 16:23:19
635
原创 debugger 语句
如果浏览器支持 debugger，那碰到 debugger 就会暂停程序的执行，提供调试功能，如单步调试、跳出当前函数、结束调试等。debugger 语句调用任何可用的调试功能，例如设置断点。在源码的对应行号出点击，即可设置上断点，如果是已经执行过的代码，则需要刷新才会在断点处暂停程序。假设对其他网站的某个实现细节很感兴趣，但又不能直接窥探出原理，也可以借助断点来进行调试。这种情况下需要在 开发者工具 的 Sources 面板找到对应的源码，打上断点。debugger 用于设置断点，调试非常有用。
2024-06-24 23:05:04
362
原创 delete 操作符
JavaScript 中的关键字与其他语言略有不同，如 C++ 中的 delete 关键字会释放内存，JavaScript中不会，只有当一个值的引用归零时，才会被释放。这里的 number 是 window下的一个属性，可以使用 Object.getOwnPropertyDescriptor 来查看属性的描述符。使用 var 声明的变量默认是不可配置的，所以对 var 声明的变量进行 delete 操作是无效的。delete 可以用于删除数组成员，并且是真正意义的删除，可以让指定的成员变成 empty。
2024-06-24 23:04:32
306
原创 JavaScript三元
表达式A后面跟着一个冒号（:），如果条件为 falsy ，则冒号后面的表达式B将会执行。在开发中经常会遇到这样的代码，有多年开发经验的老司机也可能会这样写，但其实这里没有必要使用三元运算符，因为 age >= 18 这里的比较运算符返回的就是布尔值。'买桃子' : '买西瓜' : '没有卖水果的';当条件成立或者不成立的时候，会执行对应的表达式，并将表达式的结果作为三元运算的结果。三元运算符可以代替简单的 if 语句，但尽量不要嵌套使用，这样会降低代码的可读性。'成年了' : '没有成年';
2024-06-24 23:03:14
418
原创 什么是 DOM
它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。实际上 HTML 只是一个带有格式的文本，经过浏览器解析后，会变成一颗树（因为 HTML 也是树形的），通常会叫他 DOM树 ，根节点叫 文档节点(document) ，树上的每个节点就叫 DOM节点。其实具有id属性的dom节点不需要获取，也可以直接通过JavaScript访问，如id为container的元素，就可以直接在JavaScript中使用container访问。
2024-06-24 23:02:59
333
原创 void 运算符
void 运算符 对给定的表达式进行求值，然后返回 undefined。(MDN)表达式前面如果带有void关键字，则表达式的结果就会被忽略，并将undefined作为结果。从业务上来看，void 关键字并不常用。
2024-06-24 23:02:17
454
原创 逗号操作符
逗号操作符 对它的每个操作数求值（从左到右），并返回最后一个操作数的值。(MDN)逗号操作符会依此从左到右执行逗号分隔的表达式，并把最后一个表达式的运算结果作为最终结果。代码块预览复制逗号操作符使用场景很有限，通常会用在for循环中，同时压缩代码也会用到大量的逗号表达式。
2024-06-24 23:01:26
376
原创 JavaScript 异常处理
完整的产品业务逻辑流程，基本都要 try ... catch 参与控制，因为出现异常时，还要有对应的动作，如网络请求异常，则提示用户重试，或主动进行超时重新请求操作。try ... catch 可以用于捕获异常，当出现 throw 时，会结束 try 内的代码执行，直接进入到 catch，执行 catch 内的代码块。但 ES2019 中有一个提案，可以选择性的提供给 catch 参数，所以最新的 chrome 不传递错误参数也是可以的。catch 语句标记要尝试的语句块，并指定一个出现异常时抛出的响应。
2024-06-22 23:06:54
407
原创 Asynchronous JavaScript + XML（异步JavaScript和XML）
Asynchronous JavaScript + XML（异步JavaScript和XML）, 其本身不是一种新技术，而是一个在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法。(MDN)AJAX 是2005年提出的一种术语，并不代表某个特定的技术。其译名描述出了核心，就是使用JavaScript发送异步 HTTP 请求，这样就摆脱了想要和服务端交互，必须刷新页面的痛点。
2024-06-22 23:06:07
549
原创 BOM 常用属性和方法
window 下还有类似 parseInt、parseFloat 这样的数学相关的方法，但目前 ES6 标准将他们挪动到了 Number 下，也就是说可以通过 Number.parseInt 来调用，放到了本该属于他们的地方，但项目中如果要使用，推荐使用 shim 或者 polyfill，不然部分浏览器可能不支持。存储的数据将保存在浏览器会话中。其中 要做的事情 可以是个函数，也可以是个字符串，但几乎没有使用字符串的场景，也不推荐使用字符串，原因可以参考 eval 相关内容。")', 2000);
2024-06-22 23:05:25
327
原创 常用的 BOM 相关对象
LocationNavigatorScreenHistory其他的还有一些辅助方法，如alertconfirm。这些内容都可以通过 window 对象进行访问。这些对象在访问时开头是小写的！
2024-06-22 23:04:52
1765
原创 BOM window 对象
BOM 即浏览器对象模型（browser object model），其提供了一系列接口供开发者使用JavaScript与浏览器窗口进行交互。BOM 不像 ECMAScript 和 DOM 有一套自己的标准，BOM 是没有公共组织制定标准的。神奇的是所有现代浏览器在 BOM 的相关内容上几乎一致，所以 BOM 也足够通用，所有浏览器的实现几乎一致。
2024-06-22 23:04:20
649
原创 JavaScript 进行表单验证
本篇主要介绍使用 JavaScript 进行表单验证。表单验证并不是 JavaScript 提供的某种特性，而是结合各种特性达到的一种目的，是需求的产物。所有线上产品的表单几乎都有验证，如注册时要求“用户名 6-16 位”，验证会由 JavaScript 来完成，通常为了安全性和准确性，服务端会再次做一遍验证。
2024-06-22 23:03:24
882
原创 自定义事件
alert('现在输入框内容是：' + e.detail.value + '，触发的键是：' + e.detail.keyCode);使用 new Event 可以创建一个自定义事件，事件名就是构造函数的第一个参数 afterclick，表示点击事件完成后做的事情。自定义的事件有许多的创建方式，但实际的业务场景中几乎不会被用到，网络上的文献记载其具体的使用场景也相对较少。随后再给按钮绑定点击事件，在事件末尾，即事情做完后，使用 dispatchEvent 触发这个自定义事件。
2024-06-22 23:02:12
338
原创 事件相关的优化
事件委托非常适合列表相关的事件处理，假设有成千上万条的列表，这个时候每个列表的操作按钮都要绑定事件，这个消耗是非常巨大的，当列表增减还需要考虑给新列表绑定事件，给删除的列表注销事件，这个时候使用事件委托，只需要在列表之外的一个节点上绑定一个事件，其好处不言而喻。当事件流到达捕获阶段后，则开始向上冒泡，进入冒泡阶段，在冒泡阶段会执行绑定在 .list 上的点击事件，在事件中对事件对象的 target 进行判定，如何条件就会执行真正想做的事情，这就是一个事件委托的流程。
2024-06-22 23:01:34
408
原创 DOM 事件流
addEventListener 的第三个参数用来决定事件在冒泡阶段触发还是在捕获阶段触发，其为一个布尔值，传递 false 则事件会在冒泡阶段触发，传递 true 则会在捕获阶段触发。前面的章节有提到过 0级DOM事件 ，其提供的绑定事件的方式是不能指定事件触发的阶段的，其原因是在那个阶段下，还没有现在制定的 DOM 事件流。根据默认浏览器事件是在冒泡阶段触发的规则，上述例子会先触发子节点 .ele2 的事件，再触发 .ele1 的事件。但是事件流的概念依然重要，因为很多时候要阻止事件冒泡。
2024-06-22 01:32:46
424
原创 DOM 事件对象
onkeydown 和 onkeyup 是键盘相关的事件，所以可以获取到按下的键是哪个，对应的就是事件对象下的 keyCode 属性。上述例子，在点击按钮的时候，虽然完成了删除操作，但还是会弹出一个框，触发到了父级的事件，这是冒泡特性导致的，所以需要阻止向上冒泡，事件对象会在事件被触发时获得，对象包含了当前事件的一些信息，如点击事件可以获取到点击的位置，键盘输入事件可以获取到按下的键。具体可以参阅 映射表。<a href="https://imooc.com">冲鸭！
2024-06-22 01:28:38
720
原创 DOM 事件对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。(W3C)事件对象会在事件被触发时获得，对象包含了当前事件的一些信息，如点击事件可以获取到点击的位置，键盘输入事件可以获取到按下的键。
2024-06-22 01:26:01
895
原创 DOM 事件绑定
事实上 DOM 0级事件并不是标准中的，在 W3C 制定 DOM 标准前，部分浏览器已经有了 DOM 模型，也有自己相应的事件，这些出现在标准第一个版本之前的，就被称为了 DOM 0。这 4 级内容中， 没有提供事件相关的内容，所以不会拿来讨论，因此 DOM 事件就被分为了常说的 DOM 0级事件、DOM 2级事件、DOM 3级事件。使用 removeEventListener 去除事件，需要传递指定的事件，且事件处理器必须与绑定事件传入的一样，为同一个。
2024-06-22 01:24:00
795
原创 JavaScript 与 DOM 事件
事件可以表示从基本用户交互到渲染模型中发生的事件的自动通知的所有内容。onclick 属性是一种事件处理器属性，表示单击或点击事件，当想指定按钮在被点击的时候要做的事情时，就可以给这个属性赋值。DOM 事件是由 DOM 标准预先定义好的接口，由 JavaScript 提供事件处理器，来决定当事件被触发时要做的事情。赋值的函数通常被称为事件处理器，即事件被触发时候时候执行的代码块，部分文献中会称为事件处理程序。通常给 DOM 节点设置事件的操作，会被称为绑定事件，上述例子就是给一个按钮绑定了点击事件。
2024-06-22 01:21:53
371
原创 获取和操作 DOM 节点
获取和操作 DOM 节点DOM 节点也会被称为 DOM 元素。想要操作 DOM 节点，就必须先获取到 DOM 节点。1. 获取 DOM 节点获取 DOM 节点的方式有很多，这里例举几个常用的，所有的 DOM 元素都具有以下方法：返回对拥有指定 id 的第一个对象的引用。element.getElementById 是指去 element 节点下根据 id 查找子节点。通常在程序开始前，没有主动去获取过节点，这个时候会使用根节点 document 来进行查找。实例演示预览复制。
2024-06-22 01:19:26
2132
原创 DOM 和 JavaScript 的关系
但是在 Web 开发中，页面内容的展示全部通过浏览器解析展现，JavaScript 想动态的修改页面，就必须由浏览器提供一些方法，交给开发者来操作页面上的元素，因为 JavaScript 本身是没有操作这些元素的能力的。JavaScript 和 DOM 本身是可以没有关系的，但是开发者需要操作 DOM ，浏览器实现了对应的方法，暴露给开发者，开发者使用 JavaScript 来调用以达到操作 DOM 的目的。DOM 有自己的一套标准，JavaScript 也有自己的一套标准。
2024-06-22 01:15:56
459
原创 JavaScript JSON
JSON 对象包含两个方法: 用于解析 JavaScript Object Notation (JSON) 的 parse() 方法，以及将对象/值转换为 JSON字符串的 stringify() 方法。除了这两个方法, JSON 这个对象本身并没有其他作用，也不能被调用或者作为构造函数调用。JavaScript 内置的JSON对象用于处理JSON。JSON（JavaScript Object Notation）是一种带有格式的文本，JavaScript 中的JSON对象用于处理这种文本。
2024-06-20 22:44:38
652
原创 JavaScript RegExp
正则表达式不是 JavaScript 的一个子内容，也并非 JavaScript 独有，需要学习正则表达式可以查阅相对应的文献。正则表达式字面量需要使用 / 包裹，通常字面量会用于写死固定的正则表达式，如果需要动态生成，都会使用构造函数的方式。如果不想传递字面量，也可以传递一个正则表达式字符串，这个时候不需要使用 / 包裹，而字面量是需要 / 包裹的。多行匹配模式下，开头和末尾就不是整个字符串的开头和末尾了，而是一行的开头和末尾。
2024-06-20 18:22:06
297
原创 JavaScript Date
解析一个表示某个日期的字符串，并返回从1970-1-1 00:00:00 UTC 到该日期对象（该日期对象的 UTC 时间）的毫秒数，如果该字符串无法识别，或者一些情况下，包含了不合法的日期数值（如：2015-02-31），则返回值为NaN。Date 对象可以提供 4 种类型的参数，通过参数决定时间，最后对象的实例的操作都围绕这个决定的时间。根据本地时间，返回一个指定的日期对象的月份，为基于 0 的值（0 表示一年中的第一月）。根据本地时间，返回一个指定的日期对象为一个月中的哪一日（从 1–31）。
2024-06-20 18:21:13
453
原创 JavaScript Math
Math 对象包含了很多数学方法与常量，较常用的是用于产生伪随机数的 Math.random，根据特性可以推出随机数 [下限, 上限] 的生成公式 Math.floor(Math.random() * 上限 + 下限);事实上 Math.random() 产生的随机数并不是真正的随机数，其返回的“随机数”是由一个确定的算法得出的，这种随机数会称之为伪随机数。所以就可以把随机数的结果先放大 100 倍，即 Math.random() * 100 ，这时候产生的数，区间就是 [0, 100)。
2024-06-20 18:20:37
552
原创 JavaScript 函数
执行上述代码，可以看到在控制台输出了一个对象，存放的就是所有传递过去的参数，利用这一特性，就可以不限制参数个数，或者让函数做中转站（拦截函数），利用 arguments 将参数传递给另一个函数。分析：根据圆面积公式 S=π·r·r，其中 S 就是要求的值，即函数的返回值，π 是常量(固定的一个值)，半径r是未知数，所以r就可以设计成参数。函数可以用于封装代码，提供代码的复用率和可读性，在大部分情况下，当两段代码具有超高相似度时，应当设计成函数，不同的部分使用参数进行区分。
2024-06-20 18:15:38
702
原创 JavaScript Function
这个例子在执行后，依次输出了 10 ，20 ，根据结果可以知道 new Function 创建的函数，在执行过程中，上层作用域是顶级的全局作用域，在浏览器下即为 window。开发者通常不会通过内建对象 Function 来创建函数，更多的是利用 Function 的特性来动态执行代码。Function 可以用来创建函数，JavaScript 中的所有函数，都是 Function对象。使用 Function 创建的函数，最后一个参数，即函数体内在执行的时候作用域是在全局的。
2024-06-20 18:14:24
300
原创 document.cookie
通过 document.cookie 获取到的 cookie 由 cookie 的名称和值组成，由等号=分隔，并且可以有多条，每条 cookie 之间用分号 ‘;如果需要设置多条 cookie ，则再次给 document.cookie 赋一个新值即可，但如果是相同名称的 cookie ，值就会被覆盖。看起来是可以设置多条 cookie 一样，其实只有第一对值才是 cookie 的值，后面跟的都是这条 cookie 的属性。每次只能设置一条 cookie ，但可以同时设置这条 cookie的属性。
2024-06-20 17:41:18
644
原创 JavaScript with
在 with 语句中，访问变量会先去看这个变量是不是在给定的对象中作为属性存在，如果存在，则取对象中属性的值，否则继续往上层找。使用 with 常见的遇到问题的情况，都是恰巧污染了上层作用域，又恰巧污染的是同名的变量，这也产生的 bug 定位也相对困难。事实上很少有前端开发者会使用 with，在很长篇幅的代码中，with 会让代码逻辑变得不清晰，需要反复确认作用域。可以看到，with 代码块内输出的变量，实际上是 person 对象的属性。// 输出："小明"
2024-06-20 17:40:04
314
原创 JavaScript 的 break 与 continue
当然不使用 break 也是可以的，可以在达到条件后，将 time 变量累加到一个循环条件不成立的情况，也会跳出循环，但是建议使用 break ，否则可能还要去控制 break 之后的逻辑，因为 break 之后不一定就是循环结束了，也许还有其他操作。许多代码规范不提倡使用 continue ，因为开发者水平的参差不齐，常有开发者在使用 continue 的时候，让整体逻辑产生了跳跃性，这不利于未来的代码维护者来对代码做阅读理解。当循环中碰到 continue ，则会跳过这次循环，进入下一次循环。
2024-06-20 17:35:05
419
原创 JavaScript while 语句
while 的语法相对简单，其使用的频率没有for循环高，可以使用 for 循环完成的都可以使用 while 循环完成，反之亦然。for 循环将初始操作、循环条件、条件判断后要做的事情放在了规定的位置，而 while 循环只是将这些操作换个地方写而已。可以使用 while 语句实现的需求，都可以使用 for 语句实现，但 while 更适合复杂循环条件的场景。while 循环接收一个表达式，当这个表达式结果非 false 的时候，就会执行 while 循环的代码块。console.log('我停不下来了!
2024-06-20 08:12:33
302
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人