Javascript 高级程序设计

发表于 | 分类于 | | 阅读次数:
字数统计: | 阅读时长 ≈

Javascript 高级程序设计

记录下读书心得

javascript简介

javascript 由三部分组成ECMAscript Dom（文档对象模型） Bom（浏览器对象模型）

在HTML中使用javascript

script

script标签 6个属性

  • async 表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。
  • charset
  • defer 表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效
  • language 已弃用
  • src 包含要执行的外部文件
  • type ，目前type 属性的值依旧还是text/javascript。不过，这个属性并不是必需的，如果没有指定这个属性，则其默认值仍为text/javascript。

使用script元素的方式有两种：
直接在页面中嵌入JavaScript 代码和包含外部JavaScript文件

在使用script嵌入JavaScript 代码时，记住不要在代码中的任何地方出现”/script”字符串，通过转义字符“/”可以解决这个问题

xhtml可以省略</script>
<script type="text/javascript" src="example.js" />
html不可以省略
<script type="text/javascript" src="example.js"></script>
<script type="text/javascript" src="example.js">
console.log("1");
</script>
带有src 属性的<script>元素不应该在其<script>和</script>标签之间再
包含额外的JavaScript 代码。如果包含了嵌入的代码，则只会下载并执行外部脚本文件，嵌入的代码
会被忽略。

通过script便签元素的src 属性还可以包含来自外部域的JavaScript 文件。这一点既让script元素倍显强大，又让它备受争议。
在这一点上，script与img元素非常相似，即它的src属性可以是指向当前HTML 页面所在域之外的某个域中的完整URL

在script元素中设置defer 属性，相当于告诉浏览器立即下载，但延迟执行。

同样与defer 类似，async 只适用于外部脚本文件，都是用来改变脚本，并告诉浏览器立即下载文件。但与defer不同的是，标记为async 的脚本并不保证按照指定它们的先后顺序执行

文档类型

HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。

<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

文档模式

http://www.cnblogs.com/venoral/p/5317824.html
最初是 混杂模式和标准模式 IE 又提出一种所谓的准标准模式
准标准模式与标准模式非常接近，它们的差异几乎可以忽略不计
虽然这两种模式主要影响CSS
内容的呈现，但在某些情况下也会影响到JavaScript 的解释执行

如果在文档开始处没有发现文档类型声明，则所有浏览器都会默认开启混杂模式。但采用混杂模式
不是什么值得推荐的做法，因为不同浏览器在这种模式下的行为差异非常大

对于准标准模式，则可以通过使用过渡型（transitional）或框架集型（frameset）文档类型来触发

基本概念

数据类型

typeof
Number String Boolean Null undefined

Null

空对象指针 typeof(null) //object
如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为null 而不是其他值
var c=null;
这样做不仅可以体现null 作为空对象指针的惯例，而且也有助于进一步区分null 和undefined。
null==undefined //true

undefined

声明但未初始化的变量

Boolean

各种值转换为boolean值的情况,解释了if() 转换过程

输入值 示例 返回值
0 Boolean(0) false
NaN Boolean(NaN) false
数字（非 0 或 NaN） Boolean(4) true
空字符串 Boolean(“”) false
非空字符串 Boolean(“6”) true
null Boolean(null) false
undefined Boolean(undefined) false
Object 类的实例 Boolean(new Object()) true
无参数 Boolean() false

Number

NaN 非数字,NaN 本身有两个非同寻常的特点。
首先，任何涉及NaN 的操作（例如NaN/10）都会返回NaN，这
个特点在多步计算中有可能导致问题。其次NaN 与任何值都不相等，包括NaN 本身

isNaN() 是非数字
isNaN()在接收到一个值之后，会尝试将这个值转换为数值。某些不是数值的值会直接转换为数值，例如字符串”10”或Boolean 值。而任何
不能被转换为数值的值都会导致这个函数返回true

alert(isNaN(NaN)); //true
alert(isNaN(10)); //false（10 是一个数值）
alert(isNaN("10")); //false（可以被转换成数值10）
alert(isNaN("blue")); //true（不能转换成数值）
alert(isNaN(true)); //false（可以被转换成数值1）

数值转换
有3 个函数可以把非数值转换为数值：Number()、parseInt()和parseFloat()。
第一个函数，即转型函数Number()可以用于任何数据类型，而另两个函数则专门用于把字符串转换成数值

Number()函数的转换规则如下。
 如果是Boolean 值，true 和false 将分别被转换为1 和0。
 如果是数字值，只是简单的传入和返回。
 如果是null 值，返回0 。
 如果是undefined，返回NaN。
 如果是字符串，遵循下列规则：
 如果字符串中只包含数字（包括前面带正号或负号的情况），则将其转换为十进制数值，即”1” 会变成1，”123”会变成123，而”011”会变成11（注意：前导的零被忽略了）；
 如果字符串中包含有效的浮点格式，如”1.1”，则将其转换为对应的浮点数值（同样，也会忽略前导零）；
 如果字符串中包含有效的十六进制格式，例如”0xf”，则将其转换为相同大小的十进制整
数值；
 如果字符串是空的（不包含任何字符），则将其转换为0；
 如果字符串中包含除上述格式之外的字符，则将其转换为NaN。
 如果是对象，则调用对象的valueOf()方法，然后依照前面的规则转换返回的值。如果转换
的结果是NaN，则调用对象的toString()方法，然后再次依照前面的规则转换返回的字符
串值。 

var num1 = Number("Hello world!"); //NaN
var num2 = Number(""); //0
var num3 = Number("000011"); //11
var num4 = Number(true); //1

一般在处理字符串转换为数字 使用parseInt更合理

1.它会忽略字符串前面的空格，直至找到第一个非空格字符。如果第一个字符不是数字字符或者负号，parseInt()
就会返回NaN,也就是说，用parseInt()转换空字符串会返回NaN（Number()对空字符返回0）。

2.如果第一个字符是数字字符，parseInt()会继续解析第二个字符，直到解析完所有后续字符或者遇到了一个非数字字符。例如，”1234blue”会被转换为1234，因为”blue”会被完全忽略。类似地，”22.5”
会被转换为22，因为小数点并不是有效的数字字符。

3.如果字符串中的第一个字符是数字字符，parseInt()也能够识别出各种整数格式（
十进制、八进制和十六进制数）。
也就是说，如果字符串以”0x”开头且后跟数字字符，就会将其当作一
个十六进制整数；如果字符串以”0”开头且后跟数字字符，则会将其当作一个八进制数来解析。

var num1 = parseInt("1234blue"); // 1234
var num2 = parseInt(""); // NaN
var num3 = parseInt("0xA"); // 10（十六进制数）
var num4 = parseInt(22.5); // 22
var num5 = parseInt("070"); // 56（八进制数）
var num6 = parseInt("70"); // 70（十进制数）
var num7 = parseInt("0xf"); // 15（十六进制数）
指定基数会影响到转换的输出结果。例如：
var num1 = parseInt("10", 2); //2 （按二进制解析）
var num2 = parseInt("10", 8); //8 （按八进制解析）
var num3 = parseInt("10", 10); //10 （按十进制解析）
var num4 = parseInt("10", 16); //16 （按十六进制解析）

与parseInt()函数类似，parseFloat()也是从第一个字符（位置0）开始解析每个字符。而且也是一直解析到字符串末尾，或者解析到遇见一个无效的浮点数字字符为止。
也就是说，字符串中的第
一个小数点是有效的，而第二个小数点就是无效的了，

var num1 = parseFloat("1234blue"); //1234 （整数）
var num2 = parseFloat("0xA"); //0
var num3 = parseFloat("22.5"); //22.5
var num4 = parseFloat("22.34.5"); //22.34
var num5 = parseFloat("0908.5"); //908.5
var num6 = parseFloat("3.125e7"); //31250000

String

  1. 字符字面量
    比如/n /t
    字符字面量可以出现在字符串中的任意位置，而且也将被作为一个字符来解析
var text = "This is the letter sigma: \u03a3.";
alert(text.length); // 输出28

2.，字符串一旦创建，它们的值就不能改变。要改变
某个变量保存的字符串，首先要销毁原来的字符串，然后再用另一个包含新值的字符串填充该变量

这个过程是在后台发生的，而这也是在某些旧版本浏览器（例如版本低于1.0 的Firefox、IE6 等 间接解释了push效率高于+连接字符串）中拼接字符串时速度很慢的原因所在。但这些浏览器后
来的版本已经解决了这个低效率问题。

3.转换字符串
数值、布尔值、对象和字符串值（没错，每个字符串也都有一个toString()方法，该方法返回字符串的一个副本）都有toString()方法。但null 和undefined 值没有这个方法。

数值调用toString() 可传递一个基数
var num = 10;
alert(num.toString()); // "10"
alert(num.toString(2)); // "1010"
alert(num.toString(8)); // "12"
alert(num.toString(10)); // "10"
alert(num.toString(16)); // "a"

String()函数遵循下列转换规则：
 如果值有toString()方法，则调用该方法（没有参数）并返回相应的结果；
 如果值是null，则返回”null”；
 如果值是undefined，则返回”undefined”。

Object

Object 的每个实例都具有下列属性和方法。
 constructor：保存着用于创建当前对象的函数。对于前面的例子而言，构造函数（constructor）就是Object()。
 hasOwnProperty(propertyName)：用于检查给定的属性在当前对象实例中（而不是在实例的原型中）是否存在。其中，作为参数的属性名（propertyName）必须以字符串形式指定（例如：o.hasOwnProperty(“name”)）。
 isPrototypeOf(object)：用于检查传入的对象是否是传入对象的原型（第5 章将讨论原
型）。
 propertyIsEnumerable(propertyName)：用于检查给定的属性是否能够使用for-in 语句
（本章后面将会讨论）来枚举。与hasOwnProperty()方法一样，作为参数的属性名必须以字符串形式指定。
 toLocaleString()：返回对象的字符串表示，该字符串与执行环境的地区对应。
 toString()：返回对象的字符串表示。
 valueOf()：返回对象的字符串、数值或布尔值表示。通常与toString()方法的返回值
相同。 

function car(){this.name='sbx';this.age="1234"}
var car1=new car()
car.prototype.sex="nv"
car1.constructor//car(){this.name='sbx';this.age="1234"}
car1.hasOwnProperty("name")//true
car1.hasOwnProperty("sex")//false
car.prototype.isPrototypeOf(car1)//true
car1.propertyIsEnumerable("age")//true
car1.propertyIsEnumerable("sex")//false
car1.toLocaleString()//"[object Object]"
car1.toString()//"[object Object]"
car1.valueOf()//car {name: "sbx", age: "1234"}

操作符

相等操作符

相等和不相等——先转换再比较，全等和不全等——仅比较而不转换。
== 和=== 对比

== 相等（转换值比较）=== 全等（值和类型都要比较）
=== 类型不同 就不相等 ，有一个值为NaN 也不相等

– – – — —
== -0==0 true 1==true true 5==’5’ true null==undefined true
=== -0===0 true 1===true false 5===’5’ false null===undefined false

语句

for-in 枚举对象的属性

break 和continue 语句用于在循环中精确地控制代码的执行。其中，break 语句会立即退出循环，
强制继续执行循环后面的语句。而continue 语句虽然也是立即退出循环，但退出循环后会从循环的顶部继续执行

var num = 0;
for (var i=1; i < 10; i++) {
if (i % 5 == 0) {
continue;
}
num++;console.log(i+"  "+num);
}
2016-10-24 17:25:25.549 VM11823:6 1  1
2016-10-24 17:25:25.550 VM11823:6 2  2
2016-10-24 17:25:25.551 VM11823:6 3  3
2016-10-24 17:25:25.551 VM11823:6 4  4
2016-10-24 17:25:25.552 VM11823:6 6  5
2016-10-24 17:25:25.552 VM11823:6 7  6
2016-10-24 17:25:25.552 VM11823:6 8  7
2016-10-24 17:25:25.555 VM11823:6 9  8
var num = 0;
for (var i=1; i < 10; i++) {
if (i % 5 == 0) {
break;
}
num++;console.log(i+"  "+num);
}
2016-10-24 17:27:22.372 VM11824:6 1  1
2016-10-24 17:27:22.372 VM11824:6 2  2
2016-10-24 17:27:22.372 VM11824:6 3  3
2016-10-24 17:27:22.373 VM11824:6 4  4

变量作用域和内存问题

执行环境和作用域

作用域链延长 try-catch语句和catch块 with语句
javascript没有块级作用域

for (var i=0; i < 10; i++){
doSomething(i);
}
alert(i); //10

对于有块级作用域的语言来说，for 语句初始化变量的表达式所定义的变量，只会存在于循环的环
境之中。而对于JavaScript 来说，由for 语句创建的变量i 即使在for 循环执行结束后，也依旧会存在
于循环外部的执行环境中。

垃圾收集

标记清除（常用）
垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记（当然，可以使用任何标记方
式）。然后，它会去掉环境中的变量以及被环境中的变量引用的变量的标记。而在此之后再被加上标记
的变量将被视为准备删除的变量，原因是环境中的变量已经无法访问到这些变量了。最后，垃圾收集器
完成内存清除工作，销毁那些带标记的值并回收它们所占用的内存空间。
引用计数（不太常见）
引用计数的含义是跟踪记录每个值被引用的次数

函数表达式

面向对象程度设计

原型链

sunbaixin wechat
欢迎您扫一扫上面的微信公众号，订阅我的博客！