JavaScript引用类型-CSDN博客

本文链接：https://blog.csdn.net/weiyongle1996/article/details/72588359

引用类型主要包括对象，数组（其实也是对象），函数等，在上一篇中我们已经看了值类型和引用类型的区别，这一篇我们再来详细看一下引用类型。

一、Object对象

Object类型是JavaScript中使用最多的一种类型。虽然Object的实例不具备多少功能，但对于在应用程序中存储和传输数据而言，它确实是非常理想的选择。创建Object实例的方式有两种，第一种是使用new操作符后跟Object构造函数。代码如下：

var person = new Object();
person.name = "tt";
person.age = 12;

另一种是通过对象字面量的形式，如下所示：

    var person = {
        name : 'tt',
        age : 12
    }

使用对象字面量语法时，如果留空其花括号，则可以定义值包含默认属性和方法的对象，所以JavaScript中一个花括号就可以是一个对象（很不习惯吧）。通常对象字面量定义对象使用的方式多一些，因为更简便而且更像是传统意义上的类（Java等语言中）。访问对象的属性时可以使用点表示法（和大多数语言相似），也可以使用中括号的方法（类似数组），如下：

alert(person.name);
alert(person['name']);

通常，除非必须使用变量来访问属性，否则我们建议使用点表示法，因为这样更符合习惯。

二、Array数组类型

JavaScript中的数组与其他多数语言中的数组有着相当大的区别。虽然JavaScript数组与其他语言中的数组都是数据的有序列表，但与其他语言不同的是，JavaScript数组的每一项可以保持任何类型的数据。也就是说，可以用数组的第一个位置来保存字符串，用第二个位置来保存数值，用第三个位置来保存对象。而且，JavaScript数组的大小是可以动态调整的，即可以随着数据的添加自动增长以容纳新增数据（这些特性是不是让你想到了Java中的集合呢）。

数组也有两种创建方式，第一种是使用构造函数（new可以省略）：

    var colors1 = new Array();
    var colors2 = new Array(20);                        
    var colors3 = new Array('red','blue','yellow');

第二种是使用数组字面量：

    var colors = ['red','blue','yellow'];    //定义一个字符串数组
    alert(colors[0]);                        //显示第一项
    colors[2] = 'green';                     //修改第三项
    colors[3] = 'black';                     //新增第四项

数组的长度存储在length属性中，length属性是可以修改的，因此可以通过修改length属性的值来删除数组中的内容或在末尾添加新项。

    var colors = ['red','blue','yellow'];
    colors.length = 2;
    alert(colors[2]);        //undefined
    var colors = ['red','blue','yellow'];
    colors[colors.length] = 'green';        //在位置3添加一种颜色
    colors[colors.length] = 'black';        //再在位置4添加一种颜色

下面来看数组中一些常用的方法。

数组和字符串的转换

通过调用toLocaleString()、toString()和valueOf()等方法可以实现将数组转换为一个字符串。

    var colors = ['red','blue','yellow'];
    alert(colors.toString());   //red,blue,yellow
    alert(colors.valueOf());    //red,blue,yellow
    alert(colors);              //red,blue,yellow

直接输出数组的值为什么和转换后的一样呢？这是由于alert()要接收字符串参数，所有它会在后台调用toString()方法，由此会得到与直接调用toString()方法相同的结果。上面三个方法默认返回的都是以逗号分隔的字符串，而是用join方法可以实现以任意字符分隔：

  var colors = ['red','blue','yellow'];
  alert(colors.join(','));    //red,blue,yellow
  alert(colors.join('||'));    //red||blue||yellow

模拟常用数据结构

JavScript数组也提供了一种让数组的行为类似于一些数据结构的方法。例如栈、队列等，让我们来分别看一下。

栈方法

栈是一种后进先出后进先出的数据结构。而栈中项的插入（叫做入栈）和移除（叫做出栈），只发生在一个位置——栈的顶部。JavaScript提供了push()和pop()方法，以便实现类似的栈行为。push()方法可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。而pop()方法则从数组末尾移除最后一项，减少数组的length值，然后返回移除的项。

队列方法

队列数据结构的访问规则是先进先出。队列在列表的末端添加项，从列表的前端移除项。由于push()是向数组末端添加项的方法，因此要模拟队列只需一个从数组前端取得项的方法。实现这一操作的数组方法就是shift()，它能够移除数组中的第一个项并返回该项，同时将数组长度减1。结合使用shift()和push()方法，可以像使用队列一样使用数组。JavaScript还为数组提供了一个unshift()方法。顾名思义，unshift()与shift()的用途相反：它能在数组前端添加任意个项并返回新数组的长度。因此，同时使用unshift()和pop()方法，可以从反方向来模拟队列，即在数组的前端添加项，从数组的末端移除项。

排序方法

数组中已经存在两个可以直接用来排序的方法：reverse()和sort()，reverse()方法会反转数组项的顺序。即sort是由小到大的排序，reverse是由大到小的排序。对于数值类型sort会将其转换为字符串类型在进行排序，所以使用sort对一组数值进行排序时，往往不会得到你想要的效果，如下：

    var values = [0,1,5,10,15];
    values.sort();
    alert(values);                //0,1,10,15,5

所以想实现数值的排序，通常还是需要手动的去实现。

操作方法

JavaScript对提供了很多操作数组的方法。包括：

concat() 数组拼接的方法，可以将数组和字符，数组和数组拼接在一起

slice() 分割数组的方法，可以接受一或两个参数，即要返回项的起始和结束位置（包头不包尾）。在只有一个参数的情况下，slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。

splice() 这个方法可以实现插入、删除、替换等功能。下面来具体看一下：

删除——可以删除任意数量的项，只需指定2个参数：要删除的第一项的位置和要删除的项数。例如，splice(0,2)会删除数组中的前两项。

插入——可以向指定位置插入任意数量的项，只需提供3个参数：起始位置、0（要删除的项数）、要插入的项。如果要插入多个项，可以再传入第四、第五，以致任意多个项。例如，splice(2,0,'red','green')会从当前数组的位置2开始插入字符串'red'和'green'。

替换——可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定3个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice(2,1,'red','green')会删除当前数组位置2的项，然后再从位置2开始插入字符串'red'和'green'。

下面是一段实例代码：

    var colors = ['red','green','blue'];
    var removed = colors.splice(0,1);                 //删除第一项
    alert(colors);                                    //green,blue
    alert(removed);                                   //red
    removed = colors.splice(1,0,'yellow','black');    //从位置1开始插入两项
    alert(colors);                                    //green,yellow,black,blue
    alert(removed);                                   //返回一个空数组
    removed = colors.splice(1,1,'red','brown');       //插入两项，删除一项
    alert(colors);                                    //green,red,brown,black,blue
    alert(removed);                                   //yellow

位置方法

JavaScript中提供了两个位置方法：indexOf()和lastIndexOf()。这两个方法都接受两个参数，要查找的项（可选）和开始查找的位置，区别只是indexOf是从头开始找而lastIndexOf从数组尾部开始找。

三、Function类型

JavaScript中函数是一个很重要的类型，要重点掌握。函数实际上是对象。每个函数都是Function类型的实例，而且都与其他引用类型一样具有属性和方法。由于函数是对象，因此函数名实际上也是一个指向函数对象的指针，不会与某个函数绑定。

常用的定义函数的方式有两种，分别是函数声明的方式和函数表达式，如下：

    function sum(num1,num2)//函数声明
    {
        return num1 + num2;
    }

    var sun = function(num1,num2){//函数表达式
        return num1 + num2;
    };

还有一种不常用的方式，使用Function构造函数：

　var sum = Function('num1','num2','return num1 + num2');

没有重载

在Java和C++等语言中，函数都是可以重载的（即函数名相同，通过设置参数类型或数量的不同来实现不同的功能），但在js中没有重载。因为函数是一个引用，而且JavaScript是一种弱类型语言，传递的参数没有类型之分。所以当定义两个同名函数时，后一个会覆盖前一个。

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

解析器在向执行环境中加载数据时，对函数声明和函数表达式并非是相同的。解析器会率先读取函数声明，并使其在执行任何代码之前可用（函数声明提升）；至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解释执行。所以有些函数看起来可以不用遵从先声明后使用的规则，如下，而这在java等语言中是不可想象的。

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

做为值的函数

因为JavaScript中的函数名本身就是变量，所以函数也可以作为值来使用。也就是说，不仅可以像传递参数一样把一个函数传递给另一个函数，而且可以将一个函数作为另一个函数的结果返回。就像忍者书中作者所说，函数是第一型对象。这又是JavaScript中一个新的特性，很酷吧。

函数内部属性

在函数内部，有两个特殊的对象：arguments和this。其中，arguments是一个类数组对象（和数组的性质很相似，但它不是一个数组），包含着传入函数中的所有参数，而且可以使用length属性来确定传递进来多少个参数。函数内部的另一个特殊对象是this，this引用的是函数据以执行操作的对象——或者也可以说，this是函数在执行时所处的作用域（当在网页的全局作用域中调用函数时，this对象引用的就是window），和Java中的this对象差不多。

函数的属性和方法

因为JavScript中的函数是对象，因此函数也有属性和方法。每个函数都包含两个属性：length和prototype（原型，重要）。其中，length属性表示函数希望接收的命名参数的个数。prototype原型和apply()和call()这两个方法内容比较多，这里不再细说，以后找时间单独开一篇说说。

以上就是引用类型的大体内容了，还有其他的一些引用类型不再细说。