JavaScript高级程序设计学习笔记（四）

今天分享一下第五章（引用类型）下半部分的笔记。
上半部分的笔记可以浏览JavaScript高级程序设计学习笔记（三）
以下的笔记是书上一些我以前学习的时候，没有太重视的js基础知识，也有一些面试知识的拓展，通过博客回顾并加深理解。

第五章（下）

引用类型

Function 类型

由于函数实际上是对象。每个函数都是 Function 类型的实例，而且都与其他引用类型一样具有属性和方法。

函数声明和定义

函数通常是使用函数声明语法定义的，如下面的例子所示。

function sum (num1, num2) {
    return num1 + num2;
}

这与下面使用函数表达式定义函数的方式几乎相差无几。

var sum = function(num1, num2){
    return num1 + num2;
};

后一种定义函数的方式是使用 Function 构造函数。Function 构造函数可以接收任意数量的参数， 但后一个参数始终都被看成是函数体，而前面的参数则枚举出了新函数的参数。来看下面的例子：

var sum = new Function("num1", "num2", "return num1 + num2"); 
// 不推荐

没有重载

由于函数是对象，因此函数名实际上也是一个指向函数对象的指针。当出现两个同名函数的时候，后面的函数会覆盖前面的函数。

函数声明与函数表达式

函数声明和函数表达式是两种常见的定义函数的方法。实际上，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非一视同仁。解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问）；至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解释执行。请看下面的例子。

alert(sum(10,10));  //20 正常运行
function sum(num1, num2){ 
    return num1 + num2;
}

以上代码完全可以正常运行。因为在代码开始执行之前，解析器就已经通过一个名为函数声明提升 （function declaration hoisting）的过程，读取并将函数声明添加到执行环境中。对代码求值时，JavaScript 引擎在第一遍会声明函数并将它们放到源代码树的顶部。所以，即使声明函数的代码在调用它的代码后面，JavaScript 引擎也能把函数声明提升到顶部。
如果像下面例子所示的，把上面的函数声明改为等价的函数表达式，就会在执行期间导致错误。

alert(sum(10,10));  //Error: sum is not a function
var sum = function(num1, num2){    
    return num1 + num2;
}; 

以上代码之所以会在运行期间产生错误，原因在于函数位于一个初始化语句中，而不是一个函数声明。换句话说，执行到函数所在的语句之前，变量 sum 中不会保存有对函数的引用；而且，由于第一行代码就会导致“unexpected identifier”（意外标识符）错误，实际上也不会执行到下一行。

作为值的函数

因为 ECMAScript中的函数名本身就是变量，所以函数也可以作为值来使用。也就是说，不仅可以 像传递参数一样把一个函数传递给另一个函数，而且可以将一个函数作为另一个函数的结果返回。

function callSomeFunction(someFunction, someArgument){
    return someFunction(someArgument);
}

除此之外，还可以从一个函数中返回另一个函数。假设有一个对象数组，我们想要根据某个对象属性对数组进行排序。而传递给数组的sort()方法的比较函数要接收两个参数，即要比较的值。要解决这个问题， 可以定义一个函数，它接收一个属性名，然后根据这个属性名来创建一个比较函数。

function createComparisonFunction(propertyName) { 
    //升序
    return function(object1, object2){         
        var value1 = object1[propertyName];         
        var value2 = object2[propertyName]; 
        if (value1 < value2){             
            return -1;         
        } else if (value1 > value2){
            return 1;         
        } else {             
            return 0;         
        }     
    };
}
var data = [{name: "Zachary", age: 28}, {name: "Nicholas", age: 29}]; 
 
data.sort(createComparisonFunction("name")); 
alert(data[0].name);  //Nicholas 
 
data.sort(createComparisonFunction("age")); 
alert(data[0].name);  //Zachary

函数内部属性

在函数内部，有两个特殊的对象：arguments 和 this，其中arguments还有一个名叫 callee 的属性，该属性是一个指针，指向拥有这个 arguments 对象的函数。来看一个例子：

function factorial(num){     
    if (num <=1) {         
        return 1;     
    } else {         
        return num * factorial(num-1);    
    }
} 
//在函数有名字，而且名字以后也不会变的情况下，这样定义没有问题。
//但问题是这个函数的执行与函数名 factorial 紧紧耦合在了一起。

通过使用arguments.callee来代替函数名，可以消除紧密耦合的现象，如下：

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

这样一来，无论引用函数时使用的是什么名字，都可以保证正常完成递归调用。例如：

var trueFactorial = factorial; 
 
factorial = function(){     
    return 0;
};  //把原函数重定义
 
alert(trueFactorial(5));     //120
alert(factorial(5));         //0

函数属性和方法

每个函数都包含两个属性：length 和 prototype。其中，length 属性表示函数希望接收的命名参数的个数。

call()和apply()方法

每个函数都包含两个非继承而来的方法：apply()和 call()。这两个方法的用途都是在特定的作用域中调用函数，实际上等于设置函数体内 this 对象的值。首先，apply()方法接收两个参数：一个是在其中运行函数的作用域，另一个是参数数组。其中，第二个参数可以是 Array 的实例，也可以是 arguments 对象。例如：

function sum(num1, num2){     
    return num1 + num2; 
} 
function callSum1(num1, num2){     
    return sum.apply(this, arguments);
    // 传入 arguments 对象，arguments包含了num1和num2。
} 
function callSum2(num1, num2){     
    return sum.apply(this, [num1, num2]);
    // 传入数组
} 
alert(callSum1(10,10));   //20
alert(callSum2(10,10));   //20 

call()方法与 apply()方法的作用相同，它们的区别仅在于接收参数的方式不同。对于 call() 方法而言，第一个参数是 this 值没有变化，变化的是其余参数都直接传递给函数。换句话说，在使用 call()方法时，传递给函数的参数必须逐个列举出来，如下面的例子所示。

function sum(num1, num2){
    return num1 + num2; 
} 
function callSum(num1, num2){     
    return sum.call(this, num1, num2);
} 
alert(callSum(10,10));   //20

至于是使用 apply()还是 call()，完全取决于你采取哪种给函数传递参数的方式方便。 如果你打算直接传入 arguments 对象，或者包含函数中先接收到的也是一个数组，那么使用 apply() 肯定更方便；否则，选择 call()可能更合适。（在不给函数传递参数的情况下，使用哪个方法都无所谓。）

事实上，传递参数并非 apply()和 call()真正的用武之地；它们真正强大的地方是能够扩充函数赖以运行的作用域。下面来看一个例子。

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

使用 call()或 apply()来扩充作用域的大好处，就是对象不需要与方法有任何耦合关系。也就是不需要将方法写进对象当中，进而去调用，可以让方法随着执行环境的不同执行不同的操作。

bind()方法

ECMAScript 5还定义了一个方法：bind()。这个方法会创建一个函数的实例，其 this 值会被绑定到传给 bind()函数的值。例如：

window.color = "red";
var o = { color: "blue" }; 

function sayColor(){
    alert(this.color);
}
var objectSayColor = sayColor.bind(o);  //this值绑定了对象o
objectSayColor();    //blue

基本包装类型

为了便于操作基本类型值，ECMAScript 还提供了 3 个特殊的引用类型：Boolean、Number 和 String。这些类型与本章介绍的其他引用类型相似，但同时也具有与各自的基本类型相应的特殊行为。
先看一个例子来理解基本包装类型是怎么工作的：

var s1 = "some text"; 
var s2 = s1.substring(2);

s1是个字符串，显然是个基本类型值。但基本类型值不是对象，它不会拥有方法。所以在下一行对s1调用了substring()方法时，后台实际上做了以下三步：
(1) 创建 String 类型的一个实例；
(2) 在实例上调用指定的方法；
(3) 销毁这个实例。
可以将以上三个步骤想象成是执行了下列 ECMAScript代码。

var s3 = new String("some text"); 
var s2 = s3.substring(2);
s3 = null;

上面这三个步骤也分别适用于 Boolean 和 Number 类型对应的布尔值和数字值。
引用类型与基本包装类型的主要区别就是对象的生存期。使用 new 操作符创建的引用类型的实例，在执行流离开当前作用域之前都一直保存在内存中。而自动创建的基本包装类型的对象，则只存在于一行代码的执行瞬间，然后立即被销毁。这意味着我们不能在运行时为基本类型值添加属性和方法。
比如说下面的例子：

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

这里第二行代码尝试为s1添加一个color属性，但其实是在为一个新的实例s3添加color属性，并且在结束操作后销毁了s3。所以在第三行，s1再次创建了一个新的实例对象s4，它也就没有color属性。

上面讲的是基本包装类型的生命期，除此之外我们还要注意这些基本包装类型的构造函数与转型函数。
使用 new 调用基本包装类型的构造函数，与直接调用同名的转型函数是不一样的。书上提到一个例子：

var value = "25";
var number = Number(value);  //转型函数 
alert(typeof number);        //"number" 
 
var obj = new Number(value); //构造函数 
alert(typeof obj);           //"object" 

在这个例子中，变量 number 中保存的是基本类型值 25，而变量 obj 中保存的是 Number 的实例。

Boolean类型

实例化：

var booleanObject = new Boolean(true); 

实际应用中布尔类型不怎么会遇到问题，但要注意Boolean对象的意义：

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

falseObject的值虽然是false，但用于布尔表达式中，它是个对象，最后会被转化为true。
理解基本类型的布尔值和Boolean对象的区别很重要，我们建议是，永远不要使用Boolean对象。

Number类型

实例化：

var numberObject = new Number(10); 

Number对象有很多表示方法，比如说toString()、toFixed()、toExponential()、toPrecision()。

//通过给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" 

//显示几位小数
num = 10.005;
alert(num.toFixed(2));     //"10.01"

//指数表示法
num = 10;
alert(num.toExponential(1));  //"1.0e+1"

//保留有效数字
num = 99;
alert(num.toPrecision(1));  //"1e+2" 
alert(num.toPrecision(2));  //"99" 
alert(num.toPrecision(3));  //"99.0" 

String类型

实例化：

var stringObject = new String("hello world"); 

String 类型的每个实例都有一个 length 属性，表示字符串中包含多个字符。

var stringValue = "hello world";
alert(stringValue.length);     //"11" 

字符方法

两个用于访问字符串中特定字符的方法是：charAt()和 charCodeAt()。这两个方法都接收一个参数，即基于 0 的字符位置。其中，charAt()方法以单字符字符串的形式返回给定位置的那个字符 （ECMAScript中没有字符类型）。例如：

var stringValue = "hello world";
alert(stringValue.charAt(1));   //"e" 

如果你想得到的不是字符而是字符编码，那么就要像下面这样使用 charCodeAt()了。

var stringValue = "hello world"; 
alert(stringValue.charCodeAt(1));   //输出"101"

ECMAScript 5还定义了另一个访问个别字符的方法。在支持此方法的浏览器中，可以使用方括号加数字索引来访问字符串中的特定字符，如下面的例子所示。

var stringValue = "hello world";
alert(stringValue[1]);   //"e" 

字符串操作方法

关于拼接字符串，之前讲过concat()方法。但实践中拼接字符串，使用更多的还是加号操作符（+）。而且，使用加号操作符在大多数情况下都比使用concat() 方法要简便易行（特别是在拼接多个字符串的情况下）。

而基于子字符串创建新字符串，ECMAScript还提供了三个方法：slice()、substr()和substring()
slice()之前讲过，substr()的第二个参数是指返回字符的个数，substring()的第二个参数则是指子字符串的结束位置的后一个位置。
除此之外，这三个方法的第一个参数可以是负数，但不同的是，slice和substr会把这个负数加上字符串长度返回一个正数作为子字符串的起点位置，而substring则会将负数转换为0。
对于第二个参数为负数的情况，三种方法的行为也各不相同。slice方法会把负数加上字符串长度变成正数，substr方法会把第二个参数变成0，而substring方法会先把第二个参数变成0，然后和第一个参数进行比较并做交换，使得较大的数作为结束位置。
可以结合以下例子食用：

//没有负数的情况
var stringValue = "hello world"; 
alert(stringValue.slice(3));         //"lo world" 
alert(stringValue.substring(3));     //"lo world" 
alert(stringValue.substr(3));        //"lo world" 
alert(stringValue.slice(3, 7));      //"lo w" 
alert(stringValue.substring(3,7));   //"lo w" 
alert(stringValue.substr(3, 7));     //"lo worl"

//有负数的情况
var stringValue = "hello world"; 
alert(stringValue.slice(-3));          //"rld" 
alert(stringValue.substring(-3));     //"hello world" 
alert(stringValue.substr(-3));        //"rld" 
alert(stringValue.slice(3, -4));       //"lo w"
//这里会变成slice(3,7)
alert(stringValue.substring(3, -4));   //"hel" 
//这里会变成substring(0,3)，所以返回前三个字符
alert(stringValue.substr(3, -4));      //""（空字符串）
//这里会变成substr(3,0)，所以返回空字符串

字符串位置方法

有两个可以从字符串中查找子字符串的方法：indexOf()和 lastIndexOf()。用法易懂，看下例子就明白了。

var stringValue = "hello world"; 
alert(stringValue.indexOf("o"));            //4 
alert(stringValue.lastIndexOf("o"));        //7
alert(stringValue.indexOf("o", 6));         //7 
alert(stringValue.lastIndexOf("o", 6));     //4 

另外，indexOf()方法在字符去重的时候挺有用的。

trim()方法

ECMAScript 5为所有字符串定义了 trim()方法。这个方法会创建一个字符串的副本，删除前置及后缀的所有空格，然后返回结果。例如：

var stringValue = "   hello world   "; 
var trimmedStringValue = stringValue.trim(); 
alert(stringValue);            //"   hello world   " 
alert(trimmedStringValue);     //"hello world" 

字符串大小写转换方法

有四个，会用即可：toLowerCase()、toLocaleLowerCase()、toUpperCase()和 toLocaleUpperCase()

字符串的模式匹配方法

第一个方法就是 match()，在字符串上调用这个方法，本质上与调用 RegExp 的 exec()方法相同。match()方法只接受一个参数，要么是一个正则表达式，要么是一个 RegExp 对象。来看下面的例子。

var text = "cat, bat, sat, fat";
var pattern = /.at/;
//与 pattern.exec(text)相同
var matches = text.match(pattern);
alert(matches.index);            //0 
alert(matches[0]);               //"cat" 
alert(pattern.lastIndex);        //0

另一个用于查找模式的方法是 search()。这个方法的唯一参数与 match()方法的参数相同：由字符串或 RegExp 对象指定的一个正则表达式。search()方法返回字符串中第一个匹配项的索引；如果没有找到匹配项，则返回-1。

var text = "cat, bat, sat, fat";
var pos = text.search(/at/);
alert(pos);   //1

为了简化替换子字符串的操作，ECMAScript提供了 replace()方法。这个方法接受两个参数：第一个参数可以是一个 RegExp 对象或者一个字符串（这个字符串不会被转换成正则表达式），第二个参数可以是一个字符串或者一个函数。
如果第一个参数是字符串，那么只会替换第一个子字符串。要想替换所有子字符串，唯一的办法就是提供一个正则表达式，而且要指定全局（g）标志。

var text = "cat, bat, sat, fat"; //没有全局标志
var result = text.replace("at", "ond"); 
alert(result);    //"cond, bat, sat, fat" 
 
result = text.replace(/at/g, "ond"); //全部替换
alert(result);    //"cond, bond, sond, fond"

replace()方法的第二个参数也可以是一个函数。在只有一个匹配项（即与模式匹配的字符串）的情况下，会向这个函数传递 3 个参数：模式的匹配项、模式匹配项在字符串中的位置和原始字符串。

//字符转义
function htmlEscape(text){
    return text.replace(/[<>"&]/g, function(match, pos, originalText){         
        switch(match){             
            case "<":                 
                return "&lt;";
            case ">":
                return "&gt;";
            case "&":
                return "&amp;";
            case "\"":
                return "&quot";
        }
    });
} 
 
alert(htmlEscape("<p class=\"greeting\">Hello world!</p>"));
//&lt;p class=&quot;greeting&quot;&gt;Hello world!&lt;/p&gt; 

最后一个与模式匹配有关的方法是 split()，这个方法可以基于指定的分隔符将一个字符串分割成多个子字符串，并将结果放在一个数组中。分隔符可以是字符串，也可以是一个 RegExp 对象（这个方法不会将字符串看成正则表达式）。
split()方法可以接受可选的第二个参数，用于指定数组的大小，以便确保返回的数组不会超过既定大小。

var colorText = "red,blue,green,yellow";
var colors1 = colorText.split(",");       //["red", "blue", "green", "yellow"]
var colors2 = colorText.split(",", 2);    //["red", "blue"] 只取前两个
var colors3 = colorText.split(/[^\,]+/);  //["", ",", ",", ",", ""]
// /[^\,]+/表示一个或多个非逗号（,）字符组成的字符串

localeCompare()方法

与操作字符串有关的最后一个方法是 localeCompare()，这个方法比较两个字符串，并返回下列值中的一个：
1、如果字符串在字母表中应该排在字符串参数之前，则返回一个负数（大多数情况下是-1，具体的值要视实现而定）；
2、如果字符串等于字符串参数，则返回 0；
3、如果字符串在字母表中应该排在字符串参数之后，则返回一个正数（大多数情况下是 1，具体的值同样要视实现而定）。

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

fromCharCode()方法

String 构造函数本身还有一个静态方法：fromCharCode()。这个方法的任务是接收一或多个字符编码，然后将它们转换成一个字符串。
从本质上来看，这个方法与实例方法 charCodeAt() 执行的是相反的操作。

alert(String.fromCharCode(104, 101, 108, 108, 111)); //"hello" 

单体内置对象

ECMA-262对内置对象的定义是：“由 ECMAScript实现提供的、不依赖于宿主环境的对象，这些对象在ECMAScript程序执行之前就已经存在了。”意思就是说，开发人员不必显式地实例化内置对象，因为它们已经实例化了。
内置对象除了 Object、Array 和 String以外，ECMA-262还定义了两个单体内置对象：Global 和 Math。

Global对象

事实上，没有全局变量或全局函数；所有在全局作用域中定义的属性和函数，都是 Global 对象的属性。
诸如 isNaN()、isFinite()、parseInt()以及 parseFloat()，实际上全都是 Global 对象的方法。除此之外，Global 对象还包含其他一些方法。

URI编码方法

Global 对象的 encodeURI()和 encodeURIComponent()方法可以对 URI（Uniform Resource Identifiers，通用资源标识符）进行编码，以便发送给浏览器。有效的 URI 中不能包含某些字符，例如空格。而这两个URI编码方法就可以对 URI进行编码，它们用特殊的 UTF-8编码替换所有无效的字符， 从而让浏览器能够接受和理解。

使用 encodeURI()编码后的结果是除了空格之外的其他字符都原封不动，只有空格被替换成了 %20。而encodeURIComponent()方法则会使用对应的编码替换所有非字母数字字符。这也正是可以对整个URI使用encodeURI()，而只能对附加在现有URI后面的字符串使用encodeURIComponent() 的原因所在。

与 encodeURI()和 encodeURIComponent()方法对应的两个方法分别是 decodeURI()和 decodeURIComponent()。其中，decodeURI()只能对使用 encodeURI()替换的字符进行解码。同样地，decodeURIComponent()能够解码使用 encodeURIComponent()编码的所有字符，即它可以解码任何特殊字符的编码。

eval()方法

eval() 方法就像是一个完整的 ECMAScript解析器，它只接受一个参数，即要执行的 ECMAScript（或 JavaScript） 字符串。

eval("function sayHi() { alert('hi'); }");
sayHi();        //"hi" 
eval("var msg = 'hello world'; ");
alert(msg);     //"hello world" 

在 eval()中创建的任何变量或函数都不会被提升，因为在解析代码的时候，它们被包含在一个字符串中；它们只在 eval()执行的时候创建。

严格模式下，在外部访问不到 eval()中创建的任何变量或函数，为 eval 赋值也会导致错误。

能够解释代码字符串的能力非常强大，但也非常危险。因此在使用 eval()时必 须极为谨慎，特别是在用它执行用户输入数据的情况下。否则，可能会有恶意用户输 入威胁你的站点或应用程序安全的代码（即所谓的代码注入）。

window 对象

ECMAScript 虽然没有指出如何直接访问 Global 对象，但 Web 浏览器都是将这个全局对象作为 window 对象的一部分加以实现的。即我们可以通过window来访问全局变量和函数：

var color = "red"; 
function sayColor(){
    alert(window.color); 
} 
window.sayColor();  //"red" 

另一种取得 Global 对象的方法是使用以下代码：

var global = function(){
    return this;
}();
console.log(global) //[object Window]
//等价于
function ty(){
    return this;
}
var global=ty();
console.log(global) //[object Window]

Math对象

属性

包含了一些科学计算的特殊值，比如：
Math.E，自然对数的底数，即常量e的值；Math.PI，π的值。

min()和 max()方法

特殊的写法——要找到数组中的最大或最小值，可以像下面这样使用 apply()方法。

//常规写法
var max = Math.max(3, 54, 32, 16);
alert(max);    //54 

//可以传入任何数组的写法
var values = [1, 2, 3, 4, 5, 6, 7, 8];
var max = Math.max.apply(Math, values);

这个技巧的关键是把 Math 对象作为 apply()的第一个参数，从而正确地设置 this 值。然后，可以将任何数组作为第二个参数。

舍入方法

 Math.ceil()执行向上舍入，即它总是将数值向上舍入为接近的整数；
 Math.floor()执行向下舍入，即它总是将数值向下舍入为接近的整数；
 Math.round()执行标准舍入，即它总是将数值四舍五入为接近的整数。

random()方法

Math.random()方法返回 大于等于0 小于1 的一个随机数。
套用下面的公式，就可以利用 Math.random() 从某个整数范围内随机选择一个值。

//ceil也是可以的，见仁见智
值 = Math.floor(Math.random() * 可能值的总数 + 第一个可能的值)
//比如说 5到20
var num = Math.floor(Math.random()*16+5);

其他方法

一些数学方法比如绝对值 Math.abs(num) 、平方根 Math.sqrt(num)，还有三角函数。

总结

第五章主要是给我们说明引用类型（对象）在JavaScript中的定位，它不是传统面向对象程序设计的类，或许看完这章之后你还是有点懵懵懂懂，但是对象这个概念你其实已经了然于胸了。这里面最独特的内置引用类型是Function，函数通过多种方式被创建为Function实例，通过原型链追溯可以发现它是对象，所以拥有方法；它也可以像其他引用类型一样，作为对象的成员，来增强对象的行为。

一些基本类型值可以被包装成对象，比如String、Number和Boolean（虽然Boolean对象被用到的情景约等于没有），并执行一些方便的操作，然后在操作语句结束后被销毁。

以及了解两个内置对象：Global（往往通过window对象访问）和Math。

最近有互娱的笔试，等结束了再更新第六章的内容。

本文内容如果有理解有误的地方，还请大家指正！

如果对你产生了帮助，请点个赞给我吧！感谢观看！