JavaScript 高级程序设计(第3版)笔记——chapter5:引用类型

Chapter5 引用类型

本章内容:

l  使用对象

l  创建并操作数组

l  理解基本的JavaScript类型

l  使用基本类型和基本包装类型

 

l  从技术上讲,JavaScript是一门面向对象的语言,但它不具备传统的面向对象语言所支持的类和接口等基本结构。

l  引用类型有时候也被称为对象定义,因为它们描述的是一类对象所具有的属性和方法。

l  对象是某个特定引用类型的实例。ECMAScript提供了很多原生引用类型。

 

5.1 Object类型

l  创建Object实例的方式:

  1. New操作符后跟Object构造函数

 

      2. 使用对象字面量表示法(开发人员更加青睐的方法)

对象字面量是对象定义的一种简写形式,目的在于简化创建包含大量属性的对象的过程。在通过对象字面量定义对象时,实际上不会调用object构造函数。

 

使用对象字面量语法时,属性名也可以用字符串。

 

 

 使用对象字面量语法时,如果留空花括号,则可以定义只包含默认属性和方法的对象。

 

 

l  对象字面量也是向函数传递大量可选参数的首选方式。

【一般来讲,命名参数虽然容易处理,但在有多个可选参数的情况下就会显示不够灵活。最好的做法是对那些必需值使用命名参数,而使用对象字面量来封装多个可选参数】

 

 

l  访问对象属性

  1. 点表示法(除非使用变量来访问属性,建议使用点表示法)

      

      2. 方括号表示法

      

      方括号语法的主要优点:可以通过变量来访问属性

      

       如果属性名中包含会导致语法错误的字符,或者属性名使用的是关键字或者保留字,也可以使用方括号表示法

      

 

5.2 Array类型

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

l  ECMAScript数组的大小可以动态调整,即可以随着数据的添加自动增长以容纳新数据。

l  ECMAScript数组创建方式:

  1. Array构造函数(也可以省略new操作符)

   

      2. 数组字面量表示法

   

      由于浏览器的不同,所以可以会创建不同的项数。所以最好不要使用这种语法。

     

 

 l  读取与设置值,使用方括号并提供相应值得基于0的数字索引

l  数组的length:不是只读。通过设置这个属性,可以从数组的末尾移除项或项数组中添加新项

 

利用length快速添加元素

 

 

 

5.2.1检测数组

l  instanceof 操作符

问题:它假定只有一个全局执行环境

如果网页中包含多个框架,那实际上就存在两个以上不同的全局执行环境,从而存在两个以上不同版本的Array构造函数

l  Array.isArray()方法

解决instanceof 操作符的问题,ECMAScript5 新增

 

 

5.2.2转换方法

l  toString():返回数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串

l  valueOf():返回的还是数组,实际上会调用数组每一项的toString()方法

l  toLocaleString():创建一个数组值得以逗号分隔的字符串。会调用数组每一项toLocaleString()。【通常会返回与toString和valueOf方法相同的值】

方法不同比较:

 

【数组继承的toString,valueOf,toLocaleString方法,在默认情况下会以逗号作为分隔符】

l  join()方法:可以接收参数,即用作分隔符的字符串

【如果不给join方法传入任何值,或者给它传入undefined,则使用逗号作为分隔符。IE7及更早版本会错误地使用字符串“undefined”作为分隔符】

 

【如果数组中的某一项的值是null或者undefined,那么该值在join,toLocalString,toString,valueOf方法返回的结果中以空字符串表示】

 

5.2.3栈方法(LIFO)

l  ECMAScript数组提供了push()和pop()方法,以便实现类似栈的行为

Push():接受任意数量的参数,将其添加到数组末尾,返回修改后数组的长度

Pop():移除数组最后一项,减少length值,返回移除的值

 

 

可以将栈方法与其他数组方法连用

 

 

5.2.4队列方法(FIFO)

l  结合使用push()和shift()方法,可以像队列一样使用数组

shift():移除数组中的第一项并返回该项

 

l  结合使用unshirt()和pop()方法,可以反向使用队列

Unshirt():和shirt相反,在数组前端添加任意个项并返回新数组的长度

 

 

5.2.5重排序方法

l  reverse():反转数组项的顺序

l  sort():

  1. 不接受参数时:按升序排列数组项

【sort会调用每个数组项的toString转型方法,比较所得的字符串,确定如何排序】会出现“10”位于“5”前面这种情况

 

      2. 接受比较函数时:

比较函数接收两个参数,如果第一个参数应该位于第二个参数前,返回-1;如果两个参数相等,返回0;如果第一个参数应该位于第二个参数之后,返回0

 

对于数组类型或者其valueOf()方法,比较函数更为简单

 

 

5.2.6操作方法

l  contact():先创建当前数组的一个副本,把接收到的参数添加到这个副本的末尾,最后返回新构建的数组

 

 

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

  1. 接收两个参数,即要返回项的起始和结束位置(返回起始项和结束项之间的项,但不包含结束位置的项)
  2. 在只有一个参数的情况下,返回该参数指定位置开始到当前数组末尾的所以项。
  3. 如果参数中有一个负数,则用数组长度加上该数来确定相应的位置

如果结束位置小于起始位置,则返回一个空字符串

 

l  splice():向数组中部插入项

          始终返回一个数组,该数组包含从原始数组中删除的项。

  1. 删除:可以删除任意数量的项。只需指定两个参数:要删除的第一个项和要删除的项数。
  2. 插入:可以向指定位置插入任意数量的项。只需提供3个参数:起始位置,0(要删除的项数)和要插入的项
  3. 替换:可以向指定位置插入任意数量的项,且同时删除任意数量的项。只需提供3个参数:起始位置,要删除的项数和要插入的任意数量的项

 

 

5.2.7位置方法

l  indexOf():从数组开头开始向后查找

l  lastIndexOf():从数组末尾开始向前查找

共同点:参数:要查找的项和(可选的)表示查找起点位置的索引

        都返回查找的项在数组中的位置,在没有找到的情况下,返回-1

        在比较第一个参数和数组中的每一项时,会使用全等操作符(===)

 

 

5.2.8迭代方法

l  每个方法接收两个参数:要在每一项上运行的函数和(可选的)运行该函数的作用域对象——影响this值。

l  传入这些方法中的函数会接收三个参数:数组项的值,该项在数组中的位置,数组对象本身

l  every():对数组中每一项运行给定函数,如果该函数对每一项都返回true,则返回true

l  filter():对数组中每一项运行给定函数,返回该函数会返回true的项组成的数组

l  forEach():对数组中每一项运行给定函数,这个方法没有返回值

l  map():对数组中每一项运行给定函数,返回每次函数调用的结果组成的数组

l  some():对数组中每一项运行给定函数,如果该函数任一一项返回true,则返回true

 

 

 

5.2.9归并方法

l  迭代数组中的所有项,然后构建一个最终返回值。

【reduce():从数组的第一项开始遍历; reduceRight():从数组最后一项开始遍历】

l  接收两个参数:在每一项上调用的函数和(可选)作为归并基础的初始值

l  在每一项上调用的函数接收4个参数:前一个值,当前值,项的索引和数组对象

【这个函数的返回值会作为第一个参数自动传给下一项。第一个迭代发生在数组第二项上,因此第一个参数是数组的第一项,第二个参数是数组的第二项】

 

 

5.5function类型

| 函数表达式与函数声明区别

解析器会率先读取函数声明,通过一个名为函数声明提升的过程,读取并将函数声明添加到执行环境中。至于函数表达式,则必须等到解析器执行到它所在的代码行,才会真的被解释执行。

 

|函数内部属性

1. arguments 对象

arguments对象是函数内部的本地变量。

属性:arguments.callee【指向拥有这个arguments对象的函数】

        arguments.length

 1 function factorial(num) {
 2     if (num <= 1) {
 3         return 1;
 4     } else {
 5         return num * arguments.callee (num -1);
 6     }
 7 }
 8 
 9 var trueFactorial = factorial;
10 factorial = function() {
11     return 0;
12 }
13 alert(trueFactorial(5)); //120
14 alert(factorial(5)); //0

 2.this对象:函数据以执行的环境对象

 1 window.color = "red";
 2 var o = {color:"blue"};
 3 
 4 function sayColor() {
 5     alert(this.color);
 6 }
 7 
 8 sayColor();//"red"
 9 o.sayColor = sayColor;
10 o.sayColor(); //"blue"

【函数的名字仅仅是一个包含指针的变量而已。因此,即使是在不同的执行环境中执行,全局的sayColor()函数与o.sayColor()指向的仍然是同一个函数】

 

|函数的属性和方法

属性:length【表示函数希望接收的命名参数个数】;prototype【不可枚举,for-in无法发现】

方法:apply(), call()

【作用:在特定的作用域中调用函数,实际上等于设置函数体内的this对象的值。且对象不需要与方法有任何耦合关系。】

【区别:call()接受参数列表;apply()接受参数数组】

 1 window.color = "red";
 2 var o = {color:"blue"};
 3 
 4 function sayColor() {
 5     alert(this.color);
 6 }
 7 sayColor(); //red
 8 sayColor.call(this); //red
 9 sayColor.call(window); //red
10 sayColor.call(o); //blue

bind()【作用:创建一个函数的实例,其this值会被绑定到传给bind()函数的值】

1 window.color = "red";
2 var o = {color:"blue"};
3 
4 function sayColor() {
5     alert(this.color);
6 }
7 var objectSaycolor = sayColor.bind(0);
8 objectSaycolor(); //blue

objectSayColor()函数的this值等于o,因此即使是在全局作用域中调用这个函数,也会看到“blue”。

 

posted @ 2016-03-14 13:29  前端菜鸟——一只小熊  阅读(286)  评论(0编辑  收藏  举报