国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

js面向對象之常見創建對象的幾種方式(工廠模式、構造函數模式、原型模式)

2019-11-20 11:19:28
字體:
來源:轉載
供稿:網友

在上篇文章給大家介紹了javascript面向對象基礎,本篇文章繼續深入學習javascript面向對象,JS的語法非常靈活,簡單的對象創建就有好幾種不同的方法。這些過于靈活的地方有時候確實很讓人迷惑,那么今天我們就來梳理一下JS中常用的創建對象的幾種方法吧。

前言

雖然使用 Object構造函數 或者使用 對象字面量 可以很方便的用來創建一個對象,但這種方式有一個明顯的缺點:使用一個接口創建多個對象會產生很多冗余的代碼。因此為了解決這個問題,人們開始使用以下幾種方式來常見對象。

工廠模式

該模式抽象了創建對象的具體過程,用函數來以特定接口創建對象的細節

 function cPerson(name,sex,age){ var o = new Object(); o.name = name; o.sex = sex; o.age = age; o.show = function(){ console.log(this.name,this.age,this.sex); } return o;} var p1 = cPerson('謙龍','男','100'); p1.show(); var p2 = cPerson('雛田','女','14'); p2.show();

工廠模式測試

工廠方式的問題:使用工廠模式能夠創建一個包含所有信息的對象,可以無數次的調用的這個函數。雖然其解決了創建多個相似對象的問題,但卻沒有解決對象識別的問題(即如何得知一個對象的類型)

構造函數模式

function CPerson(name,sex,age) {//注意這里 構造函數首字母大寫 this.name = name; this.sex = sex; this.age = age; this.show = function () { console.log(this.name, this.age, this.sex); }}var p1 = new CPerson('謙龍','男','100'); p1.show();var p2 = new CPerson('雛田','女','14'); p2.show();

構造函數模式測試

注意構造函數與工廠模式有些不同的地方,如下

構造函數首字母大寫

沒有顯式地創建對象

將屬性和方法賦值給了 this 對象

沒有return語句

而且以這種方式來調用構造函數會大致經歷一下 幾個步驟

創建一個新的對象

將構造函數的作用域賦值給這個對象(因此this就指向了這個對象)

執行構造函數中的代碼(即給新對象添加屬性和方法的過程)

返回對象

注意:構造函數其實和普通的函數沒有太大的差別,唯一的不同在于調用方式的不同。以下演示不同的幾種調用方式

 // 調用方式1 new 方式 var p1 = new CPerson('謙龍','男','100'); p1.show();//謙龍 100 男 // 調用方式2 普通函數調用 CPerson('謙龍','男','100'); window.show()//謙龍 100 男 注意屬性和方法會被設置到window對象上 // 調用方式3 在另一個對象的作用域中調用 var obj = new Object(); CPerson.call(obj,'謙龍','男','100'); obj.show(); //謙龍 100 男 在obj的作用域

構造函數的問題:使用構造函數最主要的問題就是每個方法都要在每個實例上重新創建一次,p1與p2的都有show方法,但不是同一個Function的實例,因為function在js中也是一個對象。因此他們共有的show方法并不相等。

原型模式

每個函數都有一個prototype屬性,這個屬性是一個指針,指向一個對象。而這個對象的用途是 包含可以由 特定類型 的所有 實例 共享的屬性和方法。即調用構造函數所創建的那個對象的 原型對象

好處是可以讓所有對象的實例共享他的屬性的方法。即無需在構造函數中定義實例的信息

 function CPerson(){}CPerson.prototype.name='謙龍';CPerson.prototype.sex='男';CPerson.prototype.age=100;CPerson.prototype.show=function(){ console.log(this.name, this.age, this.sex);}var p1 = new CPerson(); p1.show(); //謙龍 100 男var p2 = new CPerson(); p2.show();//謙龍 100 男 console.log(p1.show == p2.show)//true

以上內容是關于js面向對象之常見創建對象的幾種方式(工廠模式、構造函數模式、原型模式),希望大家喜歡。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 华阴市| 清水河县| 阿合奇县| 中宁县| 开化县| 蒲江县| 康定县| 启东市| 侯马市| 天台县| 寿宁县| 永康市| 乌兰察布市| 桂林市| 洞口县| 巨野县| 海伦市| 健康| 普格县| 铁岭县| 陇川县| 尉氏县| 武山县| 凤庆县| 抚宁县| 漳浦县| 金阳县| 石台县| 镇康县| 察隅县| 铁力市| 嘉善县| 东乌珠穆沁旗| 延边| 绥芬河市| 平江县| 芜湖县| 原阳县| 江永县| 白水县| 通江县|