1. 程式人生 > >js--3.物件-13.封裝

js--3.物件-13.封裝

1      封裝

1.1  背景

Javascript是一種基於物件(object-based)的語言,你遇到的所有東西幾乎都是物件。但是,它又不是一種真正的面向物件程式設計(OOP)語言,因為它的語法中沒有class(類)。

那麼,如果我們要把"屬性"(property)和"方法"(method),封裝成一個物件,甚至要從原型物件生成一個例項物件,我們應該怎麼做呢?

1.2  原始模式

1.2.1  eg

1.2.2  弊端

好了,這就是最簡單的封裝了,把兩個屬性封裝在一個物件裡面。但是,這樣的寫法有兩個缺點,一是如果多生成幾個例項,寫起來就非常麻煩;二是例項與原型之間,沒有任何辦法,可以看出有什麼聯絡。

1.3     工廠模式

原始模式的改進

1.3.1  Eg

使用工廠方法建立的物件,使用的建構函式都是Object,所以建立的物件都是Object這個型別,就導致我們無法區分出多種不同型別的物件

1.3.2  弊端

這種方法的問題依然是,cat1和cat2之間沒有內在的聯絡,不能反映出它們是同一個原型物件的例項。

 

1.4     建構函式模式

1.4.1  Eg

為了解決從原型物件生成例項的問題,Javascript提供了一個建構函式(Constructor)模式。

所謂"建構函式",其實就是一個普通函式,但是內部使用了this變數。對建構函式使用new運算子,就能生成例項,並且this變數會繫結在例項物件上。

 

 

1.4.2  弊端

建構函式方法很好用,但是存在一個浪費記憶體的問題。

表面上好像沒什麼問題,但是實際上這樣做,有一個很大的弊端。那就是對於每一個例項物件,type屬性和eat()方法都是一模一樣的內容,每一次生成一個例項,都必須為重複的內容,多佔用一些記憶體。這樣既不環保,也缺乏效率。

         alert(cat1.eat ==cat2.eat); //false

能不能讓type屬性和eat()方法在記憶體中只生成一次,然後所有例項都指向那個記憶體地址呢?回答是可以的。

2      Prototype

2.1  Prototype模式

Javascript規定,每一個建構函式都有一個prototype屬性,指向另一個物件。這個物件的所有屬性和方法,都會被建構函式的例項繼承。

 

2.2  isPrototypeOf()

這個方法用來判斷,某個proptotype物件和某個例項之間的關係。

  alert(Cat.prototype.isPrototypeOf(cat1)); //true

alert(Cat.prototype.isPrototypeOf(cat2));//true

2.3  hasOwnProperty()

每個例項物件都有一個hasOwnProperty()方法,用來判斷某一個屬性到底是本地屬性,還是繼承自prototype物件的屬性。

  alert(cat1.hasOwnProperty("name")); // true

alert(cat1.hasOwnProperty("type"));// false

2.4  in運算子

in運算子可以用來判斷,某個例項是否含有某個屬性,不管是不是本地屬性。

  alert("name" in cat1); // true

  alert("type" in cat1); // true

in運算子還可以用來遍歷某個物件的所有屬性。

  for(var prop in cat1) {alert("cat1["+prop+"]="+cat1[prop]); }

相關推薦

js--3.物件-13.封裝

1      封裝 1.1  背景 Javascript是一種基於物件(object-based)的語言,你遇到的所有東西幾乎都是物件。但是,它又不是一種真正的面向物件程式設計(OOP)語言,因為它的語法中沒有class(類)。 那麼,如果我們要把"屬性"(property

js--3.物件-3.函式

1      函式 function1.1  概念函式也是一個物件    函式中可以封裝一些功能(程式碼),在需要時可以執行這些功能(程式碼),函式中可以儲存一些程式碼在需要的時候呼叫    使用typeof檢查一個函式物件時,會返回function1.2  Mianji函式

js--3.物件-10.原型函式

1      原型物件 1.1  理解概念 在建構函式中存在著一個名為原型的(prototype)物件,相當於一個公共的區域,所有同一個類的例項都可以訪問到這個原型物件,我們可以將物件中共有的內容,統一設定到原型物件中。 以後我們建立建構函式時,可以將這些物件共有的屬性和方

js--3.物件-2.基本和引用資料型別

1      資料型別 1.1  資料型別 JS中的變數可能包含兩種不同資料型別的值:基本資料型別和引用資料型別。 1.2  基本資料型別 S中一共有5種基本資料型別:String、Number、Boolean、Undefined、Null。 基本資料型別的值是無法修

js面向物件思想封裝拖拽功能,相容pc和移動端

我們在開發專案過程中,很可能會碰到頁面上某塊需要可以拖拽移動的功能需求,網上已經有不少前輩分享了相關功能的案例,外掛或者程式碼,但是考慮到專案功能需求,我們可能僅需要實現拖拽移動功能就可以,不需要其他功能,而網上很多外掛往往附帶了其他功能需求。這裡筆者僅對拖拽移

3.Java面向物件程式設計OOA/OOP/OOD/OOAD()/UML類圖、函數語言程式設計Scala(JVM)---類與物件封裝繼承多型、構造方法、覆寫/重寫/override

一、緒論 1.面向物件程式設計正規化(C++、Java、Go)------能進行現實生活的抽象。             每個物件都是一個類。類中包含屬性與方法。 OOA:面向物件分析 OOP:面向物件程式設計

java-13-面向物件封裝

#面向物件之封裝 什麼是封裝 簡單說就是將屬性私有化,提供公有的方法。例如在下方 為什麼要封裝 通過封裝我們可以限制對屬性的訪問限制,同時新增程式的可維護性 this關鍵字是什麼意思 有

JS面向物件程式設計之:封裝、繼承、多型

          一、封裝       (1)封裝通俗的說,就是我有一些祕密不想讓人知道,就通過私有化變數和私有化方法,這樣外界就訪問不到了。然後如果你有一些很想讓大家知道的東西,你就可以通

js刪除物件的屬性及封裝方法

javascript中可以通過delete刪除物件的屬性: 使用方法如下:var obj={}; obj.pro="del"; delete obj.pro; //或者 delete obj[pro] //該操作具有返回值 刪除成功為true失敗為false為了便於使用封裝成

js面向物件3-繼承

一、瞭解繼承 1.1 繼承就是後輩繼承前輩的屬性和方法 1.2 面向物件程式設計(OOP)   JavaScript不是面向物件程式語言, 但是它的特性支援面向物件的程式設計思維。 二、繼承的方法 從父類繼承屬性和方法 物件冒充, 模仿java中的繼承物件冒充, 模仿

java面向物件3大特徵——封裝,繼承,多型

封裝: 封裝的概念:將類的某些資訊隱藏在類內部,不允許外部程式直接訪問,而是通過該類提供的方法來實現對隱藏資訊的操作和訪問 封裝的兩大原則:     1)把儘可能多的東西藏起來,對外提供便捷的介面     2)把所有的屬性藏起來 封裝的步驟:     1)修改屬性的可見性:

JS面向物件程式設計基礎部分(3) 4.1

 Document物件 定義:document物件代表的整個html文件,因此可以去訪問到當前文件中的各個物件(元素)。 1) write() 向文件寫文件或HTML表示式或JavaScript程式碼 2) written() 等同於write()方法,不同的是在每個表示式

js:面向物件程式設計,帶你認識封裝、繼承和多型

週末的時候深入的瞭解了下javascript的面向物件程式設計思想,收穫頗豐,感覺對面向物件程式設計有了那麼一丟丟的瞭解了~很開森 什麼是面向物件程式設計 先上一張圖,可以對面向物件有一個大致的瞭解,然而什麼是面向物件呢,用java中的一句經典語

js物件標籤新增事件&方法的封裝

<pre name="code" class="html"><span style="font-family:Microsoft YaHei;font-size:14px;"><body> <div id="box"> &

理解繼承(一):JS面向物件程式設計(封裝

依然是向阮前輩(阮一峰)學習的部落格原文 學了這一階段和峰大神的幾篇文章,打算下一階段滾回去把指標好好學一下 JS 中,萬物皆物件,但是它又不是一門真正的面向物件程式語言。 那如果我們要把“屬性(prototype)”和方法(“method”)封裝成一個物

js物件3種表示方法

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <t

js面向物件封裝級聯下拉選單列表

本例項開發的級聯下拉選單是根據已有json資料建立的DOM元素。點選文字框後,顯示一級選單。如果選單中包含子選單,選單右側會有指示箭頭。點選選單之後,會再顯示下一級選單,以此類推。當選單下無子選單時,選擇選單後會在文字框中顯示。 開啟後的級聯選單效果如圖所示:   使用例項中封裝好的外掛,只需要有

js獲取css樣式封裝

padding set body script log center auth compute ctype 封裝 function getStyle(obj , attr){ return obj.currentStyle?obj.currentStyle[att

奪命雷公狗TP3.2.3商城13-----無限極分類添加

pac .cn order 方法 信息 行修改 pan xtend ror 由於我們需要使用到的是模型來驗證一下,所以我們先到 D:\phpStudy\WWW\shop\WEB\Admin\Model 下創建一個CateModel.class.php <

js創建類(封裝)

js面向對象 print 一個 tag 概念 實現 con ng- .net js如何創建類(封裝) 學過其他面向對象語言的JavaScripter,可能都應用過類,如:class{},等定義的一系列方法, 但是初學者看是學習js的時候,經常會看到這樣一句