JavaScript学习笔记(三十四)DOM(一)
文档对象模型时HTML和XML文档的编程接口。
DOM表示由多层节点构成的文档,通过它开发者可以添加、删除和修改页面的各个部分。
节点层级
任何HTML或XML都可以用DOM表示一个由节点构成的层级结构。
12345678<html> <head> <title>Sample Page</title> </head> <body> <p>Hello World!</p> </body> </html>
其中, document节点表示每个文档的根节点。在这里,根节点的唯一子节点是<html>元素,我们称之为文档元素( documentElement)。文档元素是文档最外层的元素,所有其他元素都存在于这个元素之内。每个文档只能有一个文档元素。在HTML页面中,文档元素始终是<html>元素。在XML文档中,则没有这样预定义的元素,任何元素都可能成为文档元素。
Node类型 ...
JavaScript学习笔记(三十三)BOM(二)
location对象
location对象提供了当前窗口中加载文档的信息,以及通常的导航功能。
它既是window的属性,也是document的属性。
location对象不仅保存着当前加载文档的信息,也保存着把URL解析为离散片段后能够通过属性访问的信息。
假设当前浏览器加载的URL是:http://foouser:barpassword@www.wrox.com:80/WileyCDA/?q= javascript#contents
location对象的内容如下:
查询字符串
虽然location.search 返回了从问号开始直到URL末尾的所有内容,但没有办法逐个访问每个查询参数。
123456789101112131415161718/*这个函数首先删除了查询字符串开头的问号,当然前提是location.search必须有内容。解析后的参数将被保存到args对象,这个对象以字面量形式创建。接着,先把查询字符串按照s分割成数组,每个元素的形式为name=value。for循环迭代这个数组,将每一个元素按照=分割成数组,这个数组第一项是参数名,第二项是参数值。参数名和参 ...
JavaScript学习笔记(三十二)BOM(一)
BOM的核心是window对象,表示浏览器的实例。
window对象在浏览器中有两重身份:
ECMAScript中的Global对象;
浏览器窗口的JavaScript接口。
Global作用域
window对象被复用为ECMAScript的Global对象;
通过var声明的所有全局变量和函数都会变成window对象的属性和方法。
使用let 或const替代var,则不会把变量添加给全局对象。
1234567891011var age = 29; var sayAge = () => alert(this.age); alert(window.age); // 29 sayAge(); // 29 window.sayAge(); // 29 //=========================let age = 29; const sayAge = () => alert(this.age); alert(window.age); // undefined sayAge(); // undefined window.sayAge(); // TypeErr ...
JavaScript学习笔记(三十一)异步函数(二)
异步函数策略1、实现sleep()函数12345678910async function sleep(delay) { return new Promise((resolve) => setTimeout(resolve, delay)); } async function foo() { const t0 = Date.now(); await sleep(1500); // 暂停约 1500 毫秒 console.log(Date.now() - t0); } foo(); // 1502
2、利用平行执行我们来看下面这个例子:
12345678910111213141516171819202122async function randomDelay(id) { // 延迟 0~1000 毫秒 const delay = Math.random() * 1000; return new Promise((resolve) => setTimeout(() => ...
JavaScript学习笔记(三十)异步函数(一)
异步函数,也称为“async/await”(语法关键字)。
ES8的async/await旨在解决利用异步结构组织代码的问题。
异步函数1、async
async关键字用于声明异步函数。这个关键字可以用在函数声明、函数表达式、箭头函数和方法上。
123456async function foo() {} let bar = async function() {}; let baz = async () => {}; class Qux { async qux() {} }
使用async关键字可以让函数具有异步特征,但总体上其代码仍然是同步求值的。
在参数或闭包方面,异步函数仍然具有普通JavaScript函数的正常行为。
1234567async function foo() { console.log(1); }foo(); console.log(2); // 1 // 2
异步函数如果使用return关键字返回了值(如 ...
JavaScript学习笔记(二十九)期约(三)
期约连锁与期约合成
期约连锁与期约合成主要用于将多个期约组合在一起进而构成强大的代码逻辑。
前者是一个期约接一个期约地拼接,后者则是将多个期约组合为一个期约。
期约连锁
简单理解,期约连锁是由期约的连缀方法构成的。
期约连锁的原理是:每个期约实例的方法都会返回一个新的期约对象,而这个新期约又有自己的实例方法。
1234567891011let p = new Promise((resolve, reject) => { console.log('first'); resolve(); }); p.then(() => console.log('second')) .then(() => console.log('third')) .then(() => console.log('fourth')); // first // second // third // fourth
以上实例代码实现了一连串同步任务,实际上使用4个同步函数也可以 ...
JavaScript学习笔记(二十八)期约(二)
期约的实例方法
期约实例的方法是连接外部同步代码与内部异步代码之间的桥梁。
这些方法可以访问异步操作返回的数据,处理期约成功和失败的结果,连续对期约求值,或者添加只有期约进入终止状态时才会执行的代码。
1、实现Thenable接口
then()方法被认为实现了Thenable接口:
123class MyThenable { then() {} }
2、Promise.prototype.then()
Promise.prototype.then()是为期约实例添加处理程序的主要方法。
接收最多两个参数:onResolved处理程序和onRejected处理程序。
这两个参数都是可选的,如果提供的话,则会在期约分别进入“兑现”和“拒绝”状态时执行。
123456789101112131415function onResolved(id) { setTimeout(console.log, 0, id, 'resolved');} function onRejected(id) ...
JavaScript学习笔记(二十七)期约(一)
JavaScript时单线程事件循环模型,同步操作与异步操作时代码依赖的核心机制。
同步与异步
同步行为对应内存中顺序执行的处理器指令。
每条指令都会严格按照它们出现的顺序来执行,而每条指令执行后也能立即获得存储在系统本地(如寄存器或系统内存)的信息。
异步行为类似于系统中断,即当前进程外部的实体可以触发代码执行。
期约基础
可以通过new操作符来实例化Promise。
创建期约时需要传入执行器函数作为参数。
12let p = new Promise(() => {}); setTimeout(console.log, 0, p); // Promise <pending>
期约状态机
期约是一个有状态的对象,包括下面三种状态之一:
pending:待定
fulfilled/resolved:兑现/解决
rejected:拒绝
待定(pending)是期约的最初始状态。在待定状态下,期约可以落定(settled)为代表成功的兑现(fulfilled)状态,或者代表失败的拒绝(rejected)状态。
无论落定为哪种状态都是不可逆 ...
JavaScript学习笔记(二十六)函数(六)
立即调用的函数表达式
立即调用的匿名函数又被称作立即调用的函数表达式。
12345678910(function() { // 块级作用域 })(); //======================(function () { for (var i = 0; i < count; i++) { console.log(i); } })(); console.log(i);
私有变量
严格来讲,JavaScript 没有私有成员的概念,所有对象属性都公有的。
任何定义在函数或块中的变量,都可以认为是私有的,因为在这个函数或块的外部无法访问其中的变量。
私有变量包括函数参数、局部变量,以及函数内部定义的其他函数。
特权方法( privileged method )是能够访问函数私有变量(及私有函数)的公有方法。
在对象上有两种方式创建特权方法。第一种是在构造函数中实现。
123456789101112function MyObject() { // 私有变量和私有函数 let pri ...
JavaScript学习笔记(二十五)函数(五)闭包
闭包指的是那些引用了另一个函数作用域中变量的函数。
在调用一个函数时,会为这个函数调用创建一个执行上下文,并创建一个作用域链。然后用arguments和其他命名参数来初始化这个函数的活动对象。外部函数的活动对象是内部函数作用域链上的第二个对像。这个作用域链一直向外串起了所有包含函数的活动对象,直到全局执行上下文才终止。
this对象
如果内部函数没有使用箭头函数定义,则this对象会在运行时绑定到执行函数的上下文。
在全局函数中调用,则this在非严格模式下等于window,严格模式下等于underfined。
函数在被调用时都会自动创建两个特殊变量: this 和arguments。内部函数永远不可能直接访问外部函数的这两个变量。
12345678910111213141516171819202122window.identity = 'The Window'; let object = { identity: 'My Object', getIdentityFunc() { retur ...