亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb

首頁 > 編程 > JavaScript > 正文

JS面向對象基礎講解(工廠模式、構造函數模式、原型模式、混合模式、動態原型模式)

2019-11-20 14:15:53
字體:
來源:轉載
供稿:網友

什么是面向對象?面向對象是一種思想?。◤U話)。

  面向對象可以把程序中的關鍵模塊都視為對象,而模塊擁有屬性及方法。這樣我們如果把一些屬性及方法封裝起來,日后使用將非常方便,也可以避免繁瑣重復的工作。接下來將為大家講解在JS中面向對象的實現。

   工廠模式

  工廠模式是軟件工程領域一種廣為人知的設計模式,而由于在ECMAScript中無法創建類,因此用函數封裝以特定接口創建對象。其實現方法非常簡單,也就是在函數內創建一個對象,給對象賦予屬性及方法再將對象返回即可。

function createBlog(name, url) {  var o = new Object();  o.name = name;  o.url = url;  o.sayUrl= function() {    alert(this.url);  }  return o;}var blog1 = createBlog('wuyuchang', '//www.49028c.com/');

可以看到工廠模式的實現方法非常簡單,解決了創建多個相似對象的問題,但是工廠模式卻無從識別對象的類型,因為全部都是Object,不像Date、Array等,因此出現了構造函數模式。

  構造函數模式

  ECMAScript中構造函數可以創建特定類型的對象,類似于Array、Date等原生JS的對象。其實現方法如下:

function Blog(name, url) {  this.name = name;  this.url = url;  this.alertUrl = function() {    alert(this.url);  }}var blog = new Blog('wuyuchang', '//www.49028c.com/');console.log(blog instanceof Blog);  // true, 判斷blog是否是Blog的實例,即解決了工廠模式中不能

這個例子與工廠模式中除了函數名不同以外,細心的童鞋應該發現許多不同之處:

函數名首寫字母為大寫  (雖然標準沒有嚴格規定首寫字母為大寫,但按照慣例,構造函數的首寫字母用大寫
沒有顯示的創建對象
直接將屬性和方法賦值給了this對象
沒有return語句
使用new創建對象
能夠識別對象(這正是構造函數模式勝于工廠模式的地方)

  構造函數雖然好用,但也并非沒有缺點,使用構造函數的最大的問題在于每次創建實例的時候都要重新創建一次方法(理論上每次創建對象的時候對象的屬性均不同,而對象的方法是相同的),然而創建兩次完全相同的方法是沒有必要的,因此,我們可以將函數移到對象外面(也許有些童鞋已經看出缺點,噓?。?。

function Blog(name, url) {  this.name = name;  this.url = url;  this.alertUrl = alertUrl;}function alertUrl() {  alert(this.url);}var blog = new Blog('scjb51', 'http://sc.VeVB.COm/'),  blog2 = new Blog('jb51', '//www.49028c.com/');blog.alertUrl();  // http://sc.VeVB.COm/blog2.alertUrl();  // //www.49028c.com/

我們將alertUrl設置成全局函數,這樣一來blog與blog2訪問的都是同一個函數,可是問題又來了,在全局作用域中定義了一個實際只想讓Blog使用的函數,顯示讓全局作用域有些名副其實,更讓人無法接受的是在全局作用域中定義了許多僅供特定對象使用的方法,浪費空間不說,顯然失去了面向對象封裝性了,因此可以通過原型來解決此問題。

  原型模式

  我們創建的每個函數都有prototype(原型)屬性,這個屬性是一個指針,指向一個對象,而這個對象的用途是包含可以由特定類型的所有實例共享的屬性和方法。使用原型對象的好處就是可以讓所有對象實例共享它所包含的屬性及方法。

function Blog() {}Blog.prototype.name = 'wuyuchang';Blog.prototype.url = 'http://tools.VeVB.COm/';Blog.prototype.friend = ['fr1', 'fr2', 'fr3', 'fr4'];Blog.prototype.alertInfo = function() {  alert(this.name + this.url + this.friend );}// 以下為測試代碼var blog = new Blog(),  blog2 = new Blog();blog.alertInfo();  // wuyuchanghttp://tools.VeVB.COm/fr1,fr2,fr3,fr4blog2.alertInfo();  // wuyuchanghttp://tools.VeVB.COm/fr1,fr2,fr3,fr4blog.name = 'wyc1';blog.url = 'http://***.com';blog.friend.pop();blog2.name = 'wyc2';blog2.url = 'http://+++.com';blog.alertInfo();  // wyc1http://***.comfr1,fr2,fr3blog2.alertInfo();  // wyc2http://+++.comfr1,fr2,fr3

原型模式也不是沒有缺點,首先,它省略了構造函數傳遞初始化參數這一環節,結果所有實例在默認情況下都取得了相同的屬性值,這樣非常不方便,但這還是不是原型的最大問題,原型模式的最大問題在于共享的本性所導致的,由于共享,因此因此一個實例修改了引用,另一個也隨之更改了引用。因此我們通常不單獨使用原型,而是結合原型模式與構造函數模式。

  混合模式(原型模式 + 構造函數模式)

function Blog(name, url, friend) {  this.name = name;  this.url = url;  this.friend = friend;}Blog.prototype.alertInfo = function() {  alert(this.name + this.url + this.friend);}var blog = new Blog('wuyuchang', 'http://tools.VeVB.COm/', ['fr1', 'fr2', 'fr3']),  blog2 = new Blog('wyc', 'http://**.com', ['a', 'b']);blog.friend.pop();blog.alertInfo();  // wuyuchanghttp://tools.VeVB.COm/fr1,fr2blog2.alertInfo();  // wychttp://**.coma,b

混合模式中構造函數模式用于定義實例屬性,而原型模式用于定義方法和共享屬性。每個實例都會有自己的一份實例屬性,但同時又共享著方法,最大限度的節省了內存。另外這種模式還支持傳遞初始參數。優點甚多。這種模式在ECMAScript中是使用最廣泛、認同度最高的一種創建自定義對象的方法。

  動態原型模式

  動態原型模式將所有信息封裝在了構造函數中,而通過構造函數中初始化原型(僅第一個對象實例化時初始化原型),這個可以通過判斷該方法是否有效而選擇是否需要初始化原型。

function Blog(name, url) {  this.name = name;  this.url = url;  if (typeof this.alertInfo != 'function') {    // 這段代碼只執行了一次    alert('exe time');    Blog.prototype.alertInfo = function() {      alert(thia.name + this.url);    }  }}var blog = new Blog('wuyuchang', 'http://tools.VeVB.COm'),  blog2 = new Blog('wyc', 'http:***.com');

可以看到上面的例子中只彈出一次窗,'exe time',即當blog初始化時,這樣做blog2就不在需要初始化原型,對于使用這種模式創建對象,可以算是perfect了。

此博文參考《JavaScript高級程序設計》第3版,但語言都經過簡化,例子也重寫過,如果有什么不懂的地方請留言回復,作者將更新博客。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb
成人有码在线视频| 中文字幕一区电影| 成人免费看吃奶视频网站| 国产精品高精视频免费| 正在播放欧美一区| 亚洲美女自拍视频| 国产精品电影网| 欧美乱大交做爰xxxⅹ性3| 亚洲成人久久电影| 色婷婷综合久久久久| 欧美精品久久一区二区| 亚洲视频电影图片偷拍一区| 国产精品久久久久久久av大片| 成人国产在线视频| 91成人国产在线观看| 欧美日韩视频在线| 欧美一级成年大片在线观看| 国产性猛交xxxx免费看久久| 欧美自拍大量在线观看| 亚洲国产99精品国自产| 欧洲成人免费视频| 亚洲一级免费视频| 精品久久久久久久中文字幕| 国产在线精品一区免费香蕉| 日韩毛片在线观看| 欧美日韩在线看| 亚洲黄色在线观看| 欧美激情精品久久久| 国产精品热视频| 亚洲欧美成人一区二区在线电影| 欧美亚洲日本网站| 国产亚洲一区二区在线| 亚洲性视频网址| 91网站免费观看| 91日韩在线播放| 精品夜色国产国偷在线| 亚洲国产欧美日韩精品| 亚洲va欧美va国产综合久久| 国产精品丝袜一区二区三区| 久久久av免费| 亚洲综合色激情五月| 少妇高潮 亚洲精品| 日韩中文字幕不卡视频| 成人福利视频在线观看| 国产精品精品国产| 欧美中文字幕第一页| 亚洲国产99精品国自产| 日韩欧美亚洲成人| 亚洲欧美国产高清va在线播| 亚洲性视频网址| 欧美精品免费播放| 青草成人免费视频| 在线亚洲国产精品网| 亚洲自拍偷拍区| 亚洲免费伊人电影在线观看av| 国产亚洲美女精品久久久| 欧美人成在线视频| 久久久久五月天| 亚洲欧美另类自拍| 欧美大尺度电影在线观看| 国产精品自在线| 国产精品视频网站| 国产成人综合av| 亚洲激情视频网站| 国产日韩视频在线观看| 亚洲国产精品va在线| 日韩在线观看视频免费| 欧美日本高清一区| 欧美精品18videosex性欧美| 精品国产成人在线| 午夜精品久久久久久久99热浪潮| 国产精品麻豆va在线播放| 91丝袜美腿美女视频网站| 国产综合色香蕉精品| 国产福利视频一区二区| 色综合久久精品亚洲国产| 欧美大全免费观看电视剧大泉洋| 久久av中文字幕| 欧美另类99xxxxx| 国产精自产拍久久久久久| 啪一啪鲁一鲁2019在线视频| 欧美综合在线观看| 色偷偷偷亚洲综合网另类| 国产成人精品电影| 国产乱人伦真实精品视频| 精品一区二区三区电影| 日韩麻豆第一页| 国产高清视频一区三区| 午夜精品福利电影| 亚洲深夜福利视频| 欧美疯狂做受xxxx高潮| 日韩av片永久免费网站| 亚洲国产成人精品女人久久久| 亚洲尤物视频网| 欧美日韩ab片| 亚洲精品国产精品国自产在线| 欧美成人精品三级在线观看| 亚洲人成电影在线播放| 国产午夜精品视频免费不卡69堂| 久久久久五月天| 久久久久久一区二区三区| 97久久久免费福利网址| 欧美激情三级免费| 在线成人免费网站| 尤物yw午夜国产精品视频明星| 欧美一性一乱一交一视频| 日韩欧美中文字幕在线播放| 日韩av在线影院| 成人av色在线观看| 欧美一级片一区| 日韩精品福利在线| 欧美精品一区二区三区国产精品| 欧美乱大交xxxxx| 欧美肥臀大乳一区二区免费视频| 亚洲天堂开心观看| 色视频www在线播放国产成人| 国产成人一区二区三区小说| 日日骚av一区| 国产亚洲精品久久久久久牛牛| 伊人男人综合视频网| 欧美日韩免费在线观看| 日本成熟性欧美| 日韩免费观看高清| 久热在线中文字幕色999舞| 91精品视频专区| 欧美在线观看日本一区| 久久综合九色九九| 国产精品日韩在线播放| 456国产精品| 国产精品私拍pans大尺度在线| 欧美性猛交99久久久久99按摩| 国产精品激情av电影在线观看| 日本精品性网站在线观看| 欧美人在线观看| 亚洲精品免费一区二区三区| 国产精品久久婷婷六月丁香| 992tv成人免费影院| 久久精品91久久久久久再现| 日韩精品丝袜在线| 亚洲大胆人体视频| 欧美日韩亚洲国产一区| 国产精品综合不卡av| 97视频在线观看免费高清完整版在线观看| 久久69精品久久久久久久电影好| 4438全国亚洲精品在线观看视频| 亚洲欧洲日产国产网站| 亚洲色图美腿丝袜| 97热精品视频官网| 亚洲天堂av在线免费| 亚洲综合在线做性| 欧美日韩国产va另类| 精品人伦一区二区三区蜜桃免费| 黑人巨大精品欧美一区免费视频| 欧美视频专区一二在线观看| 国产99视频在线观看| 一区二区三区亚洲| 91国内在线视频| 91免费人成网站在线观看18| 欧美电影免费在线观看| 欧美极品少妇xxxxⅹ免费视频| 98精品国产高清在线xxxx天堂| 亚洲福利视频网站| 亚洲高清福利视频| 国产成人精品电影|