Javascript oop設計模式 面向對象編程
最初我們寫js代碼的時候是這么寫
function checkName(){ //驗證姓名 } function checkEmail(){ //驗證郵箱 } function checkPassword(){ //驗證密碼 }這種方式會造成全局變量的嚴重污染，再過渡到
var checkObject = { checkName : function(){}; checkEmail: function(){}; checkPassword: funcion(){}; }//也可如此寫var checkObject = {} // || function(){}checkObject.checkName = function(){};checkObject.checkEmail = function(){};checkObject.checkPassword = function(){};//以上這兩種寫法不能復制一份，也就是說在new 方法創(chuàng)建新的對象的時候，新對象不能繼承這些方法以上是直接使用，而不是新建對象復制一份的,復制一份的話可以這么寫
var checkObject = function(){ return { checkName:function(){}, checkEmail:function(){}, checkPassword:function(){} } }//使用的時候 可以var a = checkObject();a.checkName(); 這么寫可以實現對象的復制 但是這不符合面向對象，新創(chuàng)建的類和checkObject 沒有任何關系
于是我們可以采用構造函數的方式書寫代碼
var checkObject = function(){ this.checkName = function(){} this.checkEmail = function(){} this.checkPassword = function(){} }//像這樣我們便可以用CheckObject 來創(chuàng)建新的對象了,通過new 來創(chuàng)建對象，創(chuàng)建出來的每個對象都會對this上的屬性進行復制,但是這么做的話，每次都會有相對較大消耗，對于共有的方法，我們可以放在對象的原型上var checkObject = function(){};checkObject.prototype.checkName = function(){};//...//這樣寫要將prototype 書寫很多遍 ，所以我們可以這么寫,并實現鏈式調用，將this返回var checkObject = function(){};checkObject.prototype={ checkName:function(){ //驗證姓名 return this; }, checkEmail:function(){ //驗證郵箱 return this }, checkPassword:function(){ //驗證密碼 return this; } }// 這兩種方式不可混用，否則后邊會覆蓋前邊，此時我們調用只需new checkObject().checkName().checkEmail().checkPassword();下面再來介紹一下面向對象和面向過程兩種編程方式 .page 10
多個function 書寫的方式是一種面向過程書寫代碼的實現方式，添加了很多全局變量而且不利于別人復用，在別人使用時你也不可修改，我們可以改用面向對象方式來重寫，我們把需求抽成一個對象，這個對象稱之為類，面向對象一個重要特點就是封裝，將屬性和方法封裝在一個對象中，就像將物品放在一個旅行箱中，這樣不管是使用和管理我們都方便，(雖然有時候感覺直接拿在外邊擺放也很方便，但是東西一多便不利于管理)
var Book = (function () { //靜態(tài)私有變量 var bookNum = 0; //靜態(tài)私有方法 function checkBook() { } //返回構造函數 return function (newId, newName, newPrice) { //私有變量 var name, price; //私有方法 function checkId(id) { } //特權方法 this.getPrice = function () { }; this.getName = function () { }; this.setName = function (name) { this.name = name }; this.setPrice = function () { }; //公有屬性 this.id = newId; //公有方法 this.copy = function () { }; bookNum++; if (bookNum > 100) throw new Error('oop javascript'); //構造器 實例化過程中被調用的方法 this.setName(name); this.setPrice(price); } })(); Book.prototype = { //靜態(tài)公有屬性 isJSBook: false, //靜態(tài)公有方法 display: function () { } }; //對比Java 別被js 起的這些名字弄混了 其實Js 就模仿了一個New 其他的跟Java基本一樣 類 全局變量 方法 有自己的理解比較好 以前未想明白 // java 為什么那么些//為了看起來更像一個類 我們將原型上的方法 寫到類里邊
var Book = (function () { //靜態(tài)私有變量 var bookNum = 0; //靜態(tài)私有方法 function checkBook() { } //返回構造函數 function _Book(newId, newName, newPrice) { //私有變量 var name, price; //私有方法 function checkId(id) { } //特權方法 this.getPrice = function () { }; this.getName = function () { }; this.setName = function (name) { this.name = name }; this.setPrice = function () { }; //公有屬性 this.id = newId; //公有方法 this.copy = function () { }; bookNum++; if (bookNum > 100) throw new Error('oop javascript'); //構造器 實例化過程中被調用的方法 this.setName(name); this.setPrice(price); } _Book.prototype = { //靜態(tài)公有屬性 isJSBook: false, //靜態(tài)公有方法 display: function () { } }; return _Book; })();下面再介紹一種創(chuàng)建對象的安全模式
//注意 執(zhí)行new Book 方法之前 this.title 會先執(zhí)行一次 var Book = function (title) { if (this instanceof Book) { alert(1); this.title = title; }else{ return new Book(title); } }; var book = new Book('js'); alert(book.title);感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
新聞熱點
疑難解答
