loveky / Blog

记录点滴

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

《JavaScript权威指南 第六版》读书会 笔记

loveky opened this issue · comments

var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
trees[3] = undefined;

3 in trees;

一、摘要:

1分类:

  • 1).一元运算符(delete,void,instanceof,-),二元运算符(大多数运算符),三元运算符(条件运算符)。
  • 2).大部分运算符是由符号表示 ,有些是由关键字表示,比如delete,void, instanceof ,包括new,typeof。

2.赋值运算符
a op = b
op表示 一个运算符。

3. +既是算术运算符,又是字符串运算符。是从左到右工作的。

4对象创建运算符new
new constructor (argument)
new 首先创建一个新对象,该对象的属性都未被定义。接下来,它将调用特定的构造函数,传递指定的参数,此外,还要把新创建的对象传递给关键字this。这样构造函数就可以使用关键字this来初始化新对象。

5.delete运算符
delete将删除运算数所指定的对象的属性、数组元素或变量。如果删除成功,则返回true. 如果该运算数不能被删除。它将返回false. 但是并非所有的属性和变量都能被删除。某些内部的核心属性和客户端属性不能被删除。var语句声明的用户定义变量也不能删除。

6.函数调用运算符
能过()调用函数。

二、问题

1. 位运算符的应用场景。
2. 逗号运算符:
a=0,b=1,c=2;
等价于a=0;b=1;c=2;它的值为2.
3.[]和.都是运算符。
[ ]用于存取数组元素,还可以用于存取对象的属性。
.左边的运算数是一个对象,右边是一个标识符(属性名称)。右边的运算数既不能是字符串,也不能是变量,而应该是属性或者方法的直接量名,而且不需要指明类型。
frames[0].legth
document.write("hello")

Q1、 JS中都是表达式吗?
Q2、点和方括号两种方式只要上面的区别吗?
Q3、
image

Get1、原始表达式包含常量或直接量、关键字和变量。
Get2、
image

Get3、大多数的运算符是标点运算符,少部分是关键字运算符
Get4、避免运算符导致的副作用。

void运算符应用场景?

1

控制台结果:

2

3

4

5

get:

1、q = a ? b : c ? d : e ? f : g ; (三目运算符的R结合性)
2、除数为0的结果是正无穷或负无穷,0/0的结果为NaN
3、6.5 % 2.1结果为0.2
4、+运算符优先考虑字符串,但要注意加法结合性对运算顺序的影响(如三个数相加)
5、++运算符后的分号最好手动补全

Get

问题:

  1. 页数
var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
trees[3] = undefined;

Get

JS权威指南读书笔记第四章

Attention

'1' == true
true
'2' == true
false

Get:
1、对象转换成为原始值之后,如果两个操作数都是字符串,那么将依照字母表的顺序对两个字符串进行比较,这里提到的‘字母表顺序’是指组成这个字符串的16位Unicode字符的索引顺序。
2、所有大写的ASCII字母都‘小于’小写的ASCII字母。
3、in运算符希望它的操作数是一个字符串或可以转换为字符串的。
4、为了计算 o instaceof f js首先计算 f.prototype 然后在原型链中查找o 如果找到,那么o是f(或者f的父类)的一个实例。
5、&&并不总返回布尔值。

var b = 2&&4
//b  4

6、&&如果左假,依赖左,如果左真 依赖右。
7、|| 左真返回左,否则返回右。
8、es3规定不允许对eval赋予别名,实际并非如此,当通过别名调用时,eval会将其字符串当成顶层的全局代码来执行。但这不影响主调函数里面的变量。
9、常规eval可以修改局部变量,非常规则修改全局变量。
10、ie9之前没有全局eval()。
11、在严格模式下,eval可以查询或 更改局部变量,但不能在局部作用域中重新定义变量或者函数。

Get:

1:page74
对象和其本身是相等的,但和其他任何对象都不相等。相应位置相同中的数组元素是相等的两个数组也是不相等的。
image

2:page74
如果其中一个值是NAN,或者两个值都是NAN,则它们不相等。NAN和其它任何值都是不相等的,包括它本身。通过x!==x来判断x是否为NAN,只有在x为NAN的时候,这个表达 式的值 才经true.

3.page79逻辑表达式
&&和||不光是从简单的布尔运算,其实是对真值 和假值的布尔操作和运算。可以有条件的执行两侧的表达式。

Questions:

1:page64
调用表达式:
如果这个表达式是一个属性访问表达式,那么这个调用称作“方法调用”。在方法调用中,执行函数体的时候,作为属性访问主题的对象和数组 便 是其调用方法内部this的指向。这种特性使得在OO的范例中,函数(方法)可以调用其宿主对象。
并不是说,所有方法调用的调用表达式都使用全局对象作为this关键字的值,然而在ES5中,通过严格模式定义的函数,在调用时使用undefined作为this的值 ,this不会指向全局对象。

2:page64
对象创建表达式:
js首先创建一个新的空对象,然后通过传入指定的参数并将这个新对象当做this的值 来调用一个指定的函数。这个函数可以使用this来初始化这个新创建对象的属性。

3.page81
赋值表达式(a=b)==0

4.page83 eval()

Get:

1、任何数和NaN比较都是返回false
2、&& 并不总是返回true或false
3、数字和字符串 比较运算 比较运算符更偏爱数字,只有在两个操作数是字符串的时候才进行字符串比较

Questions:

1、in运算符? page78
image

2、typeof 返回值,任意宿主对象? page87

Get:
1、逻辑表达式 “短路” p80
2、比较运算符与加号运算符,关于数字和字符串的优先级不同 p77

Questions:
1、多次提到表达式具有副作用(赋值,递增,递减,函数调用)p80,这个副作用要怎么去深入理解?
2、赋值表达式副作用 p81,p83
3、delete运算符副作用 p88
4、void运算符副作用 p89
5、逗号运算符副作用 p90

GET:

  1. page93
    空循环体的语句有时是很有用的。
    for(i=0;i<a.length;a{i++}=0);

  2. page95
    函数定义通常出现在js代码的最顶层,也可以在其它函数体内不能出现在if,while,或者其它任何语句内。

  3. page99
    .swtch语句中的匹配是按照===来进行比较的。break和return都可以用于终止swtch语句。

  4. page108
    break无法越过函数的边界。无论它带不带标签 。continue只能在循环体中使用。

  5. page110
    抛出异常的时候,通常采用Error类型和其子类型。一个Error对象有一个name属性表示错误类型,一个message用来 存放传递给构造函数的字符串。

Q:

  1. page95
    函数声明与函数定义的差别:
    var a=function(){};
    function a(){}

  2. page112
    break,return,continue可以使得解释器跳出代码块时,解释器在执行新的目标代码之前先执行finally中的语句块。

GET:
1、switch case 按照"==="进行比较
2、break的作用是立即退出最内层循环或swicth语句 page 107
3、continue 只能在循环体内使用,其他地方使用报语法错误 page 108
4、return 只能在函数体内执行,当执行到return 语句的时候,函数终止执行,可以单独使用而不必带有表达式,返回undefined page109

Q:
empty,label语句?pag117

Get
1、定义函数时,与if while不同,函数体必须用花括号
2、函数定义不能出现在if、while语句或其他任何语句中。。。所以,function并不是真正的语句
3、case做的是 === 比较
4、default可以放在switch的任何地方
5、for in 循环只能遍历可枚举的属性
Q:
1、空语句啥时候使用 P93

for (var i = 0; i < 10; i++) {
	try {
		if (i==5) {
			break;
		}
	}
	finally {
		console.log('Hi')
	}
}

GET:
1、当创建一个具有空循环体的循环时,空语句有时是很有用的。 p93
2、变量声明和函数声明会被提前到脚本或嵌套函数的顶部 p94&p95
3、switch语句里的case后面表达式的值是按===进行比较的 p99
4、break和return都可以用来终止switch语句 p100
5、for循环括号里的三个表达式的值都可以省略,但是分号不能省略 p104

Get
1、除了名字和值之外,每个属性还有一些与之相关的值,称为属性特征:1.可写 2.可枚举 3.可配置
2、对象直接量是一个表达式,这个表达式在每次运算都创建并初始化一个新对象。
3、所有通过对象直接量创建的对象都具有同一个原型对象。
4、Objcet.prototype是为数不多的没有原型的对象
5、可以通过传入null给Object.create()来创建一个没有原型的新对象,Object.create()接受第二个参数,这个参数为属性
6、传入Object.prototype来创建一个普通对象
7、点运算符后直接使用保留字在ie8下面报错
8、

var a = {x:'1'}
a.x
"1"
var b = Object.create(a)
b.x
"1"
b.x = 2
2
b.x
2
a.x
"1"   //不会去修改 原型链

9、三种场景给对象设置属性会失败:1.o中的属性p是只读的 2. o中的属性p是继承属性 且他是只读的 3. o中不存在自有属性(即o中没有setter方法)
10、delete不能删除那些可配置性为false的属性 比如通过变量声明和函数声明创建的全局对象属性
11、hasOwnProperty 方法来检测给定的名字是否是对象的自有属性 对于继承属性返回false
12、propertyIsEnumerable 用来检测是自有属性且是可枚举的属性
13、in可以 区分不存在 和 存在但是值为undefined的属性
14、由getter和setter定义的属性称作存取器属性。

Q1.

var a = {}
var a = new Object
var a = new Object()//三者区别

GET
1、对象直接变量中的最后一个属性后的逗号,在ie下会报错
2、对象中 [],.的区别
3、避免查询属性报错:var len = book && book.subtitle && book.subitle.length;
4、内置构造函数的原型是只读的,严格模式下任何失败的属性设置会抛出类型错误异常
5、检测属性,in运算符,hasOwnProperty(),propertyIsEnumberable()

Q
image

图片比较多,发在这里

GET
1、使用 . 和 [] 获取对象属性的区别 p123
2、对象在查询属性时可以查询到继承属性,但给自身属性赋值时无法修改同名的继承属性 p126
3、查询不存在的属性不会报错,它的值是undefined;但查询一个不存在的对象的属性时会报错,建议使用&&运算符的短路操作获取对象属性 p126
4、delete只能删除自有属性,不能删除继承属性 p127
5、使用in运算符、hasOwnProperty、propertyIsEnumberable检测属性

Q
1、p127 实际开发中怎么避免这种相互引用导致的内存泄漏
var a = {p:{x:1}}; var b = a.p; delete a.p;

GET:
序列化对象:
JSON 语法支持数字,字符串,布尔值,null
NaN,正无穷,父无穷 序列化结果null
日期对象序列化的结果是ISO格式的字符串,但JSON.parse()依然保留它们字符串形态,并不会将其还原为日期对象
undefined,函数,正则,Error对象不能序列化和还原

Q:
什么叫本地化字符串?P142

GET
1、通过Array() 构建数组的,数组的索引值没有定义
2、当省略数组中的值的数组是稀疏数组,省略掉的值是不存在的
3、Object.defineProperty() 数组length属性变成只读
4、join() 默认逗号分隔
5、sort() 如果数组包含undefined元素,他们会排到数组的尾部
6、concat()、slice()、splice() 的区别
7、filter()

Get
1、一个属性包含了一个名字和四个特性。数据属性的4个特性分别是它的值,可写性、可枚举性、可配置性。P134
2、存取器属性不具有值特性和可写性,它们的可写性是由setter方法存在与否决定的。存取器属性的四个特性是,读取、写入、枚举、配置。P135
3、Object.getOwnPropertyDescriptor只能得到自有属性的描述符。要想得到继承的属性的特性,需要getPrototypeOf()去遍历原型链。
4、Object.definePeoperty传入要修改的对象 要创建或修改的属性的名称以及属性描述符对象 来设置属性的特性。
5、Object.defineProperties来同时修改或创建多个属性。第一个参数是对象,第二个参数是映射表。
6、 如果对象是不可扩展的,则可以编辑已有的自有属性,但不能给它添加新属性
如果属性是不可配置的,则不能修改它的可配置性和可枚举性
如果存取器属性是不可配置的,则不能修改其getter和setter方法,也不能将她转换为数据属性
如果属性是不可配置的,则不能将它转换为存取器属性
如果数据属性是不可配置的,则不能将它的可写性从false修改为true,但可以从true修改为fasle
如果数据属性是不可配置且不可写的,则不能修改它的值。然而可配置但不能写属性的值是可以修改(实际上是先将它标记为可写的,然后修改它的值,最后转换为不可写)
7、isPrototypeOf 用来检测一个对象是否是另外一个对象的原型,跟instanceof类似,但是instanceof 的右操作符通常是一个类
8、对象的类属性是一个字符串,用以表示对象的类型信息。Null Number String Boolean Object Array Regexp
9、一旦将对象转换为不可扩展的,就无法再将其转换为可扩展的了。Object.esExtensible()来判断是否可扩展
Object.preventextensions()可以将对象转换为不可扩展的。Object.seal()能够将对象设置为不可扩展的,还可以将所有自有属性都设置为不可配置的。使用了seal就不能解seal了。使用Object.isSealed()来检测是否封闭了。
10、Object.freeze()将更严格地锁定对象,除了拥有seal的功能外,还可以将所有数据属性设置为只读。Object.isFrozen来检测是否冻结。
11、JSON.stringify()只能序列化对象可枚举的自有属性。不能序列化的属性,在输出的字符串中省略掉
12、toLocaleString()方法返回一个表示这个对象的本地化字符串。其实只有数字、日期和时间做本地化的转换

1、最大索引,2的32次幂减2
2、用数字索引来访问数组元素一般来说比访问常规的对象属性要快得多。????
3、可以使用负数或非负整数来索引数组。非负整数,数组索引,而非对象属性。不是非负,常规的对象属性,而非数组索引。P146页。
4、稀疏数组 是包含从0开始的不连续索引的数组,不连续意味着元素不存在,跟直接量里面创建数组时省略不同。使用 in 可以检测区别。有返回true,无返回false。数组直接量是不会创建稀疏数组
5、数组可以通过设置length的方法,删除数组中的元素。
6、数组中的delete,是将数组变成稀疏的。要想不变稀疏 使用slice() push 最后植入 pop 最后删除 unshift首部植入 shift首部删除
7、Array.join()方法将数组中所有的元素都转化为字符串连接在一起。返回字符串。默认逗号连接。相对应的逆向方法是String.split()
8、Array.reverse()数组反转。旧数组
Array.sort()将元素排序,undefined元素排到数组尾部,也可以给sort传入一个比较函数。旧数组
concat()返回新数组
slice()返回指定数组的一个片段或子数组。两个参数分别为片段的开始和结束(返回结果不包含第二个参数位置的元素)。只有一个参数,就是从指定位置到结尾。-1指最后一个元素。返回新数组。
splice()是在数组内插入或删除,不会产生稀疏数组。旧数组操作。第一个参数制定了插入或删除的起始位置,第二个参数指定了应该从数组中删除的元素的个数。如果第二个参数没有,则从开始到结尾的所有元素都会被删除。splice中,第三个开始的参数制定了插入的内容。
forEach 三个参数 分别是 值,索引,数组 通常只用第一个。使用forEach想提前终止,需要放在try中。
map方法将每个元素传递给制定函数,返回结果新数组。
filter方法传递的函数是用来逻辑判定的,该函数返回true false 。filter返回的数组总是稠密的。
every全部满足,返回true
some有一个满足 返回true
reduce reduceRight方法使用指定的函数将数组元素进行组合,生成单个值。reduce 第一个参数是函数,第二个是函数初始值

20170317
1、数组有“常规的对象属性”和“数组索引”两种类型的属性,非负整数的字符串可以当做数组索引使用,例如 a[1.000] 与a[1]相等 p146
2、数组没有越界的概念,当试图查询不存在的属性时,会得到undefine值 p146
3、数组直接量中的省略值会创建稀疏数组,书中写错了 p147
clipboard1

4、delete数组的索引属性与delete对象的常规属性,有所区别
delete对象属性
clipboard2

delete数组索引
clipboard3

5、如果数组是稀疏的,使用数组元素的时候应先检测一下,排除null,undefinded,和不存在的元素 p150 数组有null的元素吗?不存在的元素不是都会返回undefined吗?

6、join()不传值,默认是用逗号连接,设置css某些属性的时候可以在数组后多加个undefined元素,然后用join('px ')这种去连接。

7、sort()方法会把数组里的undefined元素排到数组尾部
8、concat()的参数为数组时,连接的是数组的元素,而非数组本身
9、slice()不会修改原数组,splice()会修改,参数为数组时,要避免原数组被修改
10、es5新增的数组方法了解:forEach, map, filter, every, some, reduce, reduceRight,indexOf等

第6章(对象):
GET:
1.page 135 getOwnPropertyDescriptor() ,数据属性,存储器属性。defineProperty , defineProperties
2.对象的三个属性
Q:
1.

第7章(数组):
GET:
image
-1
Q:
1.page161
有关检查对象的类属性的方法的理解。
2.怎样理解这两个过程?
var x,y,z;
[x,y,z]=[1,2,3]
console.log(x); //log 1
console.log(y); //log 2
console.log(z); //log 3
如果是:
var s=[x,y,z];
s=[1,2,3]
console.log(x);// log undefined

第八章:函数
Get:
1.函数声明语句不能出现在条件判断语句,或者try/catch/finally以及with语句中。
2.方法链:当方法的返回值 是一个对象,这个对象还可以调用它的方法。
3.凡没有形参的构造函数在调用的时候,可以省略();
4.可以使用call() 和apply()来间接的调用参数。
5.函数参数传递都是值 传递,不是引用传递。

function addTen(num) {
num += 10;
return num;
}
var count = 20;
var result = addTen(count);
alert(count); //20,没有变化
alert(result); //30
image

function setName(obj) {
obj.name = "Nicholas";
}
var person = new Object();
setName(person);
alert(person.name); //"Nicholas"
image

function setName(obj) {
obj.name = "Nicholas";
obj = new Object();
obj.name = "Greg";
}
var person = new Object();
setName(person);
alert(person.name); //"Nicholas"
image

实参可选,是因为arguments是一个类数组对象。
实参对象有callee和caller属性。callee指向当前正在执行的函数。
6.page171嵌套函数的this不会从调用它的函数中继承this。
image

GET

函数声明不能出现在循环,条件判断,try/catch/finally及with语句中
arguments是一个数组对象

Q
1、函数形式调用的函数通常不使用this关键字,不过‘this’ 可以用来判断当前是否是严格模式?p169
2、函数体内的执行顺序?

image

1、indexOf 和 lastIndeOf寻找给定值的元素,找到就返回第一个出现位置的索引,没找到返回-1.该方法可以指定第二个参数,第二个参数指开始值。
2、Array.isArray可以检测是不是数组。
3、一种常常完全合理的看法把拥有一个数值length属性和对应非负整数属性的对象看成一种类型的数组。字符串被当作数组看待时,是只读的,也就是说,不能修改其中的值,也不能使用push sort reverse splice等方法。
4、var a = (function(x) {return xx})(10) var b = (function(x) {return xx})(10) 区别
5、es3 和非严格es5下,调用上下文是指全局对象,在严格模式则是undefined、以函数形式调用的函数通常不使用this关键字。方法调用中的this通常指的是调用该方法的对象。
6、凡是没有形参的构造函数调用都可以省略圆括号。构造函数调用创建一个新的空对象,这个对象继承自构造函数的prototype属性,构造函数试图初始化这个新创建的对象,并将这个对象用做其调用上下文。
7、arguments是指向实参对象的引用,这个实参对象就是一个类数组对象。
8、P175 如果实参对象是一个普通数组的话,第二条console.log(x)的语句绝对不会是null???
9、严格模式不能使用arguments作为参数名或者局部变量名。
10、实参对象定义了callee和caller属性。严格模式下对这两个属性的读写都会报错,非 严格模式下,callee属性指代当前正在执行的函数。caller指代正在执行函数的函数。caller实现的不是很多。callee很有用,可以在匿名函数中递归调用本身。argument.callee();

Get:
1、仅以语句声明形式定义的函数,不能出现在循环,条件判断,try/catch/finally以及with语句中
2、方法调用和函数调用在“调用上下文”上有很大区别,方法调用的上下文为调用方法的对象
3、链式调用的原理 p171
4、javascrip不允许对this赋值,且this没有作用域的限制
5、构造函数的调用与普通函数调用有很大的不同,构造函数的调用会创建一个新的对象,这个对象继承自构造函数的prototype属性。构造函数对这个新对象进行初始化,并将这个新对象作为“调用上下文”。构造函数通常不使用return关键字,它返回的是创建的新对象。如果在构造函数里显式的返回一个对象,那么调用构造函数表达式的值就是return的对象;如果return的不是对象,则忽略return的值,使用构造函数创建的新对象作为返回值
6、省略的实参都是undefined,多出的参数会自动省略
7、arguments并不是真正的数组,它是一个实参对象,只是碰巧具有以数字为索引的属性
8、严格模式下无法使用arguments作为形参名或局部变量名,也不能给arguments赋值
9、函数不仅是语法,也可以是值。 p178
10、函数可以拥有属性 p180

Q
1、方法的链式调用和构造函数的链式调用,有何区别?p171
2、函数赋值给数组元素,实际开发中,有这样的应用吗?
var a = [function(x) {return x*x;}, 20]; a[0](a[1]); 400
3、递归函数使用时要注意什么?

function f(x) {
	if(x === 1){
		return 1;
	}else{
		return x * f(x-1);
	}
}

f(5);
var obj1 = {
	num: 5,
	f: function(x){
		if(x === 1){
			return 1;
		}else{
			return x * this.f(x-1);
		}
	}
}

obj1.f(5);

递归函数是要告诉我们:函数既是方法可以调用,又可以作为值当参数传递?

GET
闭包 :为了能够读取其他函数的内部变量的函数
闭包的用处
1、读取函数内部的变量
2、让这些变量的值始终保持在内存中

Q

var x = "globol value";
var getValue = function(){
	console.info(x); 
	var x = "local value";
	console.info(x); 
}
 getValue();

var x = "globol value";
function getValue(){
	console.info(x); 
	x="local";
	console.info(x); 
	
}
 getValue();

2、将不使用的局部变量全部删除?

GET:

闭包:

  • 函数嵌套;
  • 嵌套的函数引用的局部变量,该变量会被存储起来,当函数执行时,会引用该变量。
  • 调用闭包函数时,不同的调动,相当于创建了不同的实例,相互之间没有关系,不能互相影响。
  • 多个闭包可以共享变量,放在同一个作用域链下声明。
  • 创建闭包的思路-ES6的let 声明的块作用域。

8.6闭包:
1.page183
在定义定义函数的作用域外调用这个函数时,f()的作用域链包括局部变量在外部调用依然有效。关联到闭包的作用链都是“活动的”。
image

2.对(function())()的理解
(function()){}相当于:
image
image
image

1、调用闭包时,相当于创建了不同实例,因此互不干扰。
2、当调用函数时闭包所指向的作用域链和定义函数时的作用域链不是同一个作用域链时。P183
image

1、查了一些资料,发现大家对闭包的定义好像不是太统一,所以看着有点乱

p182 - p183
函数对象可以通过作用域链相互关联起来,函数体内部的变量都可以保存在函数的作用域内,这种特性在计算机科学文献中称为闭包.....

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures
闭包是一种特殊的对象。它由两部分构成:函数,以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。

关于词法作用域:
在 JavaScript 中,变量的作用域是由它在源代码中所处位置决定的(显然如此),并且嵌套的函数可以访问到其外层作用域中声明的变量。

2、一些和闭包有关的例子

var scope = 'global scope';

// 闭包
function fun1(){
	var scope = 'local scope';
	function f(){
		return scope;
	};

	// 返回函数调用表达式
	return f();
}
// 闭包
function fun2(){
	var scope = 'local scope';
	function f(){
		return scope;
	};

	// 返回函数名
	return f;
}

// 非闭包函数
function fun3(){
	var scope = 'local scope';
	function f(){
		return scope;
	};

	// 直接执行函数调用
	f();
}

image

2、一个函数中可以定义多个闭包,引申:在函数中循环创建闭包的注意事项

p185 counter()函数
p187 countfuns()函数
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures
image

Q:

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures
在循环中创建闭包:一个常见错误
性能考量对应的例子

实现在循环中创建闭包2

fun3中for循环内部是不建议定义function的,这里只是演示效果

function fun3(){
  var a = 'local-3',
      f3=[];
  
  for(var i = 0; i< 10; i++){
    f3[i] = function(){
      return i;
    }
  };
  
  return f3;
}

image

function fun4(){
  var a = 'local-4',
      f4=[];
  
  for(var i=0; i < 10; i++){
    f4[i] = f(i);
  }
  
  return f4;
  
  function f(x){
     return x;
  }
}

image

function fun5(){
  var a = 'local-5',
      f5=[];
  
  for(var i=0; i < 10; i++){
    f5[i] = f(i);
  }
  
  return f5;
  
  function f(x){
     return function(){
       return x;
     };
  }
}

image

GET
call,apply 动态改变this,当一个object没有某个方法,单其他的有,可以借助call或apply用其他队形方法操作

function fruits() {}
  
fruits.prototype = {
    color: "red",
    say: function() {
        console.log("My color is " + this.color);
    }
}
  
var apple = new fruits;
apple.say(); 

banana = {
    color: "yellow"
}
apple.say.call(banana);
apple.say.apply(banana)

二者区别

func.call(this, arg1, arg2);
func.apply(this, [arg1, arg2])

了解常用用法

1、数组追加

var array1 = [1,2,3]; 
var array2 = [4,5,6]; 
Array.prototype.push.apply(array1, array2); 

2、获取数组中的最大值和最小值

var  numbers = [5, 458 , 120 , -215 ]; 
var maxInNumbers = Math.max.apply(numbers, numbers)

3、精确判断对象类型
Object.prototype.toString.call(obj)

bind,call,apply 区别

bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用

var obj = {
    x: 81,
};
  
var foo = {
    getX: function() {
        return this.x;
    }
}
foo.getX.call(this,obj)
foo.getX.apply(obj)
foo.getX.bind(obj)() 

Q

var  numbers = [5, 458 , 120 , -215 ]; 
var maxInNumbers = Math.max.apply(Math, numbers)

Get

1. bind 方法,函数绑定在对象上,但并不影响对象,对象还是之前的对象。该方法会返回一个新函数,新函数会把函数当做对象的函数执行。

function f(y){
	return this.x + y;
}

var o = {x:1};
var g = f.bind(o);
g(2); //3
function f(y){
	return this.x + y;
}

var o = {x:1}; 
f(3) //NaN

o.f // undefined
o //没有变化

理解闭包。

Function.prototype.bind = function(o){
	var self = this;
	var boundArgs = arguments;

	console.log(arguments.length) //2

	return function(){
		var args = [], i;
		for(i =1; i<boundArgs.length; i++){
			args.push(boundArgs[i]);
		}

		console.log(arguments == boundArgs)//false

		console.log(arguments.length)//1

		for(i=0;i<arguments.length; i++){
			args.push(arguments[i]);
		}

		return self.apply(o, args);
	}
}

var sum = function(x, y){
	return x+y;
}
var succ = sum.bind(null, 1);

succ(3);//4

2. toString()

succ.toString()

/*
"function (){
		var args = [], i;
		for(i =1; i<boundArgs.length; i++){
			args.push(boundArgs[i]);
		}

		console.log(arguments == boundArgs)

		console.log(arguments.length)

		for(i=0;i<arguments.length; i++){
			args.push(arguments[i]);
		}

		return self.apply(o, args);
	}"

*/

3. Function 构造函数-很少用呀!!!

  • 参数是字符串,最后一个是函数体。
  • 创建的是一个匿名函数。
  • 动态执行,每次都会解析函数体,放在嵌套或循环函数中会影响效率。
  • 因为动态编译,而动态编译的函数总是会放在顶层,所以请注意他的作用域,是全局的。相当于在全局作用域下执行eval。
Function('x','y')
结果:
function anonymous(x
/*``*/) {
y
}
var scope = 'global';
function testFunction(){
	var scope = 'local';
	return new Function('return scope');
}

testFunction()(); // global

4. 可调用的对象-一个非函数的可以被调用的对象。。Question..

function isFunction(x){
	return Object.prototype.toString.call(x) === '[object Function]'
}

5. 函数式编程-操作函数

map() 方法创建一个新数组,其结果是该数组中的每个元素调用一个提供的函数。
reduce() 方法对累加器和数组的每个值 (从左到右)应用一个函数,以将其减少为单个值。
every() 方法测试数组的所有元素是否都通过了指定函数的测试。

var sum = function(x, y){
	return x+y;
}

var square = function(x){
	return x*x;
}

var data = [1,1,2,3,4,5,6];
var mean = data.reduce(sum);
console.log(mean);
mean = mean/data.length;
console.log(mean);

var deviations = data.map(function(x){
	return x-mean;
});

var stddev = Math.sqrt(deviations.map(square).reduce(sum)/(data.length-1));

1、bind方法是将函数绑定至某个对象。f.bind(o);

function f(y) {return this.x + y}
undefined
var x = 2 
undefined
f(2)
4
var o = {x:1}
undefined
var g = f.bind(o)
undefined
g(2)
3

2、toString() 内置函数返回 [native code]
3、function构造函数允许js在运行时动态地创建并编译函数,全局作用域

var scope = 'global'
undefined
function constructFunction() {var scope = 'local' ; return new Function('return scope')}
undefined
constructFunction()
function anonymous() {
return scope
}
constructFunction()()
"global"

4、call和apply看做是某个对象的方法,通过调用方法的形式来间接调用函数。他们的第一个实参是要调用函数的母对象。

var array1 = [1,2,3]; 
var array2 = [4,5,6]; 
Array.prototype.push.apply(array1, array2);

GET:
函数可以通过构造函数Funtion来定义。

1.问题:Function的call,apply方法在哪里?

image

2.对bind方法的理解

image

3.检查一个对象是否是真正的函数对象,哪种方法好
image

Q:
1、p191:柯里化,es5的bind会把第一个实参后面的参数传入this
2、p192:es5的bind方法怎么实现构造函数

GET
特殊字符

\
^
$
* {0,}
+{1,}
?{0,1}
(x) 
(?:x)    ??
x(?=y)
x(?!y) 
\d
\D
\w
\W
\s
\S

/\d+(?!\.)/.exec("3.141")

常使用的方法
Regexp.extc()
1、返回数组
2、区别于string.match 可以使用g标志
Regexp.test() 返回true或false

String.match()
1、找到一个或多个正则表达式匹配的结果,没有返回null
2、regexp 没有“g” 值执行一次匹配
3、regexp 有“g” 全局匹配
4、不提供()这种写法,也不会记录每个匹配子串在string中的位置
image

String.search()

1、返回第一匹配regexp子串的开始位置,没有找到返回-1
2、不执行g标志

String.replace()
1、替换给定的正则匹配的子串
2、在replace中$有特殊含义

$1-$99 匹配第1-99个正则中的()内容
$& 匹配正则的子串
$` 匹配子串的左边
$' 匹配子串的右边
$$ 美元符号


var re = /(\w+)\s(\w+)/;
var str = "John Smith";
var newstr = str.replace(re, "$2, $1");

var str2 = '"1"string"2","3"'
var reg = /"([^"]*)"/g
str2.replace(reg,"''$1''")

Q
(?:x)

1、正则表达式直接量/reg/
2、标点符号前加反斜线(防止记不清楚哪些需要加反斜线)。数字字母不要用反斜线转译(有些字母加反斜线有特殊意义)
3、将直接量字符单独放进方括号内就组成了字符类。一个字符类可以匹配它所包含的任意字符。

var a = /[a,b,c]/
a.test(a)   //true
a.test('d') //false
a.test('a') //true
var a = /[^a,b,c]/
a.test('a') //false

4、"+"用来匹配前一个模式的一个或多个副本。
{n,m}匹配前一项至少n次,但不能超过m次。
{n,} 匹配前一项n次或者更多次
{n} 匹配前一项n次
? 匹配前一项0次或者1次,也就说前一项是可选的。等价于{0,1}
+ 匹配前一项1次或者多次 等价于{1,}
匹配前一项0次或者多次,等价于{0,}
使用
和?的时候,注意他们可以匹配0个。
5、非贪婪的重复,做到尽可能少的匹配。待匹配的字符后面跟随一个问号即可。
6、字符 | 用来分隔供选择的字符,匹配顺序是从左到右,直到发现了匹配项。如果左边的匹配了就不匹配右边的。
8、P260 可以匹配JavaScrip 但不能匹配 JavaScript 或 JavaScripter (负向先行断言)
9、^ 匹配字符串的开头,在多行检索中,匹配一行的开头。
$ 匹配字符串的结尾,在多行检索中,匹配一行的结尾。
\b 匹配一个单词的边界,简而言之,就是位于字符\w和\W之间的位置,或位于字符\w和字符串的开头或者结尾的位置
\B匹配非单词边界的位置
(?=p)零宽正向先行断言,要求接下来的字符都与p匹配,但不能包括匹配p的那些字符 ???
(?!p)零宽负向先行断言,要求接下来的字符不与p匹配。
10、正则表达式修饰符
i 执行不区分大小写的匹配
g 执行一个全局匹配,简而言之,找到所有的匹配,而不是在找到第一个之后就停止
m 多行匹配模式,^匹配一行的开头和字符串的开头,$匹配行的结束和字符串的结束
11、String支持4种使用正则表达式的方法。
search() 参数是正则表达式。返回第一个与之匹配的子串的起始位置,如果找不到匹配的子串,它将返回-1。该方法不支持全局检索,因为会忽略修饰符g
replace(reg or String,String or function)可带全局参数g

     var a = /"([^"]*)"/g
     undefined
     var b  = "aaaaaaaaaa"
     undefined
     b.replace(a,'"$1"')
     "aaaaaaaaaa"
     var b  = 'aaaaaaaaaa'
     undefined
     b.replace(a,'"$1"')
     "aaaaaaaaaa"

String.match(reg) 返回结果是一个由匹配结果组成的数组。可以设置g。返回所有匹配。如果不执行全局匹配,则返回的数组中,第一个元素时匹配的字符串,余下的元素则是正则表达式中用圆括号括起来的子表达式。
String.split(reg)
12、macth方法的参数是RegExp对象,exec方法是一个字符串。与match不同的是、exec方法无论是否有修饰符g,都会返回同样的匹配完整的信息
13、reg.test(xxx)
14、RegExp(正则主体,修饰符(可选))
15、P259 对正则表达式中前一个表达式的引用,并不是指对子表达式模式的引用,而指的是与那个模式相匹配的文本的引用????
写法非法。

Get
image

Q
断言常用的有几种?
不同断言匹配的顺序有什么不同?
image

1.Window document 的style,classname 以及时间处理相关属性。
2.xhtml中的<script>标签中的内容需要放入到<![CDATA[ ]>]中。
3. text/javascript可以省略。

问题:

  1. defer与async区别:
<script defer src=""></script> <script async src=""></script>
  1. javascript: URL的应用

GET
1、脚本类型 language属性已经废弃,不应该再使用用
2、bookmarklet
用户直接把这个链接拖到地址栏或收藏夹

  • 1、必须以“javascript:”开头
  • 2、所有的代码必须在同一行
  • 3、使用单引号
  • 4、不要污染全集变量
    javascript: (function(){...})();
  • 5、 对文本和URL进行编码
    encodeURIComponent()

3、同时支持两者的浏览器会遵从async并忽略defer属性
4、事件驱动的js
JS是采用事件驱动的机制来响应用户操作的,也就是说当用户对某个html元素进行操作的时候,会产生一个时间,该时间会驱动某些函数来处理

事件源:产生事件的地方(html元素)
事件:点击/鼠标操作/键盘操作等等
事件对象:当某个事件发生时,可能会产生一个事件对象,该时间对象会封装好该时间的信息,传递给事件处理程序
事件处理程序:响应用户事件的代码

Q
bookmarklet 一个简单列子?

1、在HTML文档中嵌入客户端JavaScript代码有4种方法。
内联<script></script>
放置在<script>的src中
放置在事件处理程序中
放在一个URL里面
2、如果web页面包含一个嵌入的iframe,则嵌入文档中的js代码和被嵌入文档里的JS代码会有不同的全局对象。
3、当HTML解析器遇到《script》元素时,它默认必须先执行脚本,然后再恢复文档的解析和渲染。如果script元素是由src指定的外部文件,那么先下载该段代码。
4.script 的 defer 和 async属性。 defer属性使得浏览器延迟脚本的执行,直到文档的载入和解析文成。 async属性使得浏览器可以尽快地执行脚本,而不用再下载脚本是阻塞文档解析。在支持的浏览器中,同时出现两个属性则async优先。
5、延迟脚本按照在文档中顺序执行,异步脚本在载入后执行。

1、html嵌入javascript有四种方法 p313

  • 内联<script></script>;
  • <script>用src引入外部脚本;
  • 在html事件处理程序中,通过onClick之类的属性指定
  • 放在一个URL里,使用javascript:协议

2、使用src属性时,<script>和</script>之间的任何内容都会忽略。

  • 可以在<script>标签之间添加代码说明和版权信息
  • 注意:如果有任何非空格或javascript注释的文本出现在<script>标签之间,html5校验器将会报错

Q: p315页底下译注代码理解

3、<script>标签的language属性已经废弃,不应该再使用

4、<script>包含不被浏览器识别的type属性时,它会解析这个元素但不会尝试显示或执行它的内容,这意味着可以使用<script>嵌套任意文本到文档里,只要用type属性为数据声明一个不可执行的类型。如果同时制定src属性和一个未知的类型,那这个脚本会被忽略,并且不会从指定的URL里下载任何内容。

5、javascript:URL能识别的“资源”是能转换成字符串的执行代码的返回值,如果代码返回undefined,那么这个资源是没有内容的

6、如果web页面包含一个嵌入的iframe,嵌入文档和被嵌入文档的javascript代码会有不同的全局对象

7、脚本的执行在默认情况下是同步和阻塞的,<script>可以设置defer和async属性改变脚本的执行方式。

  • html5说这些属性只在和src属性联合使用的时候才有效。
  • defer和async设置后,浏览器可以在下载脚本时继续解析和渲染文档
  • defer和async同时设置时,async优先,忽略defer

Q: 延迟的脚本会按它们在文档里的出现的顺序执行,而异步脚本在它们载入后执行,defer和async的主要区别是什么?
https://segmentfault.com/q/1010000000640869
http://www.jianshu.com/p/17dc82bf08f1

Q:每一个async属性的脚本都在它下载结束之后立刻执行,同时会在window的load事件之前执行。所以就有可能出现脚本执行顺序被打乱的情况;每一个defer属性的脚本都是在页面解析完毕之后,按照原本的顺序执行,同时会在document的DOMContentLoaded之前执行。

在《JavaScript高级程序设计》的P13中提到
在现实中,延迟脚本并不一定会按照顺序执行,也不一定会在DOMContentLoaded事件触发前执行,因此最好包含一个延迟脚本。那么什么情况下defer会不按照顺序执行?

关于DOMContenLoaded

<!DOCTYPE html>
<html>
<head>
	<title>打开链接</title>
	<meta charset="utf-8">
</head>
<body>
<span>我再呢你呢?</span>
<a href="javascript:window.open('about:blank', '_self');">在本页打开我。</a>
<br>
<a href="javascript:void(0);">什么都不做。</a>
<br>
<span>ie会打开一个新窗口,但是返回一个[object]在当前页面上。chrome不会。</span>
<a href="javascript:window.open('about:blank');">打开新窗口</a>
<br>
<span>以下展示区分浏览器哦,像ie就会返回当前值重置页面,但chrome不会。</span>
<a href="javascript:new Date().getDay();">我是星期几</a><br>
<span>我就不重置页面了,我是void</span>
<a href="javascript:void new Date().getDay();">我是星期几</a>

<span>
	在地址栏里输入 javascript:alert(1+1); 回车是会执行的哦~
</span>
</body>
</html>

GET:
1.js的线程模型
setInterval 和 setTimeOut 看起来是非线程的,但实际上是定时放到任务队列尾部。
2.同源策略

Q:
1.理想的时间线 p326
2.Web worker应用场景 p325
3.条件注释
4.XSS

1、web服务器根据User-agent头部可以有选择的返回 特定的JS代码给客户端。
2、/*@cc_on ie的JS条件编译
3、IE在计算同源策略时不计算端口号

怪异模式和标准模式的检测
document.compatMode

怪异模式、同源策略~

get:

  1. Screen对象。
    screen.availHeight availWidth width height

  2. window.open()
    window.close()

问题:

  1. 1.Window 与 window关系?
    Window == window // false

  2. 为什么Location对象修改search属性会自动刷新当前页面?
    image

  3. document.URL 与 location的关系
    image

  4. 有关高宽的一些问题:
    window.outerHeight == screen.height
    document.body.clientHeight

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

GET
1、setTimeout(function,0)用法
2、window.loacation === document.location
3、history back(),forward(),go()
4、navigator.cookieEnabled
5、window.open()
window.open('http://www.XXX.com','_blank','width=600,height=400,top=100px,left=0px')
top:Number //窗口顶部离开始屏幕顶部的像素数
leftNumber //左端距离值
menubar:yes/no //有无菜单栏
toolbar: yse/no //有无工具栏
scrollbar:yes/no //有无滚动条
status:yes/no //有无状态栏

Q
iframe 引用不同版本的jquery window.$ 原理

1、setTimeout()和setInterval()的第一个参数可以作为字符串传入。
2、window的location对象引用的是Location对象,Document对象的locaiton属性也引用到了Locaiton对象 。
所以,window.location === document.location
3、document对象的URL属性是文档首次载入后保存该稳当的静态字符串,不会更新。Locaiton对象会做更新。
4、Location的hash属性返回URL中的片段标识符(#), 这个属性可读可写。读取时,可以用来判断网页状态是否改变;写入时,则会在不重载网页的前提下,创造一条访问历史记录。
5、replace()方法在载入新文档会从浏览历史中把当前文档删除。assign方法用于载入并显示你指定的URL的文档。
6、脚本不允许访问保存的URL,浏览历史列表
7、history.go() 可以接受一个整数参数,正参或者负参数, 来跳过任意多个页面。
8、navigator对象有四个属性用于提供关于运行中的浏览器版本信息
appName web浏览器全称
appVersion 以数字开始,并跟着包含浏览器厂商和版本信息的详细字符串
userAgent 浏览器在user-agent的http头部中发送的字符串
platform 操作系统字符串
9、top属性指向包含它的顶级窗口。顶级窗口的top代表他本身。
10、iframe元素的contentWindow属性,引用该窗体的window对象。
父页面或者子页面的内容,可以使用contentWindow,该属性是只读的,返回指定iframe的对象,不是标准的一部分,但是浏览器基本都支持。同时也有一个contentDocument属性,该属性支持不高。
11、_top 顶级祖先窗口, _parent 直接父级窗口。
12、target属性的值可以设置为 ‘_blank’ _top _parent

GET:

  1. click事件是在mousedown 和 mouseup之后的。
    click时的事件捕获与冒泡

  2. DOM0就是直接通过 onclick写在html里面的事件;
    DOM2是通过addEventListener绑定的事件, 还有IE下的DOM2事件通过attachEvent绑定;
    DOM3是一些新的事件。

    DOM优化:
    1)focusin 和 focusout (不冒泡)取代focus 和 blur (冒泡)
    2)mouseenter 和 mouseleave (冒泡) 取代了 mouseover 和 mouseout(不冒泡)

Q:

  1. 调用顺序:(p457)
    1)通过属性或者HTML属性注册的事件一直优先调用
    2)使用addEventListerner注册的事件按顺序调用
    3)使用attachEvent 注册的事件可能按照任何顺序调用

GET
addEventListener(event,functon,userCapture)

useCapture:
ture 事件捕获阶段执行
false 冒泡阶段执行
如果没有指定, useCapture 默认为 false

1、HTML5历史管理机制会触发popstate事件来响应浏览器的后退按钮。
2、unload是指用户离开当前文档转向其他文档时会出发,不能取消用户跳转到其他地方。beforeunload事件可以取消。
3、鼠标右键触发contextmenu事件
4、mouseover和mouseout事件会冒泡,但通常不方便的,因为触发这两个事件时,不得不检查鼠标是否真的离开了目标元素,还是仅仅从这个元素的一个子元素移动到另外一个。正因为如此,IE提供了这些事件的不冒泡版本mouseenter和mouseleave。
不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件
不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。
只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。
只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。
5、鼠标滚轮,mousewheel ff下是DOMMouseScroll
6、Ie8及之前的版本中,通过设置属性注册事件处理程序,当调用他们时并未传递事件对象。需要通过全局对象的event属性,所以出现了 window.event写法。
7、attachEvent中的this指向window对象。addEventListener,this指向事件目标。
8、通过设置对象属性或HTML属性注册的处理程序一直优先调用, 使用addEventListener注册的处理程序按照他们的注册顺序调用
使用attachEvent注册的处理程序可能按照任何顺序调用。
9、DOMContentLoaded 是$(document).ready() DOMContentLoaded是指初始化的html加载完的时候执行。
P459
image
image

Q:
html事件处理程序中修改作用域链是陷阱之源,因为作用域链中每个对象的属性在全局对象中都有相同的名字.......
p456

鼠标与键盘事件:例子

1、dataTransfer对象提供了对于预定义的剪贴板格式的访问,也就是在拖拽过程中,可以用dataTransfer对象来传输数据,以便在拖拽操作结束的时候对数据进行其他操作。
2、mousewheel有wheelDelta属性,远离用户方向的一次鼠标滚轮120,接近用户的一次滚轮是-120.而ff下面,DOMMouseScroll事件有detail属性,detail值乘以-40和wheeldelta相等。
3、

英文:
keydown用户任意键都触发,一直摁 一直触发
keypress 字符键触发,按住不放一直触发
keyup 释放时候触发,如果在keydown过程中点击鼠标,则释放键盘没有此事件
中文
chrome 触发keydown和keyup
firefox 首次触发keydown 不触发keypress 停止输入并改变内容(回车或者空格)触发keyup

GET
键盘事件:keydown,keyup
键盘值 event.keycode
String.fromCharCode() 可接受一个指定的 Unicode 值,然后返回一个字符串

div1.onmousedown = function(ev){
			var oEvent = ev || event;
			var disX= oEvent.clientX - oDiv.offsetLeft;
			var disY = oEvent.clientY - oDiv.offsetTop;
			document.onmousemove = function(ev){
				var oEvent = ev || event;
				oDiv.style.left = oEvent.clientX -disX +'px';
				oDiv.style.top = oEvent.clientY - disY + 'px';
			}
			document.onmouseup = function(){
				document.onmousemove = null;
				document.onmouseup = null;
			}
		}

https://github.com/Onlyfor3ver/manifest.git
1、初次加载
1
2、再次刷新
2
3、再次刷新
3
4、关闭服务器刷新
4
5、再次开启服务器
5
6、新增加一个文件 index2.css 继续 刷新
image
image
7、更改版本号 刷新
image
继续刷新 失败。。。。。。
8、禁止掉浏览器缓存 刷新
image
9、允许缓存 刷新
image
10、将新添加的css文件写入manifest 刷新
image
11、禁止掉缓存 将index2.html写入NETWORK选项 刷新
image
12、允许缓存 刷新
image
image

1、localStorage和sessionStorage两者的区别在于存储的有效期和作用域的不同:数据可以存储多久以及谁拥有数据的访问权。localstorage必须是才同一个浏览器下进行读写操作。同源的文档之间可以互相读取数据。sessoionStorage更限制在同一个标签页。
2、localStorage和存储事件采用广播机制,一旦触发,浏览器会对目前正在访问同样站点的所有窗口发送消息。
3、cookie的作用域是通过文档元和文档路径来确定,该作用域通过cookie的path和domain属性也是可配置的。默认情况下,cookie和创建他的web页面有关,并对该web页面以及和该web页面同目录或者子目录的其他web页面可见。
4、userData允许存储的数据流要比cookie大,但没有Storage大。userData的作用域限制在和当前文档同目录的文档中。
5、在清单文件中可以使用特殊的区域头来标识头信息之后清单项的类型,像该例中列举的简单缓存项事实上都属于cache区域,这也是默认的区域。另外两种区域是以network和fallback头信息开始的。
network标识该URL中的资源从不缓存,总要通过网络获取。支持*通配符,表示对任何不在清单中的资源,浏览器都通过网络获取。
fallback区域中的清单项每行都包含两个URL。第二个URL指的是需要加载和缓存在缓存中的资源,第一个URL是一个前缀。任何匹配到该前缀的都不会缓存起来。如果载入失败,则使用第二个URL指定的缓存来代替。
6、onchecking 检查清单文件
onnoupdate 清单没有变化
ondownloading 清单改动,下载并缓存新的资源
onprocess 下载过程 中每个文件下载完毕的时候
oncached 下载完成并且首次将应用程序下载到缓存中
onupdateready 下载完成并将缓存中的应用程序更新后,此时依然可以看到 老的应用程序。
onerror 处于离线状态,检查清单失败
onobsolete 如果一个缓存的应用程序引用一个不存在的清单文件
7、当前的缓存状态
ApplicationCache.UNCACHED 应用程序未设置manifest属性:未缓存
ApplicationCache.IDLE 清单文件已经检查完毕,并且已经缓存了最新的应用程序
ApplicationCache.CHECKING 浏览器正在检查清单文件
ApplicationCache.DOWNLOADING 浏览器正在下载并缓存清单中列举的所有文件。
ApplicationCache.UPDATEREADY 已经下载和缓存了最新版的应用程序
ApplicationCache.OBSOLETE 清单文件不存在,缓存将被删除

1、controls属性指定是否在浏览器中显示播放控件。
loop属性指定是否需要循环播放
proload属性指定在用户开始播放媒体前,是否或者多少媒体内容需要预加载。none表示不需要预加载,metadata则表示则表示诸如时长、比特率、帧大小这样的元数据而不是媒体内容需要加载。 auto表示浏览器应当预加载适量的媒体内容。 autoplay表示当已经缓存足够多的媒体内容的时候是否需要自动开始播放。 true表示告诉浏览器需要预加载媒体内容。
2、媒体状态
duration 指定了媒体的时长,单位是s
initialTime指定了媒体的开始时间,单位是s 对于固定时长的媒体剪辑而言,该属性值通常为0,对于流媒体而言,该属性表示已经缓存的数据的最早时间以及能够回退到的最早时间。当这是currentTime属性时,其值不能小于initialTime的值。
played属性返回已经播放的时间段 buffered属性返回当前已经缓冲的时间段 seekable属性则返回当前播放器需要跳到的时间段 这三个对象都有一个length属性以及start以及end方法 length表示当前的一个时间段,start表示当前时间段的起始时间点 end表示结束时间点。
readyState指定当前已经加载了多少媒体内容,暗示着当前是否以及准备好播放了。