問：Javascript有物件麼？

答：有。

問：你怎麼理解面向物件的程式設計？

答：那我用code來說明下

function Foo(who) {

this.me = who;

}

Foo.prototype.identify = function() {

return "I am " + this.me;

};

function Bar(who) {

Foo.call( this, who );

}

Bar.prototype = Object.create( Foo.prototype );

Bar.prototype.speak = function() {

alert( "Hello, " + this.identify() + "." );

};

var b1 = new Bar( "b1" );

var b2 = new Bar( "b2" );

b1.speak();

b2.speak();

或者下面的方式

----------

Foo = {

init: function(who) {

this.me = who;

},

identify: function() {

return "I am " + this.me;

}

};

Bar = Object.create( Foo );

Bar.speak = function() {

alert( "Hello, " + this.identify() + "." );

};

var b1 = Object.create( Bar );

b1.init( "b1" );

var b2 = Object.create( Bar );

b2.init( "b2" );

b1.speak();

b2.speak();

//如果不支援object.create，使用下面的方法

if (!Object.create) {

Object.create = function(o) {

function F(){}

F.prototype = o;

return new F();

};

}

問：這就是面向物件了？

答：是的，js中物件就是函式，可以這麼寫。

反正我之前就是這麼回答的，雖然可以看到和Java面向物件的風格還差一點。

面向物件的程式設計有三個最基本的特性：封裝、繼承、多型。 在上面的例子中，有封裝、有繼承、多型的話，可以使用duckType。 但是總是差點意思不是麼？ 知識複習：ES6的class方法Es6-class

所以面向物件在前端是一種強力規約，規定你的操作必須符合特定的程式。方便程式管理。

前端開發當然可以使用面向物件程式設計概念。在這個基礎上我在著重強調一下，面向物件程式設計，不僅對前端非常有用，對後端當然也是非常有用的。我們這個問題就專門針對前端來談一談。

前端我們關注的是介面的設計。那麼一個介面之中會分為幾個區域，每個區域裡面又分為幾個子區域。這些大大小小的區域我們都可以定義為一個物件，俗稱元件。這些元件可能會有一些共性，比如說都會有初始化函式和釋放函式。那麼我們就可以把這些共性的方法放到一個基本元件裡面，俗稱基類。

基本元件可以定義為抽象的元件也可以定義為實際使用的元件。基本的方法也可以手工呼叫也可以靠整個架構來進行自動的呼叫。如果你用過angular，vue, react這些架構的話，我相信你知道我在說什麼。

除了元件的設計和定義以外，在前端也需要定義一些非介面性的類，或者其他的邏輯單元，這些非介面的類和邏輯單元，用來儲存前端的資料和邏輯計算。如果對這一部分使用面向物件變成概念的話，會降低程式的複雜度，增加程式的可維護性和可擴充套件性。

如果你使用typescript, 這樣的面向物件程式語言來開發前端的話，那自然的，你已經有面向物件程式設計的概念了。這門語言是Javacript的超集。如果你有面向物件程式設計的經驗，學習學好這門語言根本不在話下。

即使你在使用JavaScript， 你也可以透過函式的方法來定義原型基類，然後透過在擴充套件的函數里面定義擴充套件原型，這樣你新的函式既可以享有原有函式的所有方法也可以新增上新的功能實現這實際上就是父類和子類的一個概念。

實際上所有的typescript程式碼，最後在執行的時候都需要編譯成JavaScript。

也就是說所有的typeacript面向物件的程式設計方法，在編譯後的JavaScript, 你都可以找到對應的例子。

說完了 JavaScript相關的知識, 再來說一下前端開發離不開的樣式語言。現在比較流行的樣式語言是sass家族, 諸如less, scss。他們最終都會編譯成傳統的CSS語言。所不同的是這些流行的樣式語言提供了面向物件的程式設計概念。在寫這些樣式語言的時候，可以像面嚮物件語言一樣使用基本的類，擴充套件的類，基本的函式和擴充套件的函式。與此同時，這些新的樣式語言都支援數結構。那麼數結構本身就有子節點，父節點的概念。這是文件模型DOM本身的對應關係。

這一步也就引申到了html語言本身。這門標記語言自身作為一棵樹存在。透過這棵樹你可以追溯到你想要的那一部分內容。這個過程本身就是把整個文件作為一個樹物件來進行操作的。