[Javascript]：JS数据类型、类型判断、函数function与Function的使用

      因为之前学过Java，在学习JS时，对JS的数据类型、function和Function的使用概念容易搞混淆，理解不怎么深刻。遂将这些知识点和概念梳理一遍，以便自己和他人理解。如有错误，敬请谅解。

      知识点会涉及到：JS数据类型、JS的类型判断方式、函数创建方式、function与Function的区别、匿名函数的使用、函数特点以及函数重载问题。

Javascript数据类型

基本类型：undefined(未定义)、null(空)、number(数字)、string、boolean、symbol(新增的，没用过)
引用类型：object function
基本类型即值类型，引用类型即对象类型，和Java概念差不多。

在许多JS学习资料中，都会看见数据类型是以Undefined、Null、String...这种形式，而不是我上面的那种小写形式。关于这个问题，会进行解释。

这是因为在JS中，一切基于对象，所有事物都可以看作对象。这意味着在JS中使用的一切都是对象。给一个简单实例：给一个变量赋值，这个过程没用到new操作符创建相应对象，但却可以使用它的包装对象方法。如下：

<!-- 以字面量形式创建 -->
<script>
var a = 15;
var b = "abcde";
var len  = b.length;
var c = b.charAt(0);
document.write("长度：" + len + ", b索引字符:" + c);
//结果：长度：5, b:a
</script>
<!--以对象形式来创建 -->
<script>
var a = new Number(15);
var b = new String("abcde");
document.write(a.length + " , " + b.charAt(0)); //结果和上面一样，两者使用方式相同
</script> 

        上面的实例验证了：在JS中，直接使用值类型给变量赋值，JS也会把基本类型包装成相应对象，这时变量就是一个对象，所以才能直接使用方法。和Java相比，Java只有在需要值类型和包装类需要转换时才会自动进行装箱拆箱，否则严格按照本身定义的类型来使用，不会全部转成对象。所以搞明白JS中的一切都是对象这个概念后，包括变量、函数什么的都可以看作是对象。

       这时再来理解为什么数据类型都是大写而不是小写就很简单了。关于上面的基本类型，因为JS一切为对象的原则，所以undefined、null、object等就没有实际使用意义，上面写出来也只是为了搞明白它们之间的区别和相关概念。这些原始类型的作用仅仅是在使用 typeof 和 instanceof  用来判断具体类型，或是作为返回的字符串，用来表明该类型是什么，是基本类型还是引用类型，其他地方就用不到了~

所以，数据类型用对象类型来会更符合JS的定义：

Undefined、Null、Number、String、Boolean、Symbol、Object、 Function

Undefined表示的是一个变量被声明但是没有初始化，即没有赋值。值为undefined。
Null则和Java中概念差不多，唯一值是null，表示对象的引用地址为空。
关于Object和Function后面会说到，至于其他没什么可说的。
       

typeof 和 instanceof 的用法

typeof和instanceof都是运算符，它们都可以用来判断变量类型，但是它们各自的用法和操作对象又有所不同。

 typeof用法 

typeof 的返回值 和用于判断的值都是JS的原始类型，就是最上面写的那些类型。

typeof(var)：获取指定变量的具体类型。

<!-- 使用typeof()来得到变量的原始类型，也可以直接 typeof var -->
<script>
var a = 15;
var b = "abcde";
var c = false;
var d = function(){} //这是一个函数
var e = new Function(); //这是一个函数对象
var f; //没赋值
document.write("a:" + typeof(a) + "<br>");
document.write("b:" + typeof(b) + "<br>");
document.write("c:" + typeof(c) + "<br>");
document.write("d:" + typeof(d) + "<br>");
document.write("e:" + typeof(e) + "<br>");
document.write("f:" + typeof f +"，undef："+typeof(undef)+ "<br>");
</script>
<!--结果
a:number
b:string
c:boolean
d:function
e:function
f:undefined，undef：undefined -->

typeof var === 'type' [b]对变量类型进行判断。[/b]

var a = 150;
var b = "abcde";
var c = false;
alert(typeof a === 'number');    //true
alert(typeof b === 'number');    //fasle
alert(typeof c === 'boolean');   //true
alert(typeof d === 'undefined'); //true

使用typeof判断对象类型变量时，都是返回object。

<script>
//定义两个构造函数
function cons1(){}
function cons2(){}
var a = new cons1();
var b = new cons2();
alert(typeof a === cons1);//false
alert(typeof b === cons2);//false
alert(typeof a);//object
alert(typeof b);//object
</script>

正因为typeof对于判断对象类型具有局限性，所以判断对象类型应使用insatanceof运算符。

 instanceof用法 

object instanceof Object2，instanceof运算符会判断指定对象类型的prototype

//定义两个构造函数
function cons1(){}
function cons2(){}
var a = new cons1();
var b = new cons2();
var aa = new Function(); //这是一个函数对象
var arr = []; //字面量创建数组
var arr2 = new Array();//数组对象创建数组
var obj = {name:"傲天", age:19}; //使用字面量创建对象
alert(a instanceof cons1); //返回true
alert(b instanceof cons2); //返回true
alert(aa instanceof Function); //返回true
alert(arr instanceof Object); //返回true
alert(arr instanceof Array); //返回true
alert(obj instanceof Object); //返回true

两者区别：

typeof用于判断基本类型，instanceof 用于判断对象类型。

function和Function区别，创建函数、函数特点

Function与function的区别：      

Function是一个功能完整的对象，作为JS的内置对象之一。而function只是一个关键字，用来创建一个普通函数或对象的构造函数。JS的普通函数都是Function对象的实例，所以函数本身也是一个对象，就像var一样，只不过这个对象具有可调用特征而已。

function创建对象和普通函数的区别：

如果用function创建构造函数，例如：var a = new function{}() 或者  var b = new Person();  则a、b就不是普通函数，而是作为一个真正对象，是Object类型。虽然普通函数也是对象，但一个是Function，作为函数；一个是Object，作为对象。 关于这个问题，可以使用instanceof运算符去验证。
本篇不会涉及使用function创建对象的相关知识，这里仅作了解。

注意：关键字function和原始类型的function名称是相同的，但就像object和Object一样，两者没半毛钱关系。一个是作为创建函数的关键字，一个是用来判断一个对象（函数）是不是Funtion类型。别搞混了。  

 创建函数的方式 

//  函数声明：使用function声明一个函数，再为其指定一个函数名。
function first(){
alert("函数声明方式");
}
//  函数表达式：使用function声明一个函数，但没有函数名，而是将这个函数赋给一个变量。也叫作匿名函数
var second = function(arg1, arg2){
alert(arg1+"|" + arg2+"\n匿名函数方式")
}
//  使用Function对象构造函数创建函数
var third = new Function(
"a1", "a2", "alert('函数对象,' + a1 + '|' + a2)"
);

调用函数方式可以有如下几种：

//  1.直接执行方式或采用事件来执行函数
first();
second("ABC", "XYZ");
third("火", "土");

//  2.函数也是对象，所以像变量一样.把函数名赋给另一个变量，那个变量就指向该函数地址
//  相当于再进行一次封装。动态添加对象方法时会用到。
var a = first;
var b = second;
a();
b("ABC", "XYZ");

//注意！这种方式是直接执行third()函数,而不是赋值函数名。
var c = third("火", "土");

三者的不同和优缺点：

函数声明在使用之前，就会被加载到作用域中，随时等待调用。而函数表达式(匿名函数)则是在代码执行到那一行才被定义，提前使用则会出错。

first(); //可以执行
function first(){
alert("函数声明方式");
}
second(15,25); //执行出错
var second = function(arg1, arg2){
alert(arg1+"|" + arg2+"\n匿名函数方式")
}

匿名函数(函数表达式)与Function()构造函数用法很相似，它们的不同点：匿名函数在使用时只被解析一次。而作为字符串传递给Function()构造函数的JS代码在每次调用构造函数时都要被解析和编译一次。Function对象的就是通过构造函数动态地创建和编译一个函数，但最好不要过多使用，因为用Function对象构造函数定义函数比其他两种慢多了。

 匿名函数 

匿名函数就是上面提到的函数表达式。匿名函数从字面意义来讲，就是没名字的函数，但它需要有一个依附体，要让匿名函数能被找到，不然的话没有意义。匿名函数看起来像Java的匿名内部类，但两者的使用方式差别巨大。但可以去了解一下，对于使用匿名函数或许有不一样的理解。
匿名函数除了可以赋值给一个var，用变量来调用匿名函数；还能把匿名函数赋给一个事件，作为事件处理程序，但别的函数方式也能达到这种效果。但匿名函数最特殊的地方是它的调用方式，下面会一一列举。
实例

// 定义一个匿名函数，依附于一个变量
var first = function(a1, a2){
alert(a1 + "|" + a2 + "\n变量名调用匿名函数")
}
//通过var名调用
first(111, 222);

//依附一个事件，随着事件触发而执行
window.onload = function () {
alert("页面加载完成后触发事件！");
}

上述匿名函数需要触发相关事件，或是主动执行。有没有匿名函数自动执行的方式呢？如下：
立即执行的匿名函数

//在匿名函数体后面加上(),表示立即执行该函数
var second = function(){
alert("代码执行到此处，立即执行。无需var()");
}(); //加分号表示执行完成，可加可不加。

//匿名函数有参，则往里面传参数
var second = function(a1, a2){
alert(a1 + "|" + a2 + "\n用括号给匿名函数传入参数，立即执行");
}(555,666);

因为函数本身也是对象，所以能赋给变量、事件，自然也能赋给一个对象。

//匿名函数赋给anyobj对象，然后anyobj再赋给second变量。这种方式没啥意义,了解原理即可。
var second = {
anyobj:function(msg){
alert(msg);
}("依附一个对象的匿名函数")
}

观察上述调用方式，它们都需要一个依附体(变量、事件等)，然后这些对象会通过()调用匿名函数，这就是立即执行的匿名函数。但能不能换成别的依附体呢？让匿名函数看起来更像是匿名函数。如下：

//匿名函数放在括号体内
(
function(msg){
alert(msg + "\n匿名函数放在括号内，作为函数表达式");
}("传入参数")
);

这种调用方式是：外面括号包含匿名函数，然后调用()来立即执行函数。这种方式为什么能调用呢？这就要说到小括号的作用，外面的小括号相当于运算符，而此时匿名函数放在里面就形成了函数表达式，然后通过()就能调用该匿名函数。

从这个角度来看，我们还能使用其他运算符来执行匿名函数。

//使用一元运算符和匿名函数形成函数表达式
+function(msg){
alert(msg);
}("+")
-function(msg){
alert(msg);
}("-")
!function(msg){
alert(msg);
}("!")
~function(msg){
alert(msg);
}("~")
*function(msg){
alert(msg);
}("*")

      

      关于匿名函数的调用方式就说到这里，当然还有许多细节没说到，这里也仅仅是作为参考，至于还有没有其他运算符来执行匿名函数就不过多了解，最常用的也就是以上几种。最后想说，了解基本概念后，一定要多写，写得多自然也就理解了。

 JS函数的特点 

因为JS的弱类型特性，函数形参无法指定具体类型，返回类型自然也没有，return可以返回任何类型。
JS函数不限制传递的参数数量。这表明就算函数的参数列表已确定，照样可以传入多个参数。
JS函数没有重载，如果有同名函数，后一个会覆盖前一个。
实例

<script>
// 定义函数，返回传入的参数值
function getVal(val){
return val;
}
var a = getVal("传入val值", 200); //传入2个参数
//只定义了两个参数a,b 可以是任何类型
function method1(arg1, arg2){
console.log("method1函数值：" + arg1 + "，" + arg2);
console.log("a值：" + a);
}
</script>
<!-- 往method1函数中传入4个参数 -->
<button onclick="method1(1, 'abc', 100, true)">点击</button>
<!-- 控制台输出
method1函数值：1，abc
a值：传入val值
-->

     通过上面，可以看到尽管定义函数时参数数量已确定，但依然可以往里面传入多个参数，JS不会对其进行检查。看起来无参函数和有参函数似乎没啥区别，反正参数可以随便传。但只有定义了形参，函数内部才能方便地使用定义好的形参。如果函数没有定义形参，你传入一堆参数给无参函数，函数内部无法直接拿到传入的参数值。这时候就只能通过函数内部的arguments对象来获取实参。

关于参数传入数量的问题：

如果传递的参数数量少于函数本身定义的形参数量时，之后的参数值都是undefined，因为没对其传值，就和定义了变量却没赋值一样。
如果是在强类型语言中，这种问题是没有的，所以要注意JS的特性。

 关于arguments对象 

arguments是每个函数内部都有的内部对象。函数所有接收的实参都由它来存储管理。取值方式和数组差不多。

<script>
//返回所有传入的参数
function getArgs(){
var all = "";
for(var i = 0; i < arguments.length; i++){
all += arguments[i] + " ";
}
return all;
}
function show(){
var allArgs = getArgs("我", 150, new Date(), "ABC", 555);
console.log(allArgs);
// 我 150 Wed Sep 13 2017 21:19:53 GMT+0800 (中国标准时间) ABC 555
}
</script>
<button onclick="show()">点击</button>

      通过上面实例，可以看到[b]arguments对象能拿到函数实参，无参函数通过arguments[0] 、argument[1]就能拿到传入的第一个实参和第二个实参。但这种获取实参方式不能乱用。如果规定了形参就使用形参，并且不要多传无用参数。而无参函数就别传入参数，一是无用，二是容易误导，代码写规范点总是没错的。[/b]

 JS函数为什么没重载 

首先，先了解重载需要具备的条件：方法名相同，但只要形参类型不相同或者形参数量不相同，都会导致方法重载。至于有无返回值则和重载条件无关。这样就会出现同名但方法不同。
在JS中，函数参数数量没法确定，而且参数类型可以是任意的，如果函数同名，后面的会覆盖前面的。所以JS函数没法实现重载。反过来想，如果JS函数可以重载，那就需要确定参数类型或者参数个数，那这样JS的动态类型就没实际意义了。但可以通过arguments得到参数长度来实现另类重载。