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

javascript 物件導向全新理練之資料的封裝

Jan 04, 2017 am 09:19 AM

今天主要討論如何在 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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1319
25
PHP教程
1269
29
C# 教程
1248
24
JavaScript引擎:比較實施 JavaScript引擎:比較實施 Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時,效果會有所不同,因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析:將源碼轉換為詞法單元。 2.語法分析:生成抽象語法樹。 3.優化和編譯:通過JIT編譯器生成機器碼。 4.執行:運行機器碼。 V8引擎通過即時編譯和隱藏類優化,SpiderMonkey使用類型推斷系統,導致在相同代碼上的性能表現不同。

Python vs. JavaScript:學習曲線和易用性 Python vs. JavaScript:學習曲線和易用性 Apr 16, 2025 am 12:12 AM

Python更適合初學者,學習曲線平緩,語法簡潔;JavaScript適合前端開發,學習曲線較陡,語法靈活。 1.Python語法直觀,適用於數據科學和後端開發。 2.JavaScript靈活,廣泛用於前端和服務器端編程。

JavaScript:探索網絡語言的多功能性 JavaScript:探索網絡語言的多功能性 Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言,因其多樣性和靈活性而廣泛應用。 1)前端開發:通過DOM操作和現代框架(如React、Vue.js、Angular)構建動態網頁和單頁面應用。 2)服務器端開發:Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發:通過ReactNative和Electron實現跨平台開發,提高開發效率。

如何使用Next.js(前端集成)構建多租戶SaaS應用程序 如何使用Next.js(前端集成)構建多租戶SaaS應用程序 Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成,並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

使用Next.js(後端集成)構建多租戶SaaS應用程序 使用Next.js(後端集成)構建多租戶SaaS應用程序 Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序(一個Edtech應用程序),您可以做同樣的事情。 首先,什麼是多租戶SaaS應用程序? 多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

從C/C到JavaScript:所有工作方式 從C/C到JavaScript:所有工作方式 Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1)C/C 是靜態類型語言,需手動管理內存,而JavaScript是動態類型,垃圾回收自動處理。 2)C/C 需編譯成機器碼,JavaScript則為解釋型語言。 3)JavaScript引入閉包、原型鍊和Promise等概念,增強了靈活性和異步編程能力。

JavaScript和Web:核心功能和用例 JavaScript和Web:核心功能和用例 Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互;2)在用戶提交數據前進行客戶端驗證,提高用戶體驗;3)通過AJAX技術實現與服務器的無刷新通信。

JavaScript在行動中:現實世界中的示例和項目 JavaScript在行動中:現實世界中的示例和項目 Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用,涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

See all articles