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

首頁 > 開發 > JS > 正文

JavaScript創建對象方式總結【工廠模式、構造函數模式、原型模式等】

2024-05-06 16:47:10
字體:
來源:轉載
供稿:網友

本文實例總結了JavaScript創建對象方式。分享給大家供大家參考,具體如下:

這里主要是對《JavaScript高級程序設計》第六章(面向對象的程序設計)的總結,書上的這章至少看了4遍是有的。該章主要講對象的創建與繼承。其中創建對象和繼承方式至少6種,再加上一些方法屬性,很容易搞得暈頭轉向的。因此有必要對本章的內容理一理,以后忘了也好過來看一看。

由于文章長度的限制,本文主要講創建對象。

1 創建對象

1.1 一般方法

使用Object或者采用對象字面量的方法。

var o = {a: 1};var o2=new Object();o2.a=1;

缺點:使用同一個接口創建很多對象,會產生大量重復的代碼。

1.2工廠模式

function parent(name,age){  var Child = new Object();  Child.name=name;  Child.age=age;  Child.sayHi=function(){    console.log("Hi");  }  return Child;};var x = Parent("Tom",12);console.log(x.name); //Tomx.sayHi(); //Hi

函數parent能夠根據接受的參數來構建一個包含所有必要信息的child對象??梢詿o限次調用這個函數,都會返回一個包含兩個屬性和一個方法的對象。

解決了創建多個相似對象的問題,但卻沒有解決對象識別的問題(即怎樣知道一個對象的類型)。

1.3構造函數模式

對于構造函數這個名字,學過java或者c++的同學應該都是知道的,在js里也是差不多的。

用構造函數將上面的例子重寫如下:

function Parent(name,age){  this.name=name;  this.age=age;  this.sayHi=function(){    console.log("Hi");  };}var x = new Parent("Tom",12);console.log(x.name); //Tomx.sayHi(); //Hi

對于構造函數,我們需要在調用的時候加關鍵字 new。要注意的是,構造函數始終是以一個大寫字母開頭,而非構造函數始終是以一個小寫字母開頭。

與工廠模式相比,主要有以下幾個不同之處:

  • 沒有顯示地創建對象;
  • 直接將屬性和方法賦給了this對象;
  • 沒有return語句。

缺點:使用構造函數的缺點就是每個方法都需要在每個實例上重新創建一遍。

1.4原型模式

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

function Parent(name,age){  Parent.prototype.name=name;  Parent.prototype.age=age;  Parent.prototype.sayHi=function(){    console.log("Hi");  };}var x = new Parent("Tom",12);console.log(x.name); //Tomx.sayHi(); //Hi

缺點:優點就是其缺點,方法屬性都可以共享。具體可以看下面這個例子

function Parent(name,age){  Parent.prototype.name=name;  Parent.prototype.age=age;  Parent.prototype.arr=["123","we"];  Parent.prototype.sayHi=function(){    console.log("Hi");  };}var x = new Parent("Tom",12);var y = new Parent("Tom1",12);x.arr.push("x");y.arr.push("y");console.log(x.arr);//["123", "we", "x", "y"]console.log(y.arr);//["123", "we", "x", "y"]

對象x修改自己的屬性,竟然會影響到y對象;同理,對y也一樣。這個明顯就很不合理啊,太可怕了!

1.5組合使用構造函數模式和原型模式

function Parent(name,age){  //只把屬性留在這里定義,方法放在原型對象中  this.name=name;  this.age=age;}//第一種方式Parent.prototype.sayHi=function(){  console.log("Hi");};//第二種方式//由于采用對象字面量,因此必須修正其constructor屬性;Parent.prototype={  constructor:Parent,  sayHi:function(){    console.log("Hi");  }}var x = new Parent("Tom",12);console.log(x.name); //Tomx.sayHi(); //Hi

在這個例子中,實例屬性都是在構造函數中定義的,而由所有實例共享的屬性constructor和方法則是在原型中定義的。

是目前使用最廣泛、認同度最高的一種創建自定義類型的方法。

--------------------------感覺后面幾種方法有些變態了--------------------------------

1.6 動態原型模式

function Parent(name,age){  this.name=name;  this.age=age;  if( typeof this.sayHi !="function"){    Parent.prototype.sayHi=function(){      console.log("Hi");    };  }}var x = new Parent("Tom",12);console.log(x.name); //Tomx.sayHi(); //Hi

先檢查某個應該存在方法是否有效再來決定是否需要初始化原型。

1.7寄生構造函數模式

當前面幾種都不適用的情況下,可以使用寄生構造函數模式。這種函數的基本思想是創建一個函數,該函數的作用僅僅是封裝創建對象的代碼,然后再返回新創建的對象。

function parent(name,age){  var Child = new Object();  Child.name=name;  Child.age=age;  Child.sayHi=function(){    console.log("Hi");  }  return Child;};var x = Parent("Tom",12);console.log(x.name); //Tomx.sayHi(); //Hi

但是其實就是和工廠模式一模一樣,你TM在逗我嗎?????

1.8穩妥構造函數模式

穩妥構造函數遵循與寄生構造函數模式類似的模式,但有兩點不同:一是新創建對象的實例方法不引用this; 二是不使用new操作調用構造函數。

function Parent(name,age){  var o=new Object();   //私有變量或者方法  var name=name,    age=age;  o.sayName=function(){     //name前面沒有this    console.log(name+" "+age)  }  return o;}var x = Parent("Tom",12);x.sayName(); //Tom 12

變量x中保存的是一個穩妥對象,而除了調用sayName()方法外,沒有別的方式可以訪問其數據成員。

希望本文所述對大家JavaScript程序設計有所幫助。


注:相關教程知識閱讀請移步到JavaScript/Ajax教程頻道。
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb
色一情一乱一区二区| 欧美成人免费va影院高清| 俺去亚洲欧洲欧美日韩| 亚洲少妇中文在线| 国产成人综合一区二区三区| 高清在线视频日韩欧美| 69av成年福利视频| 中文字幕欧美精品在线| 亚洲精品日产aⅴ| 欧美一乱一性一交一视频| 亚洲无线码在线一区观看| 日韩欧美在线一区| 亚洲国内高清视频| 日韩av一区在线| 国产精品国产亚洲伊人久久| 国产精品自产拍在线观| 欧美精品一二区| 日韩免费av在线| 午夜精品国产精品大乳美女| 久久精品欧美视频| 国产日韩欧美综合| 欧美性感美女h网站在线观看免费| 国产69久久精品成人看| 日韩久久免费视频| www.欧美精品一二三区| 欧美性猛交xxxx免费看久久久| 日本精品va在线观看| 欧洲中文字幕国产精品| 九九热这里只有精品免费看| 亚洲一区二区三区乱码aⅴ| 久久久久久久久久久国产| 亚洲人精选亚洲人成在线| 精品久久香蕉国产线看观看亚洲| 日本欧美一二三区| 91精品久久久久久久久中文字幕| 2019亚洲日韩新视频| 久久国产一区二区三区| 欧美成人在线网站| 欧美在线www| 不卡av日日日| 91精品国产综合久久香蕉| 国产精品扒开腿爽爽爽视频| 国产精品91久久久久久| 欧洲精品毛片网站| 日韩在线观看精品| 色偷偷av亚洲男人的天堂| 国产一区二区丝袜| 91香蕉嫩草神马影院在线观看| 成人免费xxxxx在线观看| 日本伊人精品一区二区三区介绍| 亚洲最大的成人网| 日韩欧美国产中文字幕| 麻豆精品精华液| 九九久久久久久久久激情| 国产日本欧美一区| 久久久国产一区二区| 日韩精品免费在线观看| 久久精品视频一| 亚洲一区二区三区成人在线视频精品| 正在播放欧美一区| 亚洲综合在线播放| 国产91成人在在线播放| 一夜七次郎国产精品亚洲| 九九热这里只有在线精品视| 亚洲精品久久7777777| 色偷偷9999www| 国产精品久久久久7777婷婷| 国产精品久久久久久久久久久久| 午夜精品久久久久久久99黑人| 国产精品丝袜高跟| 亚洲情综合五月天| 2019亚洲男人天堂| 91夜夜揉人人捏人人添红杏| 国产精品一区二区久久| 性亚洲最疯狂xxxx高清| 亚洲精品电影网在线观看| 中文字幕一区日韩电影| 欧美日韩国产精品一区二区不卡中文| 欧美成人免费播放| 亚洲第一区第一页| 日韩av综合中文字幕| 4444欧美成人kkkk| 欧美午夜精品久久久久久浪潮| 红桃视频成人在线观看| 国内久久久精品| 精品国产一区二区三区久久狼黑人| 国产精品1区2区在线观看| 久久成人精品一区二区三区| 久久久久国产精品免费| 激情懂色av一区av二区av| 欧美精品免费在线| 欧美大片欧美激情性色a∨久久| 欧洲成人免费视频| 91免费高清视频| 视频在线观看一区二区| 久久亚洲一区二区三区四区五区高| 成人h猎奇视频网站| 欧美国产亚洲精品久久久8v| 精品国产鲁一鲁一区二区张丽| 欧美国产日韩视频| 日韩精品小视频| 欧美乱大交做爰xxxⅹ性3| 中文字幕一区日韩电影| 色综合久久精品亚洲国产| 亚洲欧美日韩中文在线| 午夜精品一区二区三区在线视| 亚洲精品久久视频| 日韩av中文字幕在线播放| 92看片淫黄大片看国产片| 亚洲欧美国产视频| 久久激情五月丁香伊人| 91tv亚洲精品香蕉国产一区7ujn| 欧美日韩美女在线| 粉嫩老牛aⅴ一区二区三区| 久久久久久久久爱| 91在线高清视频| 九九九热精品免费视频观看网站| 国产999精品久久久影片官网| 美日韩丰满少妇在线观看| 热久久免费视频精品| 国产脚交av在线一区二区| 国产精品久久久久久av福利| 国产精品爽爽爽爽爽爽在线观看| 欧美亚洲视频在线观看| 久久97精品久久久久久久不卡| 国产免费一区二区三区在线能观看| 国产精品日韩av| 日韩在线视频免费观看高清中文| 久久精品国产成人精品| 国产日韩av在线播放| 成人中文字幕+乱码+中文字幕| 亚洲娇小xxxx欧美娇小| 亚洲美女中文字幕| www亚洲欧美| 2019最新中文字幕| 日日噜噜噜夜夜爽亚洲精品| 国产精彩精品视频| 日韩电影视频免费| 久久视频在线播放| 久久在线视频在线| 97精品视频在线播放| 久久精品国产欧美亚洲人人爽| 国产在线不卡精品| 欧美大尺度电影在线观看| 亚洲精品一二区| 黄色精品在线看| 国产91露脸中文字幕在线| 91sa在线看| 欧美日韩国产精品专区| 在线观看国产成人av片| 成人免费网站在线观看| 国产欧美日韩视频| 亚洲精品98久久久久久中文字幕| 狠狠躁夜夜躁人人躁婷婷91| 日韩欧美在线视频日韩欧美在线视频| 亚洲曰本av电影| 久久亚洲精品国产亚洲老地址| 欧美第一黄网免费网站| 国产91精品最新在线播放| 精品欧美一区二区三区| 日本在线观看天堂男亚洲| 91欧美精品午夜性色福利在线| 亚洲自拍在线观看| 精品国产区一区二区三区在线观看|