首先先生明一下JavaScript面對對象和Java，c#這種高級語言的面對對象有很較大的不同。

JavaScript在面對對象“繼承”的時候，可以動態的修改修正。換句話說可以動態的繼承，在執行的過程中可以隨時的修正繼承關系，屬性等。然而Java等高級語言的面對對象在聲明類的同時，就要確定繼承方式，如同模具一樣，你一旦選擇了模具就不能再次修改了。

之所以JavaScript中你可以自由的“捏制”你想要的對象，在于JavaScript中有prototype（原型）提供給開發者。

JavaScript中聲明對象的常見的幾種方式：

var obj = {

?name:'jack',

age : 20,

run : function()

{

alert(this.name);

}

}

var obj = ?new Object();

obj.name = 'jack';

obj.age = 20;

obj.run = function()

{

alert(this.name);

}

上面兩種方式我們也經常看到，但是對于JavaScript聲明類，還是較為常用function關鍵字，也是較為官方正式的方式。

function Father (){

?var name = 'jack';

var age 20;

var run = function()

{

?alert(name);

}

}

var f = new Father(); ?//聲明對象

那么這里就需要說明函數和對象是什么關系？

在這里我先總結一下下面講述的主旨：在JavaScript中對象最終源于函數的產生的，但是函數又有對應的對象原型（Object），但是函數又最終是Function構造器創建的。看了我這段話的總結似乎很是眩暈，那么慢慢看接下來的解析吧。

解析之前，先說下我們的老朋友，typeof() 這個方法可以讓我們看到類型。

function Foo(){
console.log("F run");
}
var obj ?= new Object();
var f = new Foo();
console.log(typeof(obj));
console.log(typeof(f));

說明new object 和new function 都是對象類型。（只要調用new 在JavaScript中都是創建一個對象）為什么呢？

那么我們需要了解Object和function都有prototype屬性，Object的prototype屬性是空（這個一定要記住），function的prototype屬性指向object；prototype是什么我們稍后再講。

圖中_proto_是隱式的，js就是通過它指向的object，于是才有了自己的prototype。看看object在js中怎么定義的：

console.log(Object);

正好解釋了上圖中object是函數類型，所以說object也是誕生于函數，也是用函數聲明的；所以js中函數是面對對象的根源，也是類的構造器。

看完這個圖，你可能對兩個東西產生好奇，分別是prototype和constructor。先說prototype；它是原型鏈指針或者引用，是js尋找上級類對象的指針，將繼承的關系連接起來。constructor是構造器，是創建函數或者類對象的構造器。接下來分析函數和object的構造器：

console.log(typeof(Foo.constructor));
console.log(Foo.constructor);

函數的constructor是函數類型，且是Function，Function是js中函數的構造器。（注意是大寫的）

那object呢？

var obj ?= new Object();
var f1 = new Foo();
console.log(typeof(f1.constructor));
console.log(f1.constructor);

可見object ?f1是類Foo創建的，那么構造器是Foo函數，是函數類型。由上面的說明，Foo的構造器是Function，由Function創建。

var obj ?= new Object();
console.log(typeof(obj.constructor));
console.log(obj.constructor);

object的構造器也是函數類型 -- 可見所有的構造器都是函數類型；且是Object()函數。那么是不是Object()函數也應該存在構造器，也應該是Function這個最基本的構造器吧。

console.log(typeof(Object.constructor));
console.log(Object.constructor);

完全說對了，Object函數也是來源于Function，這也完全說明了，Function是js中一切類與對象以及函數的來源。

那么Function有自己的prototype屬性嗎？有自己的constructor嗎？

console.log(Function);
console.log(Function.constructor);

可見Function 的constructor是自身。

console.log(Function.prototype);

Function 的prototype是指向自己構造空function。

function Foo(){
console.log("F run");
}


var f = new Foo();
console.log(typeof(obj));
console.log(Foo.prototype);

瀏覽器輸出的日志截圖：

從輸出的日志展示的constructor和prototype屬性可以證明上面的流程圖。

總結

以上是生活随笔為你收集整理的Javascript的面对对象的理解 【上】（prototype，函数和对象等概念）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。