js面向對象編程
經常看到一些JavaScript的代碼臟亂得無法理解,到處都是屬性和方法,或者一個循環套著一個循環。但如果使用面向對象就能很好的理清代碼,並方便理解和修改代碼。如果你不希望自己的代碼只有上帝理解的話,就請盡量考慮使用面向對象的模式。
譯文正文:
到處都是屬性、方法,代碼極其難懂,天哪,我的程序員,你究竟在做什麼?仔細看看這篇指南,讓我們一起寫出優雅的面向對象的JavaScript代碼吧!
作為一個開發者,能否寫出優雅的代碼對於你的職業生涯至關重要。隨著像Node.js這類技術的發展,你甚至可以在伺服器端使用JavaScript了。同樣的,你也可以使用JavaScript來控制MongoDB的持續數據存儲。
文本標記
文本標記只是JavaScript里創建對象的一種方法,當然這里肯定不止這一種,但它是你在只打算創建一個對象實例時的首選方法。
var bill = {};
上面的代碼並不實用,它只是一個空對象。接下來我們動態地向這個對象中添加一些屬性和方法。
bill.name = "Bill E Goat"; bill.sound = function() { console.log( 'bahhh!' ); };
這里添加了屬性name,並且給它分配了值"Bill E Goat"。我們並不需要先創建一個空對象,而可以把所有代碼直接寫在一對括弧里。
var bill = { name: "Bill E Goat", sound: function() { console.log( 'bahhh!' ); }};
是不是很美觀?訪問它的屬性和方法就像呼吸一樣簡單、自然。
bill.name; // "Bill E Goat" bill.sound(); // "bahhh"
如果屬性名不是一個合法的標志符,我們還可以這樣訪問它:
bill['name']; // "Bill E Goat"
注意:我在調用方法時在其後添加了圓括弧。現在,我們再重寫一下當前的sound方法,並添加一個參數。
bill.sound = function(noise) { console.log(noise); }; bill.sound("brrr!"); // "brrr!" He's cold :)
很好,我們已經傳入參數了,並且在方法定義中訪問了它。接下來,向對象中增加一個新方法來訪問name屬性。
bill.sayName = function() { console.log( "Hello " + this.name ); }; bill.sayName(); // "Hello Bill E Goat"
我們可以使用this.propertyName(在本例中即this.name)在方法內訪問屬性。
bill.sayName; // function
怎麼回事?訪問sayName方法返回了一個方法定義。現在讓我們再深入些。
var sound = bill.sound; sound('moo!'); // "moo!"
現在我們指定了sound方法為一個局部函數,可以調用這個函數並且傳遞參數。你認為在復制bill的時候會發生什麼?(類比下克隆羊Dolly)
var sally = bill; sally.name; // "Bill E Goat",可它的名字是Sallysally.name = "Sally"; sally.name; // "Sally",好些了bill.name; // "Sally",問題又轉移到bill身上了
上面的例子中我們新建了一個變數sally,並使它和bill相同,所以bill和sally會在內存中引用了同一個對象。這時候給改變一塊它們就會同時發生改變。再看看下面這段代碼:
bill.name = "Bill E Goat"; bill.sayName(); // "Hello Bill E Goat"; var sayName = bill.sayName; sayName; // function 目前為止一切順利sayName(); // "Hello ",為什麼這里又不再顯示bill的名字了?
bill的name是一個本地實例變數,只對bill可得。當sayName方法被創建為全局變數時,當它碰到this.name聲明時,它會在全局查找name的值。唯一的問題在於name還沒有被定義。現在讓我們在全局定義name,看看會發生什麼:
var name = "Bearded Octo"; sayName(); // "Hello Bearded Octo"
這里我們在全局范圍內定義了name變數,並且賦予了值"Bearded Octo"。當我們在調用sayHello方法時它會在全局范圍內查找name變數,最終會獲得值"Bearded Octo"。我們為什麼不為這幾個對象建立一個共同的「類」呢?
構造函數
構造函數是另一個編寫面向對象JavaScript代碼的方法,當你需要初始化對象的屬性、方法,或者需要創建多個屬性、方法各不相同的實例時,它將是你最佳的選擇。同樣我們先從創建一個空對象開始:
function Game() {};
這個對象包括自己的屬性,你甚至可以在創建對象時傳入屬性,然後再對其進行修改。
var zelda = new Game(); var smb = new Game(); zelda.title = "Legend of Zelda"; smb.title = "Super Mario Brothers"; zelda.title; // "Legend of Zelda" smb.title; // "Super Mario Brothers"
現在這個對象已經有自己的方法了!新創建對象時我們甚至可以傳遞屬性,之後再修改。
function Game(title) { this.title = typeof title !== 'undefined' ? title : ""; }; var zelda = new Game("Legend of Zelda"); zelda.title; // "Legend of Zelda" zelda.title = "Ocarina of Time"; zelda.title; // "Ocarina of Time" var blank = new Game(); blank.title; // ""
也許你沒看明白第二行的內容,其實是使用了三元操作來避免單行的if else,它和下面標準的if else語句是一個意思。
if (typeof title !== 'undefined') { this.title = title; } else { this.title = ""; } // Is the same as this.title = typeof title !== 'undefined' ? title : "";
如果title變數在對象被創建時傳入,title實例變數將會指定為title的值。如果沒有值傳入,那麼title將會被初始化為默認值""。我們同樣可以創建一個方法來訪問這個屬性:
zelda.loveTitle = function() { console.log( "I love " + this.title ); }; zelda.loveTitle(); // "I love Ocarina of Time"
這樣就很整潔了,但是我們還能做得更好。我們可以在Game類中添加一個方法,這樣所有Game類的實例將都能使用此方法。
Game.prototype.heartIt = function() { console.log( "I heart " + this.title ); }; zelda.heartIt(); // "I heart Ocarina of Time" smb.heartIt(); // "I heart Super Mario Brothers"
② js是面向對象的編程語言嗎
是的,js是基於對象的,連他的function函數都是一種對象。所以是面向對象的!
③ JS編程是什麼意思
js就是JavaScript
一、JavaScript是什麼?
1、JavaScript是在網站瀏覽器上運行的編程語言。
主要是向使用HTML和CSS構建的網站添加,並起到實現各種頁面動態效果的作用。例如,在網頁上展示的輪播圖樣式和在咨詢平台上輸入的內容錯誤後顯示的提示信息等這樣的效果。另外針對商城網站裡面購買商品時,使用購物車和費用估算也需要用到JavaScript。所以即使它不怎麼明顯,但依然是編碼人員經常會用到的一種語言。
2、JavaScript是一種多功能的開發語言。
除了向網頁添加動作的用處之外,JavaScript還可以用來實現很多其他的功能。比如它能夠開發出各種網站應用程序,如「聊天工具」和「貨幣圖表」等,可以實時進行修改,這也是JavaScript的主要魅力之一。
二、JavaScript的特點有哪些?
1、腳本語言。JavaScript是一種解釋型的腳本語言,C、C++等語言先編譯後執行,而JavaScript是在程序的運行過程中逐行進行解釋。
2、基於對象。JavaScript是一種基於對象的腳本語言,它不僅可以創建對象,也能使用現有的對象。
3、簡單。JavaScript語言中採用的是弱類型的變數類型,對使用的數據類型未做出嚴格的要求,是基於Java基本語句和控制的腳本語言,其設計簡單緊湊。
4、動態性。JavaScript是一種採用事件驅動的腳本語言,它不需要經過Web伺服器就可以對用戶的輸入做出響應。在訪問一個網頁時,滑鼠在網頁中進行滑鼠點擊或上下移、窗口移動等操作JavaScript都可直接對這些事件給出相應的響應。
5、跨平台性。JavaScript腳本語言不依賴於操作系統,僅需要瀏覽器的支持。因此一個JavaScript腳本在編寫後可以帶到任意機器上使用,前提上機器上的瀏覽器支持JavaScript腳本語言,目前JavaScript已被大多數的瀏覽器所支持。
④ 怎麼學好js
頁面要想實現好的互動性Java是必不可少的,特別是在一些網站專題頁面對於互動性要求更高,中級和高級web前端工程師js是必須要掌握的,下面為大家詳細介紹一下Java。
感覺js學起來「雜而亂」的原因是因為你太「聰明」了,一開始就管的太寬,利害得失也計算的太精細。
要求太完美則心裡承受能力下降,很容易出現「障」。此時,你應該「笨」一些,不要考利那麼長遠,「傻人有傻福」,只要做好今天就夠了。
一些不合理的學習方法和心態也讓你迷失了自我:如:心浮氣躁、眼高手低、好高騖遠,這些都會讓你在「亂七八糟」的js面前深陷迷霧、不能自拔。
此時,你應該重新定位自己的位置,重新去認識js,放下包袱,方能輕松上陣。把杯子先倒空,才能灌新水......
其實,js是前端的核心。影響越來越深的互聯網+會渴求越來越多的js人才,只有經歷過真正刻骨銘心的學習經歷,才能造就出贏得未來的真正精英。
⑤ JavaScript中如何實現面向對象編程
低版本的js中,可以用原型,原型鏈來模擬面向對象中,最關鍵的「類」,
或者ES6中,有class的語法可以用,更貼近其他常見的面向對象的語言,
或者只是單純的給對象綁定一些方法,這樣也可以實現面向對象編程,但是就沒什麼美感了
⑥ 什麼是javascript面向對象編程
面向對象是oop思想,javascript里沒有面向對象只有面向過程