《JavaScript高级程序设计》学习笔记 基本概念

系统学习JS,

从《JavaScript高级程序设计》入门,通过学习jQuery或者angularJS源码来进阶。

第1章 JavaScript简介

1.JS问世的目的是处理以前由服务器端语言(如Perl)负责的一些输入验证操作,
由Netscape主导开发,那时候微软的IE还不能独领风骚。最初叫做LiveScript,当时媒体热炒Java,于是改名为JavaScript。
JavaScript和ECMAScript通常指同一门语言,但是,JavaScript是ECMA-262标准的实现和扩展。ECMAScript应该被称作JavaScript的子集。

2.一个完整的JavaScript实现应该由下列三个不同的部分组成:
核心(ECMAScript)
ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会)通过ECMA-262标准化的脚本程序设计语言。
文档对象模型(DOM)
是针对XML但经过扩展用于HTML的应用程序编程接口,即API。DOM把整个页面映射为一个多层节点结构。
HTML或XML页面中的每个组成部分都是某种类型的节点,这些节点又包含着不同类型的数据。
浏览器对象模型(BOM)。
开发人员使用BOM可以控制浏览器显示的页面以外的部分。但是BOM并没有相关的标准,直到HTML5的出现。HTML5把很多的BOM功能写入正式规范。

第2章 在HTML中使用JavaScript

1.只要你在大学课堂上了解过HTML页面,就不会对这个陌生。
向HTML页面中插入JavaScript的主要方法,就是使用<Script>元素。使用这个元素可以让脚本与标记混合在一起,也可以包含外部的JavaScript文件。随便打开一个网页,查看源代码或者是F12,就会了解到如何在页面中嵌入JS脚本。

需要注意的是,<Script>元素会按照它们在页面中出现的先后顺序被解析。使用defer和async属性可以控制解析的顺序。defer 属性可以让脚本在文档完全呈现之后再执行。async属性表示当前脚本可以异步执行,不必等待其他脚本,也不必阻塞文档呈现。

不过,async 属性仅适用于外部脚本(只有在使用 src 属性时),这也是HTML5的新属性。

2.<noscript>元素可以指定在不支持脚本的浏览器中显示的替代内容。但是如果页面启用了脚本。
<noscript>标签中的元素就会如同被注释掉一样不会显示。

不过现在不支持脚本语言的浏览器应该找不到了吧?
下面是W3C的一段页面代码,简洁明了:

<body>
...
...
<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
<noscript>Your browser does not support JavaScript!</noscript>

</body>

第3章 基本概念
这一章介绍了JS基本的语法。JS的语法和C语言或者其他编程语言类似,简单整理,重点学习JavaScript的特性。

1.ECMAScript 5 引入了严格模式(strict mode)的概念。严格模式为JS定义了一种不同的解析与执行模型。
在顶部添加代码:"use strict"即可。

2.关于ECMAScript的关键字,下面说明相关的用途。
break
do
instanceof typeof 和 instanceof 常用来判断一个变量是否为空,或者是什么类型的,

typeof 对一个值使用typeof操作符,可能返回下列某个字符串:
undifined boolean string number object
function ——如果这个值是函数。

debugger
default
delete 可以删除对象的某个属性

注意,以下的列表词组也许在其他的语言,比如C、Java等都是关键字,但是在JS中并没有实质的意义,
被称作保留字,同样不能用作标识符。保留字可以方便JS以后的扩展,也可以防止程序被误读。
当然,不同的ECMAScript版本对保留字的限制有区别。
abstract
boolean break byte
case catch char class const continue
debugger default delete do double
else enum export extends
false final finally float for function goto
if implements import in instanceof int interface
long native new null
package private protected public
return
short static super switch synchronized
this throw throws transient true try typeof
var void volatile
while with

3.定义变量时使用var操作符,如:var message;
这行代码定义了一个名为message的变量,该变量可以用来保存任何值,初始化以前,会保存一个特殊的值——undefined,
当然也可以直接初始化:var message = "hi";
和Java等语言一眼,JS的变量也有作用域,所有使用var定义的变量将成为定义该变量的作用域中的局部变量,如果省略var,
就可以创建一个全局变量。不过并不推荐这样做。比如:

function test(){
var message = "hi";//局部变量
}
test();
alert(message);//错误,去掉var则正确、

4.ECMAScript有5种简单数据类型:Undefined/Null/Boolean/Number和String,另外一种复杂数据类型,Object,
Object本质上是由一组无序的名值对组成的。
特别的,要理解Undefined类型的意义,作用在于正式区分对象指针与未经初始化的变量。

和Undefined类似,Null类型也是只有一个值的数据类型,null值表示一个空对象指针,所以使用typeof检测null值时会返回"object"。

var car = null;
alert(typeof car); //"object"

如果定义的变量准备用于保存对象,那么最好将该变量初始化为null,这样检查null值就可以知道是否已经保存一个对象的引用。

if( car = null ){
//执行操作
}

另外,undefined的值派生自null值,所以:
alert(null == undefined); //true

5.Boolean 类型有个函数特别好玩,

var msg = "hello world!";
var msgAsBoolean= Boolean(msg);
在其他的编程语言中,肯定想不到还有这样的用法。
Boolean true false
String 任何非空字符串 "" 空字符串
Number 任何非零数值 0和NaN
Object 任何对象 null
Undefined n/a undifined

这些转换规则应用在流控制语句,如if语句中。

var msg= "hello world!";
if(msg){
alert("value is true!");
}

如果不了解上面的规则,肯定很难理解这段代码。

6.与其他语言不同,ECMAScript 没有为整数和浮点数值分别定义不同的数据类型,Number类型可用于表示所有数值。
Number类型对不同进制数据的处理,
var num1=070; //八进制的56
var num2=079; //无效的八进制——79
var num3=08; //无效的八进制——8

String 类型,双引号或者单引号都可以表示,

Object类型是ECMAScript中所有对象的基础类型。

7.JS的语句与其他编程语言类似,比如
for-in语句用来迭代,for(property in expression) statement,如

for(var proName in window){
document.write(proName);
}

使用Label语句可以在代码中添加标签,以便将来使用:
label: statement,如

start:for(var i=0;i<count;i++){
alert(i);
}

with语句的作用是将代码的作用域设置到一个特定的对象中。
with (expression)statement

8.ECMAScript 函数不存在函数签名的特性。没有重载,相同的语法出现在在JS中,只有后定义的函数有效。

9.
《JavaScript语言精粹》一书中列出了一些不建议的JS语法,我们来看一下。

1. ==
Javascript有两组相等运算符,一组是==和!=,另一组是===和!==。前者只比较值的相等,后者除了值以外,还比较类型是否相同。
请尽量不要使用前一组,永远只使用===和!==。因为==默认会进行类型转换,规则十分难记。如果你不相信的话,请回答下面五个判断式的值是true还是false:
  false == ‘false‘
  false == undefined
  false == null
  null == undefined
  0 == ‘‘
前三个是false,后两个是true。
2. with
with的本意是减少键盘输入。比如
  obj.a = obj.b;
  obj.c = obj.d;
可以简写成
  with(obj) {
    a = b;
    c = d;
  }
但是,在实际运行时,解释器会首先判断obj.b和obj.d是否存在,如果不存在的话,再判断全局变量b和d是否存在。这样就导致了低效率,而且可能会导致意外,因此最好不要使用with语句。
3. eval
eval用来直接执行一个字符串。这条语句也是不应该使用的,因为它有性能和安全性的问题,并且使得代码更难阅读。
eval能够做到的事情,不用它也能做到。比如
  eval("myValue = myObject." + myKey + ";");
可以直接写成
  myValue = myObject[myKey];
至于ajax操作返回的json字符串,可以使用官方网站提供的解析器json_parse.js运行。
4. continue
这条命令的作用是返回到循环的头部,但是循环本来就会返回到头部。所以通过适当的构造,完全可以避免使用这条命令,使得效率得到改善。
5. switch 贯穿
switch结构中的case语句,默认是顺序执行,除非遇到break,return和throw。有的程序员喜欢利用这个特点,比如
  switch(n) {
    case 1:
    case 2:
      break;
  }
这样写容易出错,而且难以发现。因此建议避免switch贯穿,凡是有case的地方,一律加上break。
  switch(n) {
    case 1:
      break;
    case 2:
      break;
  }
6. 单行的块结构
if、while、do和for,都是块结构语句,但是也可以接受单行命令。比如
  if (ok) t = true;
甚至写成
  if (ok)
    t = true;
这样不利于阅读代码,而且将来添加语句时非常容易出错。建议不管是否只有一行命令,都一律加上大括号。
  if (ok){
    t = true;
  }
7. ++和--
递增运算符++和递减运算符--,直接来自C语言,表面上可以让代码变得很紧凑,但是实际上会让代码看上去更复杂和更晦涩。因此为了代码的整洁性和易读性,不用为好。
8. 位运算符
Javascript完全套用了Java的位运算符,包括按位与&、按位或|、按位异或^、按位非~、左移<<、带符号的右移>>和用0补足的右移>>>。
这套运算符针对的是整数,所以对Javascript完全无用,因为Javascript内部,所有数字都保存为双精度浮点数。如果使用它们的话,Javascript不得不将运算数先转为整数,然后再进行运算,这样就降低了速度。而且"按位与运算符"&同"逻辑与运算符"&&,很容易混淆。
9. function语句
在Javascript中定义一个函数,有两种写法:
  function foo() { }
和
  var foo = function () { }
两种写法完全等价。但是在解析的时候,前一种写法会被解析器自动提升到代码的头部,因此违背了函数应该先定义后使用的要求,所以建议定义函数时,全部采用后一种写法。
10. 基本数据类型的包装对象
Javascript的基本数据类型包括字符串、数字、布尔值,它们都有对应的包装对象String、Number和Boolean。所以,有人会这样定义相关值:
  new String("Hello World");
  new Number(2000);
  new Boolean(false);
这样写完全没有必要,而且非常费解,因此建议不要使用。
另外,new Object和new Array也不建议使用,可以用{}和[]代替。
11. new语句
Javascript是世界上第一个被大量使用的支持Lambda函数的语言,本质上属于与Lisp同类的函数式编程语言。但是当前世界,90%以上的程序员都是使用面向对象编程。为了靠近主流,Javascript做出了妥协,采纳了类的概念,允许根据类生成对象。
类是这样定义的:
  var Cat = function (name) {
    this.name = name;
    this.saying = ‘meow‘ ;
  }
然后,再生成一个对象
  var myCat = new Cat(‘mimi‘);
这种利用函数生成类、利用new生成对象的语法,其实非常奇怪,一点都不符合直觉。而且,使用的时候,很容易忘记加上new,就会变成执行函数,然后莫名其妙多出几个全局变量。所以,建议不要这样创建对象,而采用一种变通方法。
Douglas Crockford给出了一个函数:
  Object.beget = function (o) {
    var F = function (o) {};
    F.prototype = o ;
    return new F;
  };
创建对象时就利用这个函数,对原型对象进行操作:
  var Cat = {
    name:‘‘,
    saying:‘meow‘
  };
  var myCat = Object.beget(Cat);
对象生成后,可以自行对相关属性进行赋值:
  myCat.name = ‘mimi‘;
12. void
在大多数语言中,void都是一种类型,表示没有值。但是在Javascript中,void是一个运算符,接受一个运算数,并返回undefined。
  void 0; // undefined
这个命令没什么用,而且很令人困惑,建议避免使用。
时间: 2024-10-19 23:47:46

《JavaScript高级程序设计》学习笔记 基本概念的相关文章

JavaScript高级程序设计学习笔记--基本概念

1.语句 ECMAScript中的语句以一个分号结尾:如果省略分号,则由解析器确定语句的结尾,如下例所示: var sum=a+b //即使没有分号也是有效的语句--推荐 var diff=a-b; //有效的语句--推荐 虽然语句结尾的分号不是必需的,但我们建议任何时候都不要省略它.两个原因:1.加上分号可以避免很多错误 2.加上分号也会在某些情况下增进代码的性能,因为这样解析器就不必再花时间 推测应该在哪里插入分号了. 2.变量 var message="hi"; 像这样初始化变量

Javascript高级程序设计学习笔记

3. 基本概念 基本数据类型:Undefined,Null,Boolean,Number,String. 复杂数据类型:Object. 3.6 语句 switch比较值时用的是全等运算符 “===” ,因此不会进行类型转换.例如 “10” 不等于10. 3.7 函数 ECMAScript函数不介意传递进来多少个参数,也不在乎参数的类型.即使定义的函数只接受两个参数,在调用的时候也可以传递任意多个或者0个.因为ECMAScript的参数在内部是用一个数组表示的,在函数体内部可以通过argument

JavaScript高级程序设计学习笔记--错误处理与调试

try-catch语句 只要代码中包含finally子句,则无论try或catch语句块中包含什么代码--甚至return语句,都不会阻止finally子句的执行,来看下面这个函数: function testFinally(){ try{ return 2; }catch(error){ return 1; }finally{ return 0; } } 调用这个函数会返回0(PS:但我实际执行的时候会先返回0,再返回2) 抛出错误 与try-catch语句相配的还有一个throw操作符,用于

JavaScript高级程序设计学习笔记--面向对象程序设计

工厂模式 虽然Object构造函数或对象字面量都可以用来创建单个对象,但这些方式有个明显的缺点:使用同一个接口创建很多对象,会产生大量的重复代码.为解决这个问题,人们开始使用 工厂模式的一种变体. function createPerson(name,age,job){ var o=new Object(); o.name=name; o.age=age; o.job=job; o.sayName=function(){ alert(this.name); }; return o; } var

JavaScript高级程序设计学习笔记--高级技巧

惰性载入函数 因为浏览器之间行为的差异,多数JavaScript代码包含了大量的if语句,将执行引导到正确的代码中,看看下面来自上一章的createXHR()函数. function createXHR(){ if (typeof XMLHttpRequest != "undefined"){ return new XMLHttpRequest(); } else if (typeof ActiveXObject != "undefined"){ if (typeo

JavaScript高级程序设计学习笔记--DOM

DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序接口). Document类型 文档的子节点 虽然DOM标准规定Document节点的子节点可以是DocumentType,Element,ProcessingInstruction或Comment,但还有两个内置的访问其子节点的快捷方式.第一个就是documnetElement属性,该属性始终指向HTML页面中的<html>元素.另一个就是通过childNodes列表访问文档元素,但通过documentElement属性则

JavaScript高级程序设计学习笔记--BOM

window对象 BOM的核心对象是window,它表示浏览器的一个实例.在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMScript规定的Global对象. 全局作用域 由于window对象同时扮演着ECMAScript中Global对象的角色,因此所有在全局作用域中声明的变量.函数都会变成window对象的属性和方法.来看下面的例子: var age=29; function sayAge(){ alert(this.age); }

JavaScript高级程序设计学习笔记--引用类型

Object类型 对象字面量表示法: var person={ name:"Nicholas", age:29, 5:true }; 这人例子会创建一个对象,包含三个属性:name,age和5.但这里的数值属性名会自动转换为字符串. 对象属性的访问:点表示法和方括号语法 alert(person["name"]); // "Nicholas" alert(person.name); // "Nicholas" 从功能上看,这两

javascript 高级程序设计 学习笔记01章 javascript的认知

hello world: 大家早上好 ,所谓一年之计在于春,一日之计在于晨.今天开始学习 高级程序设计第三版 第二遍 以前以迅雷不及掩耳之势草草看过一遍 ,但是什么也没记住 已经忘得差不多了.哈哈,原来我不是黄蓉,也不是天才,还是那句话 好记性不如烂笔头.这次学习高级程序设计第三版 是有目标的,有目的性的.所以我会把 每一章学习的心得和笔记 都记录在此.于己于人都方便.废话不多说 ,开始吧 今天的第一张 ,javascript 的实现.张鑫旭大神说过 非it(计算机专业的)的前端从业人员 学习j

JavaScript高级程序设计---学习笔记(三)

函数表达式 定义函数的方式有两种:一种是函数声明,另一种是函数表达式. 关于函数声明,它的一个重要特征就是函数声明提升,意思是在执行代码之前会先读取函数声明所以可以把函数声明放在调用它的语句后面. 而函数表达式必须在调用它之前定义. 1.递归 递归函数是在一个函数通过名字调用自身的情况下构成的,如: function factorial(num){ if(num <= 1){ return 1; }else{ return num * factorial(num - 1); } } 这是一个经典