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

柔光的暖阳◎ 2022-03-12 02:22 197阅读 0赞

# 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）模式，在多行字符串里面会一直寻找，不会在一行结束后就结束。  
    ![代码例子][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lJWUlZSUJVUlVYSU4_size_16_color_FFFFFF_t_70]  
         下面的元字符必须要经过转义才可以使用：  
         \{,\},\[,\],|,,^,$,?,\*,+,.  
         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）可以将一个函数作为另一个函数的结果返回

函数内部属性

上面对于递归可以改为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()：

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

函数的属性和方法  
     为了便于操作基本类型值，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对象或者一个字符串，第二个参数可以是一个字符或者是一个函数。第二个参数是字符串，可以使用一些特殊的字符序列。  
![特殊的字符序列][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lJWUlZSUJVUlVYSU4_size_16_color_FFFFFF_t_70 1]

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

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

**7.单体内置对象**

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

--------------------

Global对象  
![为什么要对URI进行编码][URI]

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

eval()方法就是一个完整的ECMAScript解析器，只接受一个参数，要执行的ECMAScript代码。【注意会有恶意用户恶意注入代码】  
Math对象  
     对于JavaScript直接编写的计算功能相比，Math对象提供的计算功能执行要快很多。  
1.Math对象的属性  
     特殊值：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lJWUlZSUJVUlVYSU4_size_16_color_FFFFFF_t_70 2]  
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.其他方法  
![Math的方法][Math]

--------------------

## 小结 ##

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lJWUlZSUJVUlVYSU4_size_16_color_FFFFFF_t_70]: /images/20220312/947dbb436a7046ddb4c8a63610f33d62.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lJWUlZSUJVUlVYSU4_size_16_color_FFFFFF_t_70 1]: /images/20220312/3467d92713964f6297e87c6e62a21d91.png
[URI]: /images/20220312/0cde137ee9614ca982ab4c2be67e1706.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lJWUlZSUJVUlVYSU4_size_16_color_FFFFFF_t_70 2]: /images/20220312/65747f522c264ae6923e09fa7d265e29.png
[Math]: /images/20220312/6485ee5a5e7646319373d6cd3f6e024a.png