Javascript 使用function定義構(gòu)造函數(shù)
更新時(shí)間：2010年02月27日 12:20:37 作者：
Javascript并不像Java、C#等語言那樣支持真正的類。但是在js中可以定義偽類。做到這一點(diǎn)的工具就是構(gòu)造函數(shù)和原型對(duì)象。首先介紹js中的構(gòu)造函數(shù)。
Javascript中創(chuàng)建對(duì)象的語法是在new運(yùn)算符的后面跟著一個(gè)函數(shù)的調(diào)用。如
var obj = new Object();
var date = new Date();
運(yùn)算符new首先創(chuàng)建一個(gè)新的沒有任何屬性的對(duì)象，然后調(diào)用該函數(shù)，把新的對(duì)象作為this關(guān)鍵字的值傳遞。
var date = new Date()的偽代碼的實(shí)現(xiàn)就是
var obj = {};
var date = Date.call(obj);
構(gòu)造函數(shù)的作用就是初始化一個(gè)新創(chuàng)建的對(duì)象，并在使用對(duì)象前設(shè)置對(duì)象的屬性。如果定義自己的構(gòu)造函數(shù)，只需要編寫一個(gè)為this添加屬性的函數(shù)就可以了。下面的代碼定義了一個(gè)構(gòu)造函數(shù)：
function Rectangle(w, h)
{
this.width = w;
this.height = h;
}
然后，可以使用new運(yùn)算符調(diào)用這個(gè)函數(shù)來創(chuàng)建對(duì)象的實(shí)例
var rect = new Rectange(4,8);
構(gòu)造函數(shù)的返回值
Javascript中的構(gòu)造函數(shù)通常沒有返回值。但是，函數(shù)是允許有返回值的。如果一個(gè)構(gòu)造函數(shù)有一個(gè)返回值，則返回的對(duì)象成為new表達(dá)式的值。在此情況下，作為this的對(duì)象將會(huì)被拋棄。
使用構(gòu)造函數(shù)定義法
語法
var object=new objectname();
var -- 聲明對(duì)象變量
object -- 對(duì)象的名稱
new -- new的關(guān)鍵詞(JavaScript關(guān)鍵詞)
objectname -- 構(gòu)造函數(shù)名稱
示例
//定義構(gòu)造函數(shù)
function Site(url, name)
{
this.url = "chabaoo.cn";
this.name ="夢(mèng)之都";
}
//使用構(gòu)造函數(shù)產(chǎn)生一個(gè)JavaScript對(duì)象的實(shí)例
var mysite = new Site();
alert(mysite.url);
構(gòu)造函數(shù)通?？梢猿跏蓟瘜?duì)象中的一些內(nèi)容，JavaScript內(nèi)部提供的一些對(duì)象通常需要使用構(gòu)造函數(shù)的方法生成。JavaScript函數(shù)的內(nèi)容將在下一章介紹。
直接定義法創(chuàng)建JavaScript對(duì)象
//定義對(duì)象語法
var object={};
//對(duì)象內(nèi)的屬性語法(屬性名(property)與屬性值(value)是成對(duì)出現(xiàn)的)
object.property=value;
//對(duì)象內(nèi)的函數(shù)語法(函數(shù)名(func)與函數(shù)內(nèi)容是成對(duì)出現(xiàn)的)
object.func=function(){...;};
var -- 聲明對(duì)象變量
object -- 對(duì)象的名稱
property -- 對(duì)象的屬性名
func -- 對(duì)象的方法名
說明：對(duì)象可以包含一些屬性(函數(shù)可以看作帶有括號(hào)的特殊屬性)，每個(gè)屬性有名稱和值。名稱可以是任何字符串甚至是空。值可以是任何javascript類型，但不能是undefined。
使用定義法定義的對(duì)象示例
var site = {};
site.URL = "chabaoo.cn";
site.name = "腳本之家";
site.englishname = "jb51";
site.author = "腳本";
site.summary = "免費(fèi)的網(wǎng)頁(yè)設(shè)計(jì)教程";
site.pagescount = 100;
site.isOK = true;
site.startdate = new Date(2005, 12);
site.say = function(){alert(this.englishname+" say : hello world!")};
site.age = function(){var theage=(new Date().getFullYear())-site.startdate.getFullYear();alert(this.name+"已經(jīng)"+theage+"歲了!")}
使用構(gòu)造函數(shù)創(chuàng)建JavaScript對(duì)象示例 -- 可以嘗試編輯
使用構(gòu)造函數(shù)創(chuàng)建JavaScript對(duì)象
上面的方法定義了一個(gè)site的對(duì)象，并且為其定義了七個(gè)屬性，與兩個(gè)個(gè)方法。
say方法會(huì)打印出jb51 say : hello world!的字符串
age方法會(huì)計(jì)算出夢(mèng)之都網(wǎng)站的年齡
猴子提示: 注意每個(gè)屬性與函數(shù)前面都要加上對(duì)象的名稱，否則JavaScript無法判斷它是屬于那個(gè)對(duì)象的。
下面的課程將講解直接定義法的延伸，JSON定義法。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
復(fù)制代碼 代碼如下:
var obj = new Object();
var date = new Date();
運(yùn)算符new首先創(chuàng)建一個(gè)新的沒有任何屬性的對(duì)象，然后調(diào)用該函數(shù)，把新的對(duì)象作為this關(guān)鍵字的值傳遞。
復(fù)制代碼 代碼如下:
var date = new Date()的偽代碼的實(shí)現(xiàn)就是
var obj = {};
var date = Date.call(obj);
構(gòu)造函數(shù)的作用就是初始化一個(gè)新創(chuàng)建的對(duì)象，并在使用對(duì)象前設(shè)置對(duì)象的屬性。如果定義自己的構(gòu)造函數(shù)，只需要編寫一個(gè)為this添加屬性的函數(shù)就可以了。下面的代碼定義了一個(gè)構(gòu)造函數(shù)：
復(fù)制代碼 代碼如下:
function Rectangle(w, h)
{
this.width = w;
this.height = h;
}
然后，可以使用new運(yùn)算符調(diào)用這個(gè)函數(shù)來創(chuàng)建對(duì)象的實(shí)例
復(fù)制代碼 代碼如下:
var rect = new Rectange(4,8);
構(gòu)造函數(shù)的返回值
Javascript中的構(gòu)造函數(shù)通常沒有返回值。但是，函數(shù)是允許有返回值的。如果一個(gè)構(gòu)造函數(shù)有一個(gè)返回值，則返回的對(duì)象成為new表達(dá)式的值。在此情況下，作為this的對(duì)象將會(huì)被拋棄。
使用構(gòu)造函數(shù)定義法
語法
復(fù)制代碼 代碼如下:
var object=new objectname();
var -- 聲明對(duì)象變量
object -- 對(duì)象的名稱
new -- new的關(guān)鍵詞(JavaScript關(guān)鍵詞)
objectname -- 構(gòu)造函數(shù)名稱
示例
復(fù)制代碼 代碼如下:
//定義構(gòu)造函數(shù)
function Site(url, name)
{
this.url = "chabaoo.cn";
this.name ="夢(mèng)之都";
}
//使用構(gòu)造函數(shù)產(chǎn)生一個(gè)JavaScript對(duì)象的實(shí)例
var mysite = new Site();
alert(mysite.url);
構(gòu)造函數(shù)通?？梢猿跏蓟瘜?duì)象中的一些內(nèi)容，JavaScript內(nèi)部提供的一些對(duì)象通常需要使用構(gòu)造函數(shù)的方法生成。JavaScript函數(shù)的內(nèi)容將在下一章介紹。
直接定義法創(chuàng)建JavaScript對(duì)象
復(fù)制代碼 代碼如下:
//定義對(duì)象語法
var object={};
//對(duì)象內(nèi)的屬性語法(屬性名(property)與屬性值(value)是成對(duì)出現(xiàn)的)
object.property=value;
//對(duì)象內(nèi)的函數(shù)語法(函數(shù)名(func)與函數(shù)內(nèi)容是成對(duì)出現(xiàn)的)
object.func=function(){...;};
var -- 聲明對(duì)象變量
object -- 對(duì)象的名稱
property -- 對(duì)象的屬性名
func -- 對(duì)象的方法名
說明：對(duì)象可以包含一些屬性(函數(shù)可以看作帶有括號(hào)的特殊屬性)，每個(gè)屬性有名稱和值。名稱可以是任何字符串甚至是空。值可以是任何javascript類型，但不能是undefined。
使用定義法定義的對(duì)象示例
復(fù)制代碼 代碼如下:
var site = {};
site.URL = "chabaoo.cn";
site.name = "腳本之家";
site.englishname = "jb51";
site.author = "腳本";
site.summary = "免費(fèi)的網(wǎng)頁(yè)設(shè)計(jì)教程";
site.pagescount = 100;
site.isOK = true;
site.startdate = new Date(2005, 12);
site.say = function(){alert(this.englishname+" say : hello world!")};
site.age = function(){var theage=(new Date().getFullYear())-site.startdate.getFullYear();alert(this.name+"已經(jīng)"+theage+"歲了!")}
使用構(gòu)造函數(shù)創(chuàng)建JavaScript對(duì)象示例 -- 可以嘗試編輯
使用構(gòu)造函數(shù)創(chuàng)建JavaScript對(duì)象
上面的方法定義了一個(gè)site的對(duì)象，并且為其定義了七個(gè)屬性，與兩個(gè)個(gè)方法。
say方法會(huì)打印出jb51 say : hello world!的字符串
age方法會(huì)計(jì)算出夢(mèng)之都網(wǎng)站的年齡
猴子提示: 注意每個(gè)屬性與函數(shù)前面都要加上對(duì)象的名稱，否則JavaScript無法判斷它是屬于那個(gè)對(duì)象的。
下面的課程將講解直接定義法的延伸，JSON定義法。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
相關(guān)文章
js實(shí)現(xiàn)仿百度汽車頻道選擇汽車圖片展示實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)仿百度汽車頻道選擇汽車圖片展示,實(shí)例分析了javascript鼠標(biāo)事件操作css樣式的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-05-05
HTML+CSS+JavaScript實(shí)現(xiàn)下拉菜單效果
這篇文章主要為大家詳細(xì)介紹了HTML+CSS+JavaScript實(shí)現(xiàn)下拉菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
老生常談document.ready和window.onload
這篇文章主要介紹了document.ready和window.onload的相關(guān)知識(shí),包括document.ready和window.onload的區(qū)別,要使用document.ready()或者document.onload()的原因分析,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-01-01
JS插入排序簡(jiǎn)單理解與實(shí)現(xiàn)方法分析
這篇文章主要介紹了JS插入排序簡(jiǎn)單理解與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了JavaScript插入排序基本原理、實(shí)現(xiàn)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-11-11
解析JavaScript中點(diǎn)號(hào)“.”的多義性
這篇文章主要介紹了JavaScript中點(diǎn)號(hào)“.”的多義性。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
語法高亮效果使用非常頻繁，特別是在博客里展示各種代碼的時(shí)候，可以讓代碼更易讀。我們身邊就有很多語法高亮的插件，其中大部分是用javascript寫的，也有一些是通過server端語言實(shí)現(xiàn)（比如Phyton或Ruby）。2009-07-07
在DOM里面操作textarea里面的字符，是比較麻煩的,本文將介紹一種比較簡(jiǎn)單的方法，需要的朋友可以參考下2012-12-12
JavaScript實(shí)現(xiàn)簡(jiǎn)單的隱藏式側(cè)邊欄功能示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的隱藏式側(cè)邊欄功能,涉及javascript結(jié)合定時(shí)器針對(duì)頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-08-08
這篇文章主要介紹了JavaScript預(yù)解析,對(duì)象的的相關(guān)資料，小編覺得這篇文章寫的還不錯(cuò)，需要的朋友可以參考下，希望能夠給你帶來幫助2021-11-11
這篇文章主要介紹了js控制多圖左右滾動(dòng)切換效果，很實(shí)用的代碼，推薦給大家，有需要的小伙伴可以參考下。2015-08-08