javascript高级程序设计读书笔记----引用类型

 

 

Array类型。

ECMAScript数组的每一项可以保存任何类型的数据。

数组大小是可以动态调整的。

创建数组第一种基本方式方式: 使用Array构造函数

var colors = new Array();

var colors = new Array(20);//length为20的数组f

var colors = new Array("Red","Blue","Yellow",1);//创建包含3个字符串和一个数字的数组

创建数组第二种基本方式：使用数组字面量表示法

var colors = ["Red","Blue","Green"];

var colors = [];//创建空的数组

var colors = [1,2,];//不推荐这样做，会创建2或3项的数组

var colors = [,,,,,];//不推荐这样做

数组的定义和创建要符合语法规范，不然可能出现意想不到的错误。

数组的内容可以修改，在javascript中，数组的长度也可以修改。

var colors = ["Red","Blue","Green"];//数组下标从0开始，此处数组元素为colors[0],colors[1],colors[2]

alert(colors.length);//4 colors.length为数组长度

alert(colors.lenth-1);//3 数组最后一项元素是colors.length-1

colors.length = 2;//修改数组长度为2

alert(colors[2]);//undefined 因为把修改数组长度为2,数组元素只有colors[0] colors[1]

利用数组的length可以方便的在数组末尾添加新的元素。

var colors = ["Red","Blue","Green"];

colors[colors.length] = "Black";//在3位置添加一个新的元素

colors[colors.length] = "Brown";//在4位置添加一个新的元素

检测数组

单个页面或者一个全局作用域，可以使用instanceof来检测是否是Array类型

if(value instanceof Array){

//do something...

}

如果网页中包含多个框架，就存在多个不同的全局执行环境，存在多个不同版本的Array构造函数，此种情况instanceof无效。

ECMAScript5新增了Array.isArray()方法用于解决以上问题。

支持Array.isArray()方法的浏览器有IE9+，FireFox4+,Safari5+,Opera10.5+和Chrome

转换方法

所有对象都具有toLocaleString() toString() valueOf()方法。

var colors = ["Red","Blue","Green"];

console.log(colors.toString());//Red,Blue,Green 字符串格式

console.log(colors.valueOf());//Red,Blue,Green 数组

console.log(colors);

 

栈方法

ECMAScript也提供了类似栈的数据结构。 栈的数据结构是LIFO(Last Input Fist Out)后进先出。

push():将元素添加到数组末尾

prop():取得最后一个元素

var colors = new Array();

var count = colors.push("Red","Blue");

alert(count);//2

队列方法

队列的数据结构是FIFO

数组操作方法

concat():基于当前数组所有项创建一个新的数组

var colors = ["Red","Blue","Green"];

var colors2 = colors.concat("Yellow",["Black","Brown"]);

alert(colors);//Red,Blue,Green

alert(colors2);//Red,Blue,Green,Yellow,Black,Brown

slice():基于当前数组中的一项或多项创建一个新的数组

var colors = ["Red","Blue","Green","Black","Orange"];

var colors2 = colors.slice(1);

var colors3 = colors.slice(1,4);

console.log(colors2);//Blue,Geen,Black,Orange

console.log(colors3);//Blue,Green,Black

 

Function类型

function sum(num1, num2){//函数声明

return num1+num2;

}

var sum = funciton(num1, num2){//函数表达式定义函数

return num1+num2;

}

这两种函数定义方式几乎相同。第二个代码定义了变量sum并将其初始化为一个函数。

 

函数声明与函数表达式

解析器会率先读取函数声明,并使其在执行任何代码之前可用。

alert(sum(10,10));

function sum(num1,num2){//函数声明

return num1+num2;

}

alert(sum(10,10);//unexpected identifier错误

var sum = function(num1,num2){//函数表达式

return num1+num2;

}

 

以上代码运行没问题。

 

函数内部属性

函数内部有两个特殊对象arguments和this。

arguments是一个类数组对象，用于保存函数参数，这个对象有一个callee属性，该属性是一个指针，指向拥有这个arguments对象的函数。callee可以消除紧耦合

//经典的阶乘函数

//函数内部属性 arguments.callee属性

//callee属性是一个指针，指向拥有这个arguments对象的函数

function factorial(num) {//函数声明

if (num <= 1) {

return 1;

} else {

return num * factorial(num - 1);//为了消除紧耦合，使用arguments.callee

}

}

var f = factorial;

factorial = function(){

return 0;

}

console.log("f: "+f(5));//返回0

console.log("factorial(5): "+factorial(5));

 

function factorial(num){

if (num <= 1) {

return 1;

} else {

return num * arguments.callee(num - 1);//为了消除紧耦合，使用arguments.callee

}

}

console.log("f: "+f(5));// 120

console.log("factorial(5): "+factorial(5));// 0

 

this对象。

window.color = "red";

var o = {color: "blue"};

function sayColor(){

return this.color;

}

sayColor();//"red" 函数是全局定义的，this引用的是全局对象window

o.sayColor = sayColor;//要想不执行函数而是访问函数指针的话，去掉括号就行了

o.sayColor();

 

基本包装类型

var s1 = "Hello World";

var s2 = s1.substring(2);

s1是基本类型，包含了字符串。基本类型不是对象，从逻辑上讲不能有substring()方法。 实际上后台已经完成了一下操作：

1.创建String类型的一个实例。

2.在实例上调用指定的方法

3.销毁这个实例

var s1 = "Hello World";

s1.color = "red";

alert(s1.color);//undefined

第二行创建的String对象在执行第三行代码时已经被销毁了。第三行代码又创建了自己的String对象，然而该对象没有color属性。

var obj = new Object("hello");

alert(obj instanceof String);//true

 

 

 

尽管不建议显示的创建包装类型对象，但他们操作基本类型能力非常重要，有必要了解。

Boolean类型

 

函数属性和方法

 

每个函数都包含两个非继承而来的方法:apply()和call()。这两个方法的用途都是在特定的作用域中调用函数。

 

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);//20

alert(callSum2);//20

call()方法和apply()方法的作用相同，它们的区别仅在于接收参数的方式不同。如果使用call()方法，必须明确传入每个参数

function sum(num1, num2){

return num1+num2;

}

function callSum1(num1, num2){

return sum.call(this, arguments);

}

function callSum2(num1, num2){

return sum.call(this, [num1, num2]);

}

apply()和call()除了传递方法之外，真正强大的地方是能够扩充函数依赖运行的作用域。

window.color = "red";

var o = {color: "blue"};

function sayColor(){

return this.color;

}

sayColor.call(this);//red sayColor()函数是全局定义的，所以this引用的是全局对象

sayColor.call(window);//red

sayColor.call(o);//blue

使用call()或apply()来扩充作用域的最大好处就是对象不需要与方法有任何的耦合关系。

之前使用的步骤可以省略了，之前的代码中以下两个步骤可以省略。

o.sayColor = sayColor;

o.sayColor();

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

window.color = "red";

var o = {color: "blue"};

function sayColor(){

alert(this.color);

}