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的時候,經常會看到這樣一句