Javascript基礎回顧之(一) 類型

本來是要繼續由淺入深表達式系列最後一篇的，但是最近團隊突然就忙起來了，從來沒有過的忙！不過喜歡表達式的朋友請放心，已經在寫了:) 在工作當中發現大家對Javascript的一些基本原理普遍存在這裡或者那裡的一知半解，所以決定先花一些時間整理一下這些基礎知識和大家分享。 剛開始打算寫一篇的，但後來寫著寫著就發現越來越多，所以決定還是寫一個系列吧。這個系列所有內容都是涉及Javascript基礎的，沒有時髦的玩意兒，但是我相信這些基礎的東西會有助於你理解那些有趣的東西的。

　　是的，說到Javascript我能想到的就是有趣，好玩！那麼到底哪些地方好玩，為什麼好玩呢？我們一起來玩玩吧，讓我們玩著玩著就把Javascript理解透徹了。本文所包含的內容：

基本型別
Object 與object 
基本包裝型別
值型別與引用型別
function型別

基本型別
　　Javadscript 、Boolean、Number、String 和1種複雜資料類型Object。

var undefinedVariable;
var nullValue = null;
var cnblogs = new Object();
var func = function () { };
 
typeof ("string"); 
typeof (100);
typeof (true);
typeof (undefinedVariable);
typeof (cnblogs);
typeof (undeclaredValue);
typeof (nullValue);
typeof (null)
typeof (func)

告訴我結果是什麼？

好玩之一： 聲明但未賦值和未聲明的變數都是undefined
好玩之二： 只有聲明並賦值為null，它的值才會null
之三： typeof(Object ) 竟然是一個function
好玩之四： typeof(null) 竟然是一個object

　　Null 和Undefined這兩種類型都只有一個值，即null和undefined。從邏輯上看null值表示一個空物件的指針，這就是為什麼typeof(null)會回傳Object。 而undefined是衍生自null值的，所以......

好玩之五： null == undefined 是成立的。

　　但是想一想，Null和Undefined畢竟是兩種不同的類型，即使他們是父類和子類的關係，在C#裡面父類和子類也不能相等啊，不是麼？其實null == undefined就是硬性規定，ECMA規定它們做相等性測試的時候要回傳true所以他們回傳true了。就好像我們在C#裡面重寫了equlas 方法。

　　至於為什麼 typeof(Object) 回傳 function，請看下面的Object與object。

Object 與 object
　　Javascript高級程式一書中說到 」函數在ECMAScript中是對象，不是一種資料型別」。 好像是譯者加上去的，既然typeof(Object) 都回傳 function了，為什麼還說function不是一種資料型態呢？ Object 和 function之間是什麼關係呢？

　　在我看來，Object其實就是一個function，或者我們說Object是一個函數的名字比較容易理解，官方名稱是建構子。

var p = new Object();
p.name = "jesse";
p.age = 18;
 
function Person(name,age)
{
 this.name = name;
 this.age = age;
}
 
var p2 = new Person("jesse", 18);

在上面的程式碼中， 如果我們把Object當作一個函數名稱那麼 new Object() 和 new Person() 性質就是一樣的了。透過 new 運算子得到一個 function 實例, 這裡面的function就已經是類別的概念了。所以這裡的Object其實是一個function。這樣我們就可以解釋為什麼typeof(Object)是function了。

　　那我們在上面所說的複雜型別Object，它又是什麼呢？

Object是function，但是 new Object() 是 object。到這裡面就搞清楚了首字母大寫的這個Object是一個function，而首字母小寫的這個object它才是一種資料型態。所以我建議大家以後說到類型的時候全部用小寫，我們的基本型別是 string, number, boolean。大寫的String, Number, Boolean 它們只是一個函數。而呼叫這些函數所得到的結果是，沒錯，是object。

　　最後，我們是找不到Undefined 和Null 這兩個函數的，所以這兩種資料類型就是undefined和null（為什麼typeof(null)會得到object已經說了）

🎜🎜🎜🎜🎜之六： Object 不是object型🎜

基本包装类型
　　我们上面讲了string, number, boolean是基本类型，基本类型和复杂类型最大的区别就是基本类型没有prototype属性。也就意味着你不能给基本类型随意的添加方法或属性。

var str = "str"; // typeof(str): string
var strObj = new String("str"); // typeof(strObj):object
 
strObj.name = "strObj";
strObj.alert = function () {
 alert(this.name);
};
strObj.alert(); // strObj
 
str.name = "str"; //wrong...
str.alert = function () {
 alert(this);
}
str.alert(); // this is wrong.... nothing is gonna happen.

同时我们还说到了首字母大写的这个String是一个function，所以new String("str")得到的是一个object而不是一个string，这里大家要搞清楚了。我们的问题来了，为什么基本类型string会有一些初始的方法呢？它不是基本类型么？方法是怎么加上去的？

str = str.concat("str2");
strObj = strObj.concat("str2");
strObj.alert(); //之后返回 string 不再是一个对象了, 所以这里也不再有alert方法了。

str是string类型的变量，记住它不是一个对象。它是不应该有方法的，那么它的contact方法从何而来呢？这里后台在调用str.contact的时候实际上偷偷的完成了几步操作：

基于str创建一个String类型的实例

在实例上调用指定的方法

销毁这个实例

　　将这三个步骤想象成这样：

var str2 = new String(str);
str = str2.concat("str2");
str2= null;

我们可以把String，Number,Boolean叫做封装类型, 他们就好像我们在C#里面的自定义类型一样。 但是不要忘记了我们真正的基本类型是string, number, boolean。用String所构造出来的对象是属于object类型的。

好玩之七： String 不是 string
值类型和引用类型
　　我们上面讲到了5种基本类型：string, number, boolean, null, undefined 全部是值类型。Javascript中只有一种引用类型，也就是我们的复杂类型object。那么有人可能会好奇，那么像Date, Regex, Arrary这些是什么类型呢 ? 其实这里面的概念有一点混淆，如果你很好的理解了上面的Object 和object之间的区别，可能会比较好理解一点。 我们可以把function 看成是C#里面 class关键字，我们可以用class定义类，同样我们可以在Javascript中用function来定义类。

在C#中定义类：

namespace ConsoleApplication1
{
class Person
{
 public string Name { get; set; }
  
 public int Age { get; set; }
}
  
class Program
{
 static void Main(string[] args)
 {
 var p =new Person();
 Console.WriteLine(p.GetType()); // ConsoleApplication1.Person
  
 Console.ReadLine();
 }
}
}

在Javascript定义类：

function Person(name,age)
{
 this.name = name;
 this.age = age;
}
 
var p = new Person();
typeof(p); //object

你发现区别了么？如果我们在Javascript中用function定义类，他们的实例将永远是object， 包括原生的那些Date, Array, RegExp。

typeof (new Date()); // object
typeof (new Array()); // object
typeof (new RegExp()); // object

好玩之八： 全部都是object
　　如果全部都是object的话，那我怎么能知道这个对象到底是不是Date或者Person的实例呢？借助于instanceof 就可以了。

终级好玩：我用function创建了一个Person类，然后用new得到一个Person的实例，结果它却不是Person类型的。 这就好像生了个孩子，供他吃穿，但是他却不跟你姓，这得有多么无私伟大才干得出来的事啊！
function类型
　　function类型有两种，函数声明和函数表达式。函数声明具有优先级，可以在声明之前被使用，表达式却不能。

sayGoodNight(); // right
sayHello(); // wrong
 
var sayHello = function (name) {
 alert("Hello, " + name);
};
 
function sayGoodNight(Name) {
 alert("Good Night, "+ name);
}

除此之外，函数表达式还可以像object一样，随意的添加属性。

var sayHello = function (name) {
 alert("Hello, " + name);
};
 
sayHello.age = 18;
sayHello.sayAge = function () {
 alert("I am" + 18) ;
}
sayHello.sayAge(); // I am 18

但是，函数表达式到底是个什么玩意儿呢？ 不能实例化，但是可以随意的添加属性，它和object有什么区别？我们在上面说过，object其实就是一个对象实例。

我们还有大写的Function， 它和function之间的关系会不会和String 和string 一样？( 以下内容比较费脑力，慎入！)

var sayHello = new Function('name','alert("My name is " + name );');
sayHello('Jesse');
sayHello instanceof Function; // true
 
var sayHello2 = function (name) {
 alert('My name is' + name);
};
sayHello2 instanceof Function; // true

我们上面调用Function去构造了一个函数。既没有用函数声明，也没有用函数表达式，不管怎么说这是第三种创建函数的方法，虽然肯定没有多少人用它，因为它不管是参数，还是函数体全部都是字符串，这写起来还不让人崩溃么？

看出什么猫腻来了么？所谓的函数表达式，其实是用一个变量接收了一个function的对象而已。而这个function的对象则是Function的实例。包括用函数声明写出来的函数也是Function的实例。

function sayHello3(name)
{
 alert('My name is' + name);
}
sayHello3 instanceof Function; // true

但是，等等，我们前面说到的String, Date， Array都是function类型的，那Function也是么？

我们前面说所有function的实例都是object类型的，但是对于Function 这个奇异的function来说，它的实例仍然是function类型的，并且我们可以用Function的实例再创造实例。原来我们所说的用function创造出来的类，它不是类，而是Function的实例。

function Person(name) {
 this.name = name;
}
Person instanceof Function; // true

我们再结合自执行函数理解一下，也许会好一点：

(function () {
 alert("something...");
}());

实际上我们上面的function(){} 会返回给我们一个function的实例，那么我们当然可以直接执行它了。这么看来function应该是Javascript里面最特别的类型了。

好玩之十：所有的function都是Function的实例
好玩之十一：Function 本身也是一个function

最后我们来总结一下：

Javascript中有5种基本类型：string, number, boolean, null, undefined。

另外一种复杂类型object 其实是function的实例。

除了Function这个系统里面的function构造器以外，其它所有function的实例都是object类型的。

Date, Array, RegExp 这些都是function类型，同时也是Function的实例。同理，它们的实例也是object类型的。

总结完了，好像也不多，不是么？关于function其实javascript是非常强大的一个功能，作用域以及面向对象的一些知识也是和它息息相关的，我们下一篇就来看看作用域的问题。谢谢大家的关注！

更多Javascript基础回顾之(一) 类型相关文章请关注PHP中文网！