搜尋
首頁web前端js教程javascript 物件導向全新理練之資料的封裝

今天主要討論如何在 JavaScript 腳本中實現資料的封裝(encapsulation)。
資料封裝說的簡單點就是把不希望呼叫者看見的內容隱藏起來。它是物件導向程式設計的三要素之首,其它兩個是繼承和多態,關於它們的內容在後面再討論。 
關於資料封裝的實現,在 C++、Java、C# 等語言中是透過 public、private、static 等關鍵字實現的。在 JavaScript 則採用了另外一種截然不同的形式。在討論如何具體實現某種方式的資料封裝前,我們先說幾個簡單的,大家所熟知卻又容易忽略的 JavaScript 的概念。 
1 幾個基本概念 
1.1 變數定義 
在 JavaScript 語言中,是透過 var 的關鍵字定義變數。 
但是如果我們直接給一個沒有使用 var 定義的變數賦值,那麼這個變數就會變成全域變數。 
一般情況下,我們應該避免使用沒有用 var 定義的變量,主要原因是它會影響程式的執行效率,因為訪問全域變量速度比局部變量慢得多。 
但是這種用法可以保證我們的變數一定是全域變數。 
另外,為了確保速度,我們在使用全域變數時,可以透過 var 定義一個局部變量,然後將全域變數賦予之,由此可以得到一個全域變數的局部引用。 
1.2 變數類型 
沒有定義的變量,類型為 undefined。 
變數的值可以是函數。 
函數在 JavaScript 中可以扮演類別的角色。 
1.3 變數作用域 
變數作用域是指變數存活週期的有效範圍。 
單純用 { } 建立的區塊不能建立作用域。 
with 將它包含的物件作用域加入到目前作用域鏈中,但 with 不建立新的作用域。 with 區塊結束後,會將物件作用域從目前作用域鏈中刪除。 
try-catch 中,catch 的錯誤物件只在 catch 區塊中有效,但 catch 區塊中定義的變數屬於目前作用域。 
其它如 if、for、for-in、while、do-while、switch 等控制語句所建立的區塊無法建立作用域。 
用 function 建立的函數,會建立一個新的作用域加入到目前作用域。
2 封裝 
下面我們就來討論具體的封裝。首先說一下大家最熟悉的幾種封裝:私有實例成員、公有實例成員和公有靜態成員。最後會討論一下大家所不熟悉的私有靜態成員和靜態類別的封裝辦法。因為下面要討論的是物件導向編程,所有當函數作為類別來定義和使用時,我們暫且將其成為類別。 
2.1 私人實例成員 
私有實例成員在 JavaScript 中實際上可以用函數內的局部變數來實現,它相當於類別的私有實例成員。例如: 

class1 = function() { 
// private fields 
var m_first = 1; 
var m_second = 2; 
// private methods 
function method1() { 
alert(m_first); 
} 
var method2 = function() { 
alert(m_second); 
} 
// constructor 
{ 
method1(); 
method2(); 
} 
} 
var o = new class1(); 
// error 
alert(o.m_first); 
o.method1();

這裡 m_first 和 m_second 是 class1 的兩個私有實例字段,method1 和 method2 是兩個私有實例方法。他們只能在該類別的物件內部被使用,在物件外無法使用。 
這裡大家會發現創建私有方法有兩種方式,一種是直接在類別中定義方法,另一種是先定義一個局部變數(私有實例欄位),然後定義一個匿名方法賦值給它。
直接在類別中定義方法,則該方法的作用域就是這個類,因此這個方法在此類外不能夠被訪問,而它又可以訪問類中所有的私有實例字段,這就保證了這是一個私有實例方法。 
第二種建立私有實例方法的方式跟第一種方式的效果是一樣的,但是第二種方式比較靈活一些。 
你應該還會注意到,class1 中把建構器程式碼用 { } 括起來了,這樣做雖然沒有必要,但是程式碼看起來更清晰。 
關於這段構造器程式碼,還有兩點需要說明的地方: 
1、構造器程式碼必須放在整個類別定義的最後,這樣做是為了確保在它當中被呼叫的方法都已經被定義了。因為JavaScript 是解釋型語言,所以,它會按照從上到下的順序執行,因此,如果構造器程式碼放在其它方法定義的前面,則執行到呼叫語句時找不到要呼叫的方法,就會出錯。
2、我們已經知道{ } 創建的塊不會改變作用域,因此如果在這樣的構造器代碼中創建局部變量,實際上是在整個類別中創建私有實例成員,所以,如果需要用到局部變量,應當定義一個私有實例方法,例如可以命名為constructor(),在constructor() 這個私有實例方法中定義局部變數和原來{ } 建構器中要執行的程式碼,然後在類別的最後直接呼叫它就可以了。所以更好的寫法是這樣的: 

class1 = function() { 
// private fields 
var m_first = 1; 
var m_second = 2; 
// private methods 
function constructor() { 
method1(); 
method2(); 
} 
function method1() { 
alert(m_first); 
} 
var method2 = function() { 
alert(m_second); 
} 
constructor(); 
} 
var o = new class1(); 
// error 
alert(o.m_first); 
o.method1();

最后,你可能还会发现 class1 的定义我们没有用 var,这样做我们就可以保证它是个全局的类了。 
2.2 公有实例成员 
公有实例成员可以通过两种方式来创建,我们先来看下面这个例子: 

class2 = function() { 
// private fields 
var m_first = 1; 
var m_second = 2; 
// private methods 
function method1() { 
alert(m_first); 
} 
var method2 = function() { 
alert(m_second); 
} 
// public fields 
this.first = "first"; 
this.second = ['s','e','c','o','n','d']; 

// public methods 
this.method1 = method2; 

this.method2 = function() { 
alert(this.second); 
} 
// constructor 
{ 
method1(); 
method2(); 
} 
} 
// public method 
class1.prototype.method3 = function() { 
alert(this.first); 
} 

var o = new class2(); 

o.method1(); 
o.method2(); 
o.method3(); 
alert(o.first);

我们发现这个例子是在 class1 的例子上做了一些补充。给它添加了公有实例字段和公有实例方法,我们把它们通称为公有实例成员。 
我们应该已经发现,创建公有实例成员其实很简单,一种方式是通过在类中给 this.memberName 来赋值,如果值是函数之外的类型,那就是个公有实例字段,如果值是函数类型,那就是公有实例方法。另外一种方式则是通过给 className.prototype.memberName 赋值,可赋值的类型跟 this.memberName 是相同的。 
到底是通过 this 方式定义好呢,还是通过 prototype 方式定义好呢? 
其实它们各有各的用途,它们之间不是谁比谁更好的关系。在某些情况下,我们只能用其中特定的一种方式来定义公有实例成员,而不能够使用另一种方式。原因在于它们实际上是有区别的: 
1、prototype 方式只应该在类外定义。this 方式只能在类中定义。 
2、prototype 方式如果在类中定义时,则存取私有实例成员时,总是存取最后一个对象实例中的私有实例成员。 
3、prototype 方式定义的公有实例成员是创建在类的原型之上的成员。this 方式定义的公有实例成员,是直接创建在类的实例对象上的成员。 
基于前两点区别,我们可以得到这样的结论:如果要在公有实例方法中存取私有实例成员,那么必须用 this 方式定义。 
关于第三点区别,我们后面在讨论继承时再对它进行更深入的剖析。这里只要知道有这个区别就可以了。 
我们还会发现,公有实例成员和私有实例成员名字是可以相同的,这样不会有冲突吗? 
当然不会。原因在于它们的存取方式不同,公有实例成员在类中存取时,必须要用 this. 前缀来引用。而私有实例成员在类中存取时,不使用也不能够使用 this. 前缀来存取。而在类外存取时,只有公有成员是可以通过类的实例对象存取的,私有成员无法存取。 
2.3 公有静态成员 
公有静态成员的定义很简单,例如: 

class3 = function() { 
// private fields 
var m_first = 1; 
var m_second = 2; 
// private methods 
function method1() { 
alert(m_first); 
} 
var method2 = function() { 
alert(m_second); 
} 
// constructor 
{ 
method1(); 
method2(); 
} 
} 

// public static field 
class3.field1 = 1; 

// public static method 
class3.method1 = function() { 
alert(class3.field1); 
} 

class3.method1();

这个例子的 class3 跟 class1 很像。不同的是 class3 的外面,我们又给 class3 定义了一个静态字段和静态方法。 
定义的方式就是给 className.memberName 直接赋值。 
这里定义的静态字段和静态方法都是可以被直接通过类名引用来存取的,而不需要创建对象。因此它们是公有静态成员。 
不过有点要记住,一定不要将公有静态成员定义在它所在的类的内部,否则你会得到非你所期望的结果。我们可以看下面这个例子: 

class4 = function() { 
// private fields 
var m_first = 1; 
var m_second = 2; 

var s_second = 2; 

// private methods 
function method1() { 
alert(m_first); 
} 
var method2 = function() { 
alert(m_second); 
} 
class4.method1 = function() { 
s_second++; 
} 
class4.method2 = function() { 
alert(s_second); 
} 
} 
var o1 = new class4(); 
class4.method2(); // 2 
class4.method1(); 
class4.method2(); // 3 
var o2 = new class4(); 
class4.method2(); // 2 
class4.method1(); 
class4.method2(); // 3

这个例子中,我们期望 s_second 能够扮演一个私有静态成员的角色,但是输出结果却不是我们所期望的。我们会发现 s_second 实际上是 class4 的一个私有实例成员,而不是私有静态成员。而 class4 的 method1 和 method2 所存取的私有成员总是类的最后一个实例对象中的这个私有实例成员。 
问题出在哪儿呢? 
问题出在每次通过 new class4() 创建一个对象实例时,class4 中的所有语句都会重新执行,因此,s_second 被重置,并成为新对象中的一个私有实例成员。而 class4.method1 和 class4.method2 也被重新定义了,而这个定义也将它们的变量作用域切换到了最后一个对象上来。这与把通过 prototype 方式创建的公有实例方法定义在类的内部而产生的错误是一样的。 
所以,一定不要将公有静态成员定义在它所在的类的内部!也不要把通过 prototype 方式创建的公有实例方法定义在类的内部! 
那如何定义一个私有静态成员呢? 
2.4 私有静态成员 
前面在基本概念里我们已经清楚了,只有用 function 创建函数,才能创建一个新的作用域,而要创建私有成员(不论是静态成员,还是实例成员),都需要通过创建新的作用域才能够起到数据隐藏的目的。下面所采用的方法就是基于这一点来实现的。 
实现私有静态成员是通过创建一个匿名函数函数来创建一个新的作用域来实现的。 
通常我们使用匿名函数时都是将它赋值给一个变量,然后通过这个变量引用该匿名函数。这种情况下,该匿名函数可以被反复调用或者作为类去创建对象。而这里,我们创建的匿名函数不赋值给任何变量,在它创建后立即执行,或者立即实例化为一个对象,并且该对象也不赋值给任何变量,这种情况下,该函数本身或者它实例化后的对象都不能够被再次存取,因此它唯一的作用就是创建了一个新的作用域,并隔离了它内部的所有局部变量和函数。因此,这些局部变量和函数就成了我们所需要的私有静态成员。而这个立即执行的匿名函数或者立即实例化的匿名函数我们称它为静态封装环境。 
下面我们先来看通过直接调用匿名函数方式来创建带有私有静态成员的类的例子: 

class5 = (function() { 
// private static fields 
var s_first = 1; 
var s_second = 2; 

// private static methods 
function s_method1() { 
s_first++; 
} 
var s_second = 2; 

function constructor() { 
// private fields 
var m_first = 1; 
javascript面向对象全新理练(二) 
var m_second = 2; 

// private methods 
function method1() { 
alert(m_first); 
} 
var method2 = function() { 
alert(m_second); 
} 

// public fields 
this.first = "first"; 
this.second = ['s','e','c','o','n','d']; 

// public methods 
this.method1 = function() { 
s_second--; 
} 

this.method2 = function() { 
alert(this.second); 
} 

// constructor 
{ 
s_method1(); 
this.method1(); 
} 
} 
// public static methods 
constructor.method1 = function() { 
s_first++; 
alert(s_first); 
} 
constructor.method2 = function() { 
alert(s_second); 
} 

return constructor; 
})(); 

var o1 = new class5(); 
class5.method1(); 
class5.method2(); 
o1.method2(); 
var o2 = new class5(); 
class5.method1(); 
class5.method2(); 
o2.method2(); 
这个例子中,通过 
(function() { 
... 
function contructor () { 
... 
} 
return constructor; 
})();

来创建了一个静态封装环境,实际的类是在这个环境中定义的,并且在最后通过 return 语句将最后的类返回给我们的全局变量 class5,然后我们就可以通过 class5 来引用这个带有静态私有成员的类了。 
为了区分私有静态成员和私有实例成员,我们在私有静态成员前面用了 s_ 前缀,在私有实例成员前面加了 m_ 前缀,这样避免了重名,因此在对象中总是可以存取私有静态成员的。 
但是这种命名方式不是必须的,只是推荐的,私有静态成员可以跟私有实例成员同名,在重名的情况下,在类构造器和在类中定义的实例方法中存取的都是私有实例成员,在静态方法(不论是公有静态方法还是私有静态方法)中存取的都是私有静态成员。 
在类外并且在静态封装环境中通过 prototype 方式定义的公有实例方法存取的是私有静态成员。 
在静态封装环境外定义的公有静态方法和通过 prototype 方式定义的公有实例方法无法直接存取私有静态成员。 
另外一种方式通过直接实例化匿名函数方式来创建带有私有静态成员的类的例子跟上面的例子很相似: 

new function() { 
// private static fields 
var s_first = 1; 
var s_second = 2; 

// private static methods 
function s_method1() { 
s_first++; 
} 
var s_second = 2; 

class6 = function() { 
// private fields 
var m_first = 1; 
var m_second = 2; 

// private methods 
function method1() { 
alert(m_first); 
} 
var method2 = function() { 
alert(m_second); 
} 

// public fields 
this.first = "first"; 
this.second = ['s','e','c','o','n','d']; 

// public methods 
this.method1 = function() { 
s_second--; 
} 

this.method2 = function() { 
alert(this.second); 
} 

// constructor 
{ 
s_method1(); 
this.method1(); 
} 
} 
// public static methods 
class6.method1 = function() { 
s_first++; 
alert(s_first); 
} 
class6.method2 = function() { 
alert(s_second); 
} 
}; 

var o1 = new class6(); 
class6.method1(); 
class6.method2(); 
o1.method2(); 
var o2 = new class6(); 
class6.method1(); 
class6.method2(); 
o2.method2();

这个例子的结果跟通过第一种方式创建的例子是相同的。只不过它的静态封装环境是这样的: 
new function() { 
... 
}; 
在这里,该函数没有返回值,并且对于 class5 的定义是直接在静态封装环境内部通过给一个没有用 var 定义的变量赋值的方式实现的。 
当然,也完全可以在 
(function() { 
... 
})(); 
这种方式中,不给该函数定义返回值,而直接在静态封装环境内部通过给一个没有用 var 定义的变量赋值的方式来实现带有私有静态成员的类的定义。 
这两种方式在这里是等价的。 
2.5 静态类 
所谓的静态类,是一种不能够被实例化,并且只包含有静态成员的类。 
在 JavaScript 中我们通过直接实例化一个匿名函数的对象,就可以实现静态类了。例如: 

class7 = new function() { 
// private static fields 
var s_first = 1; 
var s_second = 2; 
// private static method 
function method1() { 
alert(s_first); 
} 
// public static method 
this.method1 = function() { 
method1(); 
alert(s_second); 
} 
} 
class7.method1();

大家会发现,class7 其实就是个对象,只不过这个对象所属的是匿名类,该类在创建完 class7 这个对象后,就不能再被使用了。而 class7 不是一个 function,所以不能够作为一个类被实例化,因此,这里它就相当于一个静态类了。

更多javascript 面向对象全新理练之数据的封装相关文章请关注PHP中文网!


陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
在JavaScript中替換字符串字符在JavaScript中替換字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替換方法詳解及常見問題解答 本文將探討兩種在JavaScript中替換字符串字符的方法:在JavaScript代碼內部替換和在網頁HTML內部替換。 在JavaScript代碼內部替換字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項,需使用正則表達式並添加全局標誌g: str = str.replace(/fi

jQuery檢查日期是否有效jQuery檢查日期是否有效Mar 01, 2025 am 08:51 AM

簡單JavaScript函數用於檢查日期是否有效。 function isValidDate(s) { var bits = s.split('/'); var d = new Date(bits[2] '/' bits[1] '/' bits[0]); return !!(d && (d.getMonth() 1) == bits[1] && d.getDate() == Number(bits[0])); } //測試 var

jQuery獲取元素填充/保證金jQuery獲取元素填充/保證金Mar 01, 2025 am 08:53 AM

本文探討如何使用 jQuery 獲取和設置 DOM 元素的內邊距和外邊距值,特別是元素外邊距和內邊距的具體位置。雖然可以使用 CSS 設置元素的內邊距和外邊距,但獲取準確的值可能會比較棘手。 // 設定 $("div.header").css("margin","10px"); $("div.header").css("padding","10px"); 你可能會認為這段代碼很

10個jQuery手風琴選項卡10個jQuery手風琴選項卡Mar 01, 2025 am 01:34 AM

本文探討了十個特殊的jQuery選項卡和手風琴。 選項卡和手風琴之間的關鍵區別在於其內容面板的顯示和隱藏方式。讓我們深入研究這十個示例。 相關文章:10個jQuery選項卡插件

10值得檢查jQuery插件10值得檢查jQuery插件Mar 01, 2025 am 01:29 AM

發現十個傑出的jQuery插件,以提升您的網站的活力和視覺吸引力!這個精選的收藏品提供了不同的功能,從圖像動畫到交互式畫廊。讓我們探索這些強大的工具:相關文章:1

HTTP與節點和HTTP-Console調試HTTP與節點和HTTP-Console調試Mar 01, 2025 am 01:37 AM

HTTP-Console是一個節點模塊,可為您提供用於執行HTTP命令的命令行接口。不管您是否針對Web服務器,Web Serv

自定義Google搜索API設置教程自定義Google搜索API設置教程Mar 04, 2025 am 01:06 AM

本教程向您展示瞭如何將自定義的Google搜索API集成到您的博客或網站中,提供了比標準WordPress主題搜索功能更精緻的搜索體驗。 令人驚訝的是簡單!您將能夠將搜索限制為Y

jQuery添加捲軸到DivjQuery添加捲軸到DivMar 01, 2025 am 01:30 AM

當div內容超出容器元素區域時,以下jQuery代碼片段可用於添加滾動條。 (無演示,請直接複製到Firebug中) //D = document //W = window //$ = jQuery var contentArea = $(this), wintop = contentArea.scrollTop(), docheight = $(D).height(), winheight = $(W).height(), divheight = $('#c

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。