JavaScript高级程序设计
文章平均质量分 84
史学娇
这个作者很懒,什么都没留下…
展开
-
第7章 函数表达式
函数表达式原创 2022-07-07 18:04:31 · 202 阅读 · 0 评论 -
第12章 事件
JavaScript 与 HTML 之间的交互是通过事件实现的。13.1 事件流事件流描述的是从页面中接收事件的顺序。13.1.1 事件冒泡IE 的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档)。<!DOCTYPE html> <html> <head> <title>Event Bubbling Example&l原创 2022-01-19 17:38:59 · 84 阅读 · 0 评论 -
第11章 DOM(二)
1 DOM 操作技术1.1 动态脚本动态加载的外部 JavaScript 文件能够立即运行<script type="text/javascript" src="client.js"></script>//整个过程可以使用下面的函数来封装function loadScript(url){ var script = document.createElement("script"); script.type = "text/javascript"; scr原创 2022-01-18 20:11:31 · 514 阅读 · 0 评论 -
第10章 DOM(一)
DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。DOM 描绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。10.1 节点层次<html> <head> <title>Sample Page</title> </head> <body> <p>Hello World!</p> </body> <原创 2022-01-12 11:19:22 · 370 阅读 · 0 评论 -
第九章 客户端检测
先设计最通用的方案,然后再使用特定于浏览器的技术增强该方案。9.1 能力检测能力检测的目标不是识别特定的浏览器,而是识别浏览器的能力。function getElement(id){ if (document.getElementById){//先检测达成目的的最常用的特性 return document.getElementById(id); } else if (document.all){ return document.all[id]; } else { th原创 2022-01-11 18:07:12 · 289 阅读 · 0 评论 -
第8章 BOM
window 对象原创 2022-01-05 17:58:38 · 530 阅读 · 0 评论 -
第39章 数值的扩展
二进制和八进制表示法ES6 提供了二进制和八进制数值的新的写法,分别用前缀0b(或0B)和0o(或0O)表示。如果要将0b和0o前缀的字符串数值转为十进制,要使用Number方法。0b111110111 === 503 // true0o767 === 503 // trueNumber('0b111') // 7Number('0o10') // 8数值分隔符欧美语言中,较长的数值允许每三位添加一个分隔符(通常是一个逗号),增加数值的可读性。比如,1000可以写作1,000。原创 2021-12-29 15:54:35 · 454 阅读 · 0 评论 -
第38章 Module 的加载实现
浏览器加载传统方法HTML 网页中,浏览器通过<script>标签加载 JavaScript 脚本。默认情况下,浏览器是同步加载 JavaScript 脚本,即渲染引擎遇到<script>标签就会停下来,等到执行完脚本,再继续向下渲染。如果是外部脚本,还必须加入脚本下载的时间。<!-- 页面内嵌的脚本 --><script type="application/javascript"> // module code</script&g原创 2021-12-28 16:43:31 · 301 阅读 · 0 评论 -
第37章 Module 的语法
概述ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJS 和 AMD 模块,都只能在运行时确定这些东西。// CommonJS模块:CommonJS 模块就是对象,输入时必须查找对象属性。let { stat, exists, readfile } = require('fs');// 等同于let _fs = require('fs');//整体加载fs模块(即加载fs的所有方法),生成一个对象(_fs),然后再从这个对象上面读取原创 2021-12-24 17:01:40 · 216 阅读 · 0 评论 -
第36章 Class 的继承
简介Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,加上子类自己的实例属性和方法。如果不调用super方法,子类就得不到this对象。ES5 的继承,实质是先创造子类的实例对象this,然后再将父类的方法添加到this上面(Parent.ap原创 2021-12-23 17:47:55 · 79 阅读 · 0 评论 -
第35章 Class 的基本语法
简介类的由来ES6 的class可以看作只是一个语法糖,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。function Point(x, y) { this.x = x; this.y = y;}Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')';};var p = new Point(1, 2);class Point {原创 2021-12-22 19:28:42 · 718 阅读 · 0 评论 -
第31章 Iterator
Iterator(遍历器)的概念表示“集合”的数据结构,主要是数组(Array)和对象(Object),ES6 又添加了Map和Set。它是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口,就可以完成遍历操作。Iterator 的作用有三个:一是为各种数据结构,提供一个统一的、简便的访问接口;二是使得数据结构的成员能够按某种次序排列;三是 ES6 创造了一种新的遍历命令for...of循环。Iterator 的遍历过程是这样的。(1)创建一.原创 2021-12-17 11:02:10 · 201 阅读 · 0 评论 -
第29章 Reflect
1 概述Reflect对象的设计目的有这样几个。(1) 将Object对象的一些明显属于语言内部的方法,放到Reflect对象上。某些方法同时在Object和Reflect对象上部署,未来的新方法将只部署在Reflect对象上。(2) 修改某些Object方法的返回结果,让其变得更合理。// 老写法:无法定义属性时,会抛出一个错误try { Object.defineProperty(target, property, attributes); // success} cat.原创 2021-12-14 11:23:49 · 296 阅读 · 0 评论 -
第28章 Proxy
概述Proxy 用于修改某些操作的默认行为,即对编程语言进行编程。Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。// 对一个空对象架设了一层拦截,重定义了属性的读取(get)和设置(set)行为var obj = new Proxy({}, { get: function (target, propKey, receiver) { console.log(`getting ${原创 2021-12-10 13:04:21 · 363 阅读 · 0 评论 -
第27章 Symbol
ES5 的对象属性名都是字符串,这容易造成属性名的冲突。Symbol 值通过Symbol函数生成。这就是说,对象的属性名现在可以有两种类型,一种是原来就有的字符串,另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型,就都是独一无二的,可以保证不会与其他属性名产生冲突。它是 JavaScript 语言的第七种数据类型,前六种是:undefined、null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。Symbol函数前不能使用原创 2021-12-09 11:40:49 · 419 阅读 · 0 评论 -
第26章 继承
1几种继承方式1.1原型链将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。假如我们让原型对象等于另一个类型的实例,另一个原型又是另一个类型的实例,就构成了实例与原型的链条。这就是所谓原型链的基本概念。1.1.1概念function SuperType(){ this.property = true; }SuperType.prototype.getSuperValue = func...原创 2021-12-04 11:48:13 · 669 阅读 · 0 评论 -
第25章 对象的新增方法
Object.is()S5 比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===)。它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0。用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致。Object.is('foo', 'foo')// trueObject.is({}, {})// false+0 === -0 //trueNaN === NaN // falseObject.is(+0, -0) //.原创 2021-12-03 17:56:11 · 563 阅读 · 0 评论 -
第24章 对象的扩展
属性的简洁表示法ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。//属性简写const foo = 'bar';const baz = {foo};baz // {foo: "bar"}:等同于const baz = {foo: foo};function f(x, y) { return {x, y};//用于函数的返回值,将会非常方便}function f(x, y) {// 等同于 return {x: x, y: y};}f(1, 2) //原创 2021-12-03 17:07:55 · 289 阅读 · 0 评论 -
第23章 Set 和 Map 数据结构
1 Set1.1基本用法Set本身是一个构造函数,用来生成 Set 数据结构。它类似于数组,但是成员的值都是唯一的。Set函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化。// 参数为真数组,实现去重const set = new Set([1, 2, 3, 4, 4]);[...set]// [1, 2, 3, 4]function dedupe(array) { return Array.from(new Set(array).原创 2021-12-02 15:19:33 · 447 阅读 · 0 评论 -
第22章 字符串的扩展
字符的 Unicode 表示法"\u20BB7"// " 7":Unicode表示法只限于码点在\u0000~\uFFFF之间的字符"\uD842\uDFB7"// "????":超出这个范围的字符,必须用两个双字节的形式表示"\u{20BB7}"// "????":将码点放入大括号,就能正确解读该字符字符串的遍历器接口for (let codePoint of 'foo') { console.log(codePoint)}// "f":ES6 为字符串添加了遍历器接口,使得字原创 2021-11-22 18:04:42 · 438 阅读 · 0 评论 -
第21章 变量的解构赋值
1数组的解构赋值ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。let [foo, [[bar], baz]] = [1, [[2], 3]];console.log(foo, bar, baz)// 1 2 3:“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。 let [x, , y] = [1, 2, 3];console.log(x, y)// 1 3let [head, ...tail] = [1, 2, 3.原创 2021-11-19 18:50:10 · 447 阅读 · 0 评论 -
5.7 单体内置对象
这些对象在ECMAScript 程序执行之前就已经存在了。1Global对象所有在全局作用域中定义的属性和函数,都是Global 对象的属性。1.1 URI 编码方法encodeURI()和encodeURIComponent()方法可以对URI(Uniform ResourceIdentifiers,通用资源标识符)进行编码,以便发送给浏览器。encodeURI()主要用于整个URI(例如,http://www.wrox.com/illegal value.htm),而enc.原创 2021-11-01 12:00:31 · 77 阅读 · 0 评论 -
5.6 基本包装类型
引用类型的实例,在执行流离开当前作用域之前都一直保存在内存中。 基本包装类型的对象,则只存在于一行代码的执行瞬间,然后立即被销毁。每当读取一个基本类型值的时候,后台就会创建一个对应的基本包装类型的对象。(1) 创建String 类型的一个实例;(2) 在实例上调用指定的方法;(3) 销毁这个实例。1 Boolean类型Boolean 类型是与布尔值对应的引用类型。var booleanO...原创 2021-10-29 17:39:56 · 97 阅读 · 0 评论 -
5.5 Function类型
1概念1.1定义函数实际上是对象,每个函数都是Function 类型的实例。函数声明:JavaScript 引擎能把函数声明提升到顶部,解析器会率先读取函数声明 函数表达式:等到解析器执行到它所在的代码行,才会真正被解释执行alert(sum(10,10));//20function sum (num1, num2) { return num1 + num2;}alert(sum(10,10));//报错var sum = function(num1, num2){..原创 2021-10-27 17:47:41 · 236 阅读 · 0 评论 -
5.4 RegExp 类型
1创建字面量正则表达式中的元字符包括:( [ { \ ^ $ | ) ? * + .]}//匹配第一个"bat"或"cat",不区分大小写var pattern2 = /[bc]at/i;//使用的所有元字符都必须转义:匹配第一个" [bc]at",不区分大小写var pattern2 = /\[bc\]at/i;构造函数var pattern2 = new RegExp("[bc]at", "i");//所有元字符都必须双重转义var pattern2 = new Re.原创 2021-10-21 15:12:25 · 134 阅读 · 0 评论 -
5.3 Date 类型
Date 类型;Moment使用原创 2021-10-19 17:57:28 · 127 阅读 · 0 评论 -
5.2 Array 类型
1数组概念1.1创建第一种是使用Array 构造函数var colors = new Array(20); //可以给构造函数传递数量var colors = new Array("red", "blue", "green");//可以给构造函数传递应该包含的项var names = Array("Greg");//也可以省略new 操作符第二种基本方式是使用数组字面量表示法var colors = ["red", "blue", "green"];1.2访问使用方括号...原创 2021-10-18 15:34:14 · 187 阅读 · 0 评论 -
5.1 Object 类型
1对象1.1创建对象第一种是使用new 操作符后跟Object 构造函数var person = new Object();person.name = "Nicholas";另一种方式是使用对象字面量表示法,是向函数传递大量可选参数的首选方式。var person = { name : "Nicholas", age : 29};1.2访问访问对象属性时使用的都是点表示法alert(person.name); //"Nicholas"方括号语法的主..原创 2021-10-18 14:31:46 · 121 阅读 · 0 评论 -
第四章 变量、作用域和内存问题
1变量1.1基本类型的值5 种基本数据类型:Undefined、Null、Boolean、Number 和String。typeof操作符检测。值:可以操作保存在变量中的实际的值,保存在栈内存中。复制:复制基本类型的值,把该值复制到为新变量分配的位置上。这两个变量可以参与任何操作而不会相互影响。创建这个值的一个副本。类型 "undefined"——如果这个值未定义; "boolean"—......原创 2021-09-24 15:40:21 · 172 阅读 · 0 评论 -
第三章 基本概念
1、语法1.1标识符标识符,就是指变量、函数、属性的名字,或者函数的参数。第一个字符必须是一个字母、下划线(_)或一个美元符号($) 其他字符可以是字母、下划线、美元符号或数字。 标识符采用驼峰大小写格式,也就是第一个字母小写,剩下的每个单词的首字母大写 不能把关键字、保留字、true、false 和null 用作标识符。1.2关键字和保留字1.3变量ECMAScript 的变量是松散类型的,所谓松散类型就是可以用来保存任何类......原创 2021-09-08 11:34:10 · 141 阅读 · 0 评论 -
第二章 在HTML 中使用JavaScript
1、<script>元素1.1标签位置 问题:在文档的<head>元素中包含所有JavaScript 文件,意味着必须等到全部JavaScript 代码都被下载、解析和执行完成以后,才能解析body中的代码开始呈现页面的内容。 解决:部JavaScript 引用放在<body>元素中页面内容的后面1.2引入方式JavaScript 代码将被从上至下依次解释。内嵌式<script type...原创 2021-09-07 10:54:52 · 369 阅读 · 0 评论 -
第一章 JavaScript简介
1、组成1.1ECMAScriptECMAScript的实现包括浏览器端和服务器端(node)。ECMAScript,提供核心语言功能。1.2文档对象模型(DOM)DOM把整个页面映射为一个多层节点结构。DOM,提供访问和操作网页内容的方法和接口。1.3浏览器对象模型(BOM)BOM 可以控制浏览器显示的页面以外的部分。BOM,提供与浏览器交互的方法和接...原创 2021-09-07 09:37:27 · 71 阅读 · 0 评论