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

JavaScript高级程序设计学习笔记

1.对JavaScript实现各个组成部分的详尽解读
2.对JavaScript面向对象编程的全方位阐述
3.DOM，BOM及浏览器事件模型的透彻剖析
4.Web应用基本数据格式JSON，XML及存取
5.Ajax，Comet服务器端通信和基于File API的拖放式文件上传
6.ECMAScript 5定义的最核心语言特性
7.HTML 5涵盖的表单，媒体，Canvas（包括WebGL）
8.Selectors、Web Workers、地理定位及跨文档传递消息等最新API
9.离线应用及客户端存储（包括IndexedDB）
10.维护、性能、部署相关的最佳开发实践
11.新兴API及ECMAScript Harmony展望

对JavaScript实现各个组成部分的详尽解读

引用类型(i`m important)

3.Date类型

---

var now =new Date();//Mon Mar 04 2019 20:12:06 GMT+0800 (中国标准时间)

继承的方法
     和其他引用类型一样，Date类型重写了toLocalString（）、toString（）和valueOf（）方法。这些方法在不同的浏览器返回的值都有差别。

日期格式化方法

var data=new Date();
alert(data.toDateString());//Mon, 04 Mar 2019 12:21:02 GMT
alert(data.toTimeString());//20:22:23 GMT+0800 (中国标准时间)
alert(data.toLocaleDateString());//2019/3/4
alert(data.toLocaleTimeString());//下午8:23:05
alert(data.toUTCString());//Mon, 04 Mar 2019 12:23:24 GMT

---

4.RegExp类型（简要）

---

     ECMAScript通过RegExp类型支持正则表达式。var expression=/pattern/flag;其中pattern表示正则表达式 ；flag表示标志用来表明正则表达式的行为。正则表达式匹配模式支持3个标志：

• g：表示全局模式（global），模式应用于所有的字符串，并非在发现第一个匹配项时就停止。
• i：表示不区分大小写（case-insensitive）模式，即确定匹配项时会忽略字符串的大小写。
• m：表示多行（multiline）模式，在多行字符串里面会一直寻找，不会在一行结束后就结束。
  
       下面的元字符必须要经过转义才可以使用：
       {,},[,],|,,^,$,?,*,+,.
       RegExp对象主要方法是exec()。接受一个参数，即要应用模式的字符串，然后返回包含第一个包含匹配项信息的数组。没有匹配项时返回null。

var text="mom and dad and baby";
var pattern=/mom/gi;
var matches=pattern.exec(text);
alert(matches.index);//0
alert(matches.input);//mom and dad and baby

     当字符串传入exec（）方法之后，发现一个匹配项。因为整个字符串匹配，所以返回数组的matchs的index属性为0。exec（）方法，即使设置了全局标志（g），但是始终返回第一匹配信息。

5.Function类型

---

函数定义

function sum（num1，num2）{
      return num1+num2；
}
var sum=function（num1，num2）{
      return num1+num2；
}

     上面两种定义函数的方法类似。由于函数是对象，因此函数名实际上也是一个指向函数对象的指针。

没有重载
     ECMAScript没有函数重载的概念。如果有两个同名的函数，后面一个函数会覆盖掉前面的函数。

函数声明与函数表达式
     解析器会先读取函数声明，在代码执行前可以访问。

作为值的函数
1）可以像传递参数一样把一个函数传递给另一个函数。格式如下：
function callSomeFunction（someFunction，someArgument）{
return someFunction（someArgument）;
}

function add10（num）{
     return num+10；
}
var result =callSomeFunction（add10，10）；
alert（result）；//20

2）可以将一个函数作为另一个函数的结果返回

function compareFunction(properName) {
    return function (object1,object2) {
        var value1=object1[properName];
        var value2=object2[properName];
        if (value1<value2){
            return -1;
        } else if (value1>value2){
            return 1
        } else {
            return 0;
        }
    };
}
var data=[{name:"zxcvbnm",age:24},{name:"asdfghj",age:26}];
data.sort(compareFunction("name"));
alert(data[0].name);//asdfghj
data.sort(compareFunction("age"));
alert(data[0].name);//zxcvbnm

函数内部属性

function factorial(num) {
    if (num<=1){
        return 1;
    } else{
        return num*factorial(num-1);//return num*arguments.callee(num-1);
    }
}
alert(factorial(4));//24

     上面对于递归可以改为arguments.callee消除函数的执行和函数名factorial紧密耦合的情况。

函数的属性和方法
     ECMAscript中的函数是对象，因此函数有属性和方法。每个函数包含两个属性：length和prototype。
1)length

function sayName（name）{
      return name；
}
function sayHi（）{
     alert（“hi”）；
}
alert(sayName.length);//1
alert(sayHi);//0

     length属性表示函数接受命名参数的个数。
2)prototype
     对于ECMAScript中的引用类型而言，prototype是保存他们所有实例方法的真正所在。例如toString（）和valueOf（）等方法实际上保存在prototype名下。其中prototype属性不可枚举，因此使用for-in无法发现。
     每个方法都包括两个非继承的方法：apply（）和call（）。这两个方法用途在特定作用域调用函数，实际上等于设置函数体内this对象的值。
apply()：

function sum(num1,num2) {
    return num1+num2;
}
function callSum1(num1,num2) {
    return sum.apply(this,arguments);
}
function callSum2(num1,num2) {
    return sum.apply(this,[num1,num2]);
}
alert(callSum1(10,10));//20
alert(callSum2(100,200));//300

     callSum1（）调用sum（）函数，传入this作为this值（由于在全局作用域调用，传入为window对象）和arguments对象。callSum2也调用了sum（）函数，但是传入是this和一个参数数组。
     call（）与apply（）方法作用类似。
     但是对于这两个方法来说，最重要的作用还是扩充了函数的作用域。

window.color="red";
var o=function () {
    return color="blue";
};
var f={color:"blue"};
function sayColor() {
    alert(this.color);
}
sayColor.call(this);//red
sayColor.call(window);//red
sayColor.call(o);//undefined
sayColor.call(f);//blue

函数的属性和方法
     为了便于操作基本类型值，ECMAScript还提供3个特殊的引用类：Boolean、Number和String。如下例：

var s1="some text";
s1.color="red";
alert(s1.color);//undefined

     第二行试图为s1字符串添加一个color属性。但是在第三行访问时，其color属性无法访问。原因在于第二行创建的string对象在执行第三行代码的时候已经被销毁。即基本类型在创建属性和方法时，立即被销毁。

6.基本包装类型

---

     问：如何区别类型？
     答：利用typeOf（）方法，得到Object为引用类型；否则为基本类型。
1.Boolean类型

var falseObject=new Boolean(false);
var result=falseObject && true;
alert(result);//true

var falseValue=false;
result=falseValue && true;
alert(result);//false

• 布尔表达式中所有对象都会被转化为true，所以对于第一段代码结果就只能返回true
• 注意引用类型和基本类型在创建时候的区别

2.Number类型

var numberObject=new Number(10);
var num=10;
alert(numberObject.toString(16));//a
alert(num.toString(2));//1010

     对于Number类型来说，valueOf（）方法返回对象表示的基本类型的数值；toString（）可以按照规定的进制输出数据；toFixed（）可以按照规定的小数位以浮点数的形式返回数值；toExponential（）可以按照规定的小数位以科学计数法的形式返回数值；toPrecision（）可以根据数据形式对数据选择toFixed（）或者是toExponential（）。

3.String类型

1. 字符方法：charAt()和charCodeAt()方法。其中对于charAt()来说，输出相应位置的字符值；而charCodeAt()输出相应位置字符对应的字符编码。
2. 字符串操作方法：利用concat()方法对字符串进行拼接；利用slice()/substirng()/substr()方法对字符串进行删减【一个参数：删除到参数位置；slice()和substring()：两个参数：从起始位置（参数1）保留到结束位置（参数2），剩下的都删除。substr()：两个参数：从起始位置（参数1）保留的字符数（参数2），剩下的都删除。】【如果参数为负值：slice()负值与长度相加；substring()第一个参数与长度相加，第二个负参数为0；substr()负值转化为0】
3. 字符串位置方法：利用indexOf（）和lastIndexOf（）。其中indexOf（）为从前向后寻找；lastIndexOf（）为从后向前寻找。【一个参数：要寻找的字符值；两个参数：寻找的字符值+寻找的起始位置】
4. 字符串大小转化方法利用toLowCase（）和toLocaleLowerCase（）、toUpperCase（）和toLocaleUpperCase（）方法。其中toLowCase（）和toUpperCase（）借鉴Java.lang.String的经典方法。其他两个针对地区方法。在不知道代码运行的语言环境时可以利用针对地区的方法更稳妥。
5. 字符串模式匹配模式

var text ="cat,bat,sat,fat";
var pattern=/.at/;
var match=text.match(pattern);//可以替换为 pattern.exec(text);结果一样
alert(match);//cat

     match()只接受一个参数，要么是正则表达式，要么是RexExp对象。对于RexExp可以设置全局标志。match()返回的是一个数组。
     字符串匹配还有search()。参数与match()相同，但是search()返回的是字符串中第一个匹配项的索引。如果没找到匹配项，则返回-1。
     对于字符串替换：replace（），接受两个参数。第一个参数可以是RegExp对象或者一个字符串，第二个参数可以是一个字符或者是一个函数。第二个参数是字符串，可以使用一些特殊的字符序列。

var text ="cat,bat,sat,fat";
var match1=text.replace(/(.at)/,"word($')");
var match2=text.replace(/(.at)/g,"world($1)");
alert(match1);// word(,bat,sat,fat),bat,sat,fat
alert(match2);// world(cat),world(bat),world(sat),world(fat)

     上面的代码，对于match1（），replace第二个参数为word($’)，$'表示与RegExp.leftContext的值相同。找到与字符串相匹配的字符的右边部分，将括号内$'换成字符串。对于match2（），replace第一个参数有全局标志，第二个参数为$1，找到字符串中与正则表达式相同的数组项，进行替换。
     localCompare()方法：比较两个字符串，并且返回下面的值任何一个：字符串在字母表中在字符串参数前，返回-1；字符串等于字符参数，返回0；字符串在字母表中在字符串参数后，返回1。
     fromCharCode()方法：这个方法主要是接受字符编码转化为一个字符串。

var stringValue="yellow";
alert(stringValue.localeCompare("abandon"));//1
alert(stringValue.localeCompare("yellow"));//0
alert(stringValue.localeCompare("zoo"));//-1

方法	作用和参数
match()	字符串匹配；一个参数（正则表达式/RegExp对象）；返回为匹配到的字符串数据项
search()	字符串匹配；一个参数（正则表达式/RegExp对象）；返回为匹配到的字符串的索引
replace()	字符串替换；两个参数（正则表达式/RegExp对象，要替换成替换的字符串）；返回替换后的字符串
localCompare()	字符串匹配；一个参数（字符串）；返回为1,0，-1
fromCharCode()	字符串替换字符编码；一个参数（字符编码）；返回替换后的字符串

7.单体内置对象

     内置对象定义：由ECMAScript实现提供、不依赖于宿主环境的对象，这些对象在ECMAScript程序执行之前已经存在。

---

Global对象

函数	区别
encodeURI()	对于整个URI进行编码；结果除空格（%20）之外其他字符不动
encodeURIComponent()	对于整个URI的某一段进行编码；使用对应的编码替换所有的非字母数字字符
decodeURI()	对应encodeURI()
decodeURIComponent()	对应encodeURI

     eval()方法就是一个完整的ECMAScript解析器，只接受一个参数，要执行的ECMAScript代码。【注意会有恶意用户恶意注入代码】
Math对象
     对于JavaScript直接编写的计算功能相比，Math对象提供的计算功能执行要快很多。
1.Math对象的属性
     特殊值：

2.最大值和最小值
     min()表示最小值；max()表示最大值

3.舍入方法
     小数值舍入为整数的几个方法：

• Math.ceil()向上舍入【进一】
• MAth.floor()向下舍入【舍去】
• Math.round()标准舍入【四舍五入】

4.random()方法
     Math.random()方法返回介于0~1之间的一个随机数，不包括0和1.公式如下：
     值=Math.floor(Math.random()*可能的值的总数+第一个可能的值)
     注意这里用的是Math.floor()方法，这是因为Math.random()总返回一个小数值。

var num=Math.floor(Math.random()*10+1);//1~10之间的随机数

     随机数函数（记住）：

function selectNumber(num1,num2) {
    var choices=num2-num1+1;
    var num=Math.floor(Math.random()*choices+num1);
    return num;
}
var end=selectNumber(1,100);
alert(end);//1~100之间的随机数

5.其他方法

---

小结

• 引用类型和传统面向对象程序设计有什么相似，有什么不同？
• JavaScript中有哪些引用类型，列举其中几种，分别简述它们的作用？
• 对于JavaScript来说，其中的基本类型可以当做对象访问。对于他们怎么进行区别，与基本类型的区别？
• 在代码执行前，作用域存在两个内置对象，分别是什么？