欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js面向?qū)ο笾R妱?chuàng)建對象的幾種方式(工廠模式、構(gòu)造函數(shù)模式、原型模式)

 更新時間:2015年11月09日 09:32:14   投稿:mrr  
JS的語法非常靈活,簡單的對象創(chuàng)建就有好幾種不同的方法。這些過于靈活的地方有時候確實很讓人迷惑,那么今天我們就來梳理一下JS中常用的創(chuàng)建對象的幾種方法吧

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

前言

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

工廠模式

該模式抽象了創(chuàng)建對象的具體過程,用函數(shù)來以特定接口創(chuàng)建對象的細節(jié)

 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();

工廠模式測試

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

構(gòu)造函數(shù)模式

function CPerson(name,sex,age) {//注意這里 構(gòu)造函數(shù)首字母大寫
 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();

構(gòu)造函數(shù)模式測試

注意構(gòu)造函數(shù)與工廠模式有些不同的地方,如下

構(gòu)造函數(shù)首字母大寫

沒有顯式地創(chuàng)建對象

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

沒有return語句

而且以這種方式來調(diào)用構(gòu)造函數(shù)會大致經(jīng)歷一下 幾個步驟

創(chuàng)建一個新的對象

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

執(zhí)行構(gòu)造函數(shù)中的代碼(即給新對象添加屬性和方法的過程)

返回對象

注意:構(gòu)造函數(shù)其實和普通的函數(shù)沒有太大的差別,唯一的不同在于調(diào)用方式的不同。以下演示不同的幾種調(diào)用方式

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

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

原型模式

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

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

 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

以上內(nèi)容是關于js面向?qū)ο笾R妱?chuàng)建對象的幾種方式(工廠模式、構(gòu)造函數(shù)模式、原型模式),希望大家喜歡。

相關文章

  • 實例學習JavaScript讀取和寫入cookie

    實例學習JavaScript讀取和寫入cookie

    本篇內(nèi)容主要給大家通過實例講述了JavaScript讀取和寫入cookie的相關知識點,有這方面需要的朋友參考下吧。
    2018-01-01
  • 微信小程序冒泡事件及其阻止方法實例分析

    微信小程序冒泡事件及其阻止方法實例分析

    這篇文章主要介紹了微信小程序冒泡事件及其阻止方法,結(jié)合實例形式分析了事件分類、冒泡及相應阻止操作方法,需要的朋友可以參考下
    2018-12-12
  • 詳解為Bootstrap Modal添加拖拽的方法

    詳解為Bootstrap Modal添加拖拽的方法

    本篇文章主要介紹了詳解為Bootstrap Modal添加拖拽的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-01
  • 詳解微信小程序動畫Animation執(zhí)行過程

    詳解微信小程序動畫Animation執(zhí)行過程

    這篇文章主要介紹了微信小程序動畫Animation執(zhí)行過程 / 實現(xiàn)過程 / 實現(xiàn)方式,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-09-09
  • JS綁定事件的3種方法舉例示范(簡單易懂)

    JS綁定事件的3種方法舉例示范(簡單易懂)

    在JavaScript的學習中我們經(jīng)常會遇到JavaScript的事件機制,例如事件綁定、事件監(jiān)聽、事件委托(事件代理)等,這篇文章主要給大家介紹了關于JS綁定事件的3種方法,需要的朋友可以參考下
    2023-11-11
  • javascript實現(xiàn)圖片輪換動作方法

    javascript實現(xiàn)圖片輪換動作方法

    這篇文章主要介紹了javascript實現(xiàn)圖片輪換動作方法,文章通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-08-08
  • 7個讓JavaScript變得更好的注意事項

    7個讓JavaScript變得更好的注意事項

    這篇文章主要介紹了7個讓JavaScript變得更好的注意事項,十分詳盡,需要的朋友可以參考下
    2015-01-01
  • 詳解原生JavaScript實現(xiàn)jQuery中AJAX處理的方法

    詳解原生JavaScript實現(xiàn)jQuery中AJAX處理的方法

    這篇文章主要介紹了原生JavaScript實現(xiàn)jQuery中AJAX處理的方法,作者根據(jù)jQuery中一些對AJAX請求的處理方式來用原生API實現(xiàn),需要的朋友可以參考下
    2016-05-05
  • 一頁面多XMLHttpRequest對象

    一頁面多XMLHttpRequest對象

    一頁面多XMLHttpRequest對象...
    2007-01-01
  • 小程序獲取手機驗證碼倒計時的方法

    小程序獲取手機驗證碼倒計時的方法

    這篇文章主要為大家詳細介紹了小程序獲取手機驗證碼倒計時的方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下<BR>
    2022-08-08

最新評論