JavaScrpt的面向?qū)ο笕娼馕?/h1>
更新時間：2017年05月09日 09:59:50 作者：凌云之翼
javascript面向?qū)ο笾R很廣泛，想深入理解需要花費一些時間，本文給大家介紹了js面向?qū)ο蟮膭?chuàng)建及相關(guān)屬性介紹，感興趣的小伙伴一起學習吧
每次說到j(luò)avascript的面向?qū)ο?，總感覺自己心里懂，但是卻不知道該怎么說，這就是似懂非懂到表現(xiàn)，于是乎，每次一說，就要到處去查找資料，零零碎碎到看了一些，感覺有懂了，但是過段時間，好像又不知道是怎么回事了，于是乎，又到處找資料，然道是我本來就缺對象？才不理解對象是啥，以至于現(xiàn)實中找找對象，javascript中也在找對象！哎，好尷尬??！直到我看到了一個妹紙寫到“不可不知的javascript面向?qū)ο蟆?，我才明白面向?qū)ο笫鞘裁矗@是不是說我要找到對象就是這個妹紙呢😄，先記錄一下備忘吧，下面是妹紙寫到主要內(nèi)容：
對象的創(chuàng)建：
1 創(chuàng)建一個面向?qū)ο?/strong>
var obj = new Object();
obj.name = 'haha';
obj.showName = function(){
alert(obj.name);
}
obj.showName();
缺點：當我們想創(chuàng)建多個面向?qū)ο蟮臅r候，重復代碼過多，需要封裝，所以有了工廠方法。
2 工廠方式
function CreatePerson(name){
var obj = new Object(); //原料
obj.name = name; //加工
obj.showName = function(){
alert(this.name);
}
return obj;//出廠
}
var p1 = CreatePerson('haha');
p1.showName();
var p2 = CreatePerson('hehe');
p2.showName();
//其實就是簡單的封裝函數(shù)，整個過程像工廠的流水線，所以叫工廠方式
缺點：無法識別創(chuàng)建的對象的類型。因為全部都是Object，沒有區(qū)分度，不像Date、Array等，因此出現(xiàn)了構(gòu)造函數(shù)模式。
3 構(gòu)造函數(shù)模式
function CreatePerson(name){
this.name = name;
this.showName = function(){
alert(this.name);
}
}
var p1 =new CreatePerson('haha');
p1.showName();
var p2 = new CreatePerson('hehe');
p2.showName();
我們通過這二個方面來改變：
1 函數(shù)名首字母大寫
這是為了區(qū)別于普通的函數(shù)，構(gòu)造函數(shù)本身其實就是普通的函數(shù)，只是我們專門用它來實現(xiàn)了構(gòu)造的功能，所以專門起了一個名字叫構(gòu)造函數(shù)，任何函數(shù)都可以成為構(gòu)造函數(shù)，這取決于你調(diào)用函數(shù)的方式，當使用了New的方式調(diào)用就成了構(gòu)造函數(shù)。
2 New 關(guān)鍵字調(diào)用
調(diào)用函數(shù)的時候用了 New關(guān)鍵字，那么New到底做了什么？用不用New有什么區(qū)別？再來看下面的例子
function CreatePerson(name){
this.name = name;
this.showName = function(){
alert(this.name);
};
console.log(this);
}
new CreatePerson('haha'); //CreatePerson
CreatePerson('haha'); //window
我們會發(fā)現(xiàn)當用New去調(diào)用一個函數(shù)的時候，this的指向會不一樣。其實New主要做了下面這些事，不過下面寫的只是大概的行為，并不是內(nèi)部源碼。
function CreatePerson(name){
var obj = {}; //聲明一個空對象obj
obj._proto_= CreatePerson.prototype;
//把這個對象的_proto_屬性指向構(gòu)造函數(shù)的原型對象,這樣obj就可以調(diào)用CreatePerson原型對象下的所有方法 ，這里原型先知道結(jié)論，下面會講。
CreatePerson.apply(obj); //用apply方法讓this指向obj對象
this.name = name; //obj對象添加屬性，方法
this.showName = function(){
alert(this.name);
};
return obj;//返回這個對象
}
函數(shù)構(gòu)造模式存在的問題：
alert(p1.showName==p2.showName);//false
缺點：可見這兩個對象并不是共用一個方法，每new一次，系統(tǒng)都會新創(chuàng)建一個內(nèi)存，這兩個對象各自有各自的地盤，但他們具有相同的功能，還不共用，肯定不是我們所希望的。所以就有了下一種方法，原型+構(gòu)造模式
4 原型+構(gòu)造模式
原型：每個函數(shù)都有一個prototype屬性，它是一個對象，也稱作原型對象，我們可以把方法和屬性寫在它上面（不過原型對象不僅僅有我們寫的屬性和方法，還有別的，下面會介紹），而通過這個函數(shù)創(chuàng)建出來的實例對象，都能共享這個原型對象下的方法和屬性。所以我們只需要把想要共享的東西放在函數(shù)的prototype下，不想共享的東西通過構(gòu)造函數(shù)來創(chuàng)建就可以了。
看個栗子（原型+構(gòu)造）
function CreatePerson(name){
this.name = name;
}
CreatePerson.prototype.showName = function(){
alert(this.name);
}
var p1 =new CreatePerson('haha');
p1.showName();
var p2 = new CreatePerson('hehe');
p2.showName();
alert(p1.showName==p2.showName);//true
測試為true，可見showName()方法是共享的，也就是說他們共用一個內(nèi)存，更進一步的說它們存在引用關(guān)系，也就是說你更改了p1的showName也會影響p2的showName。
_proto_屬性:
同一個函數(shù)造出來的實例對象能共享這個函數(shù)的prototype下的方法和屬性，但是它是如何做到的呢？這里要出場的就是_proto_屬性.
每個實例化對象都有_proto_屬性，它是一個指針，指向函數(shù)的prototype，也就是保存了它的地址。（JS中任何對象的值都是保存在堆內(nèi)存中，我們聲明的變量只是一個指針，保存了這個對象的實際地址，所以有了地址就能找到對象），
所以總得來說，每個實例化對象都有_proto_屬性，保存了構(gòu)造函數(shù)的原型對象的地址，通過這個屬性就可以擁有原型對象下的所有屬性和方法，_proto_屬性實際就是實例化對象和原型對象之間的連接
原型鏈：
每個函數(shù)都可以成為構(gòu)造函數(shù)，每個函數(shù)都有原型對象，每個原型對象也可以是一個實例化對象，比如，你創(chuàng)建了一個函數(shù)fun,它是構(gòu)造函數(shù)function的實例化對象，而function的原型對象，又是Object的實例對象。所以fun有個_proto_屬性可以訪問到function的原型對象,function原型對象也是個實例對象，也有個_proto_屬性,可以訪問到Object的原型對象，所以通過_proto_屬性，就形成了一條原型鏈。每個實例化對象都可以訪問到鏈子上方的方法和屬性，所以fun是可以訪問Object原型對象下的方法和屬性的。實際上所有對象都可以訪問到Object的原型對象。
原型鏈的訪問規(guī)則：先在自身的下面尋找，再去一級一級的往原型鏈上找。
如下：
function Aaa(){}
Aaa.prototype.num = 3;
var a1 = new Aaa();
a1.num =10;
alert(a1.num); //10
原型對象：
原型對象下可能有三種屬性：
1 原型對象所帶方法和屬性 2 constructor 3_proto_屬性
constructor:構(gòu)造函數(shù)屬性，每個函數(shù)的原型對象都有的默認屬性，指向函數(shù)。
每個實例化對象本身是沒有constructor屬性的，他們下面默認只有一個_proto_屬性,用來連接原型對象，而和構(gòu)造函數(shù)本身是沒有直接的聯(lián)系的。所以它的constructor是訪問的原型對象上的。所以當原型對象的constructor變化了，實例化對象的constructor也會改變。但是如果這個對象本身既是原型對象，又是實例化對象，那就擁有了constructor屬性，無需從原型對象上面訪問。**
看下面的例子，來驗證我們所說的：
function CreatePerson(name){
this.name = name;
}
CreatePerson.prototype.showName = function(){
console.log(this.name);
};
var p1 =new CreatePerson('haha');
p1.showName();
console.log(p1.constructor); // CreatePerson 來自CreatePerson.prototype
console.log(CreatePerson.prototype);
// {showName:{},constructor:CreatePerson,__proto__:Object.prototype}
//可見，原型對象保存了
1 自身添加的方法，
2 構(gòu)造函數(shù)constructor
3 _proto_(和上一層構(gòu)造函數(shù)原型對象的連接)
console.log(CreatePerson.prototype.__proto__===Object.prototype);
// true 這個原型對象本身又是object的實例化對象，所有_proto_指向Object的原型對象
console.log(CreatePerson.prototype.__proto__===Object);
// false 可見是和構(gòu)造函數(shù)下原型對象的連接，不是構(gòu)造函數(shù)
console.log(CreatePerson.prototype.constructor);
//CreatePerson CreatePerson.prototype是Object實例化對象,也是原型對象，所以自身擁有constructor屬性
console.log(Object.prototype.__proto__);
// null 原型鏈的終點是null
console.log(CreatePerson.__proto__); //function.prototype
// CreatePerson本身既是構(gòu)造函數(shù)又是function的實例化對象，擁有_proto_屬性，指向function的原型對象
console.log(CreatePerson.constructor);
// function 繼承自function.prototype
console.log(CreatePerson.prototype instanceof CreatePerson )
//驗證是否在一條原型鏈上 false
字面量法定義原型：
為了創(chuàng)建對象的代碼更方便，你一定見過這樣的代碼，就是字面量法：
function Aaa(){}
Aaa.prototype = {
showName:function(){},
showSex:function(){}
};
var a1 = new Aaa();
console.log(Aaa.prototype);
//{showName:function(){},_proto_}
//你會發(fā)現(xiàn)constructor不見了，因為這種方式相當于重新賦值了Aaa.prototype
console.log(Aaa.prototype.constructor);
//Object 因為自身沒有了constructor屬性，就去上級原型對象找，找到了Object
console.log(a1.constructor );
//Object 也變了，驗證了它是訪問的原型對象上的
因此我們在寫的時候需要修正一下原型的指向：
function Aaa(){}
Aaa.prototype = {
constructor:Aaa,
num1:function(){alert(10);}
}
var a1 = new Aaa();
a1.constructor // Aaa
以上所述是小編給大家介紹的JavaScrpt的面向?qū)ο笕娼馕觯Ｍ麑Υ蠹矣兴鶐椭?，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
-
這篇文章主要給大家介紹了關(guān)于js使用child_process模塊操作cmd命令的相關(guān)資料,在JavaScript中執(zhí)行CMD命令非常靈活,可以執(zhí)行任何CMD命令,例如:復制、移動、刪除文件等等,需要的朋友可以參考下 2024-01-01
-
百度分頁想必大家都知道吧，瀏覽網(wǎng)頁的朋友都應該知道，下面有個小例子使用到了js、ajax等來模仿百度的分頁，感興趣的朋友可以參考下 2013-10-10
-
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)播放音頻功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下 2022-07-07
-
這篇文章介紹了js 三級關(guān)聯(lián)菜單效果，有需要的朋友可以參考一下 2013-08-08
-
今天小編就為大家分享一篇layui實現(xiàn)二維碼彈窗、并下載到本地的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧 2019-09-09
-
js中textContent、innerText和innerHTML的用法以及區(qū)別
這篇文章主要介紹了JavaScript中textContent、innerText和innerHTML的用法以及區(qū)別,需要的朋友可以參考下 2023-05-05
-
Object.assign方法用于對象的合并，將源對象（ source ）的所有可枚舉屬性，復制到目標對象（ target ），下面這篇文章主要給大家介紹了關(guān)于ES6中新增的Object.assign()方法的相關(guān)資料，需要的朋友可以參考下。 2017-09-09
-
indexOf() 方法可返回數(shù)組中某個指定的元素位置，本文就來介紹一下js的indexOf方法使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下 2023-05-05
-
DB.ASP 用Javascript寫ASP很靈活很好用很easy
DB.ASP 用Javascript寫ASP很靈活很好用很easy，喜歡用js寫asp的朋友可以參考下。 2011-07-07
-
下拉選擇框，是我們在網(wǎng)頁中經(jīng)常使用到的，在本文為大家詳細介紹下使用js使用的下拉選擇框 2013-11-11
最新評論
每次說到j(luò)avascript的面向?qū)ο?，總感覺自己心里懂，但是卻不知道該怎么說，這就是似懂非懂到表現(xiàn)，于是乎，每次一說，就要到處去查找資料，零零碎碎到看了一些，感覺有懂了，但是過段時間，好像又不知道是怎么回事了，于是乎，又到處找資料，然道是我本來就缺對象？才不理解對象是啥，以至于現(xiàn)實中找找對象，javascript中也在找對象！哎，好尷尬??！直到我看到了一個妹紙寫到“不可不知的javascript面向?qū)ο蟆?，我才明白面向?qū)ο笫鞘裁矗@是不是說我要找到對象就是這個妹紙呢😄，先記錄一下備忘吧，下面是妹紙寫到主要內(nèi)容：
對象的創(chuàng)建：
1 創(chuàng)建一個面向?qū)ο?/strong>
var obj = new Object();
obj.name = 'haha';
obj.showName = function(){
alert(obj.name);
}
obj.showName();
缺點：當我們想創(chuàng)建多個面向?qū)ο蟮臅r候，重復代碼過多，需要封裝，所以有了工廠方法。
2 工廠方式
function CreatePerson(name){
var obj = new Object(); //原料
obj.name = name; //加工
obj.showName = function(){
alert(this.name);
}
return obj;//出廠
}
var p1 = CreatePerson('haha');
p1.showName();
var p2 = CreatePerson('hehe');
p2.showName();
//其實就是簡單的封裝函數(shù)，整個過程像工廠的流水線，所以叫工廠方式
缺點：無法識別創(chuàng)建的對象的類型。因為全部都是Object，沒有區(qū)分度，不像Date、Array等，因此出現(xiàn)了構(gòu)造函數(shù)模式。
3 構(gòu)造函數(shù)模式
function CreatePerson(name){
this.name = name;
this.showName = function(){
alert(this.name);
}
}
var p1 =new CreatePerson('haha');
p1.showName();
var p2 = new CreatePerson('hehe');
p2.showName();
我們通過這二個方面來改變：
1 函數(shù)名首字母大寫
這是為了區(qū)別于普通的函數(shù)，構(gòu)造函數(shù)本身其實就是普通的函數(shù)，只是我們專門用它來實現(xiàn)了構(gòu)造的功能，所以專門起了一個名字叫構(gòu)造函數(shù)，任何函數(shù)都可以成為構(gòu)造函數(shù)，這取決于你調(diào)用函數(shù)的方式，當使用了New的方式調(diào)用就成了構(gòu)造函數(shù)。
2 New 關(guān)鍵字調(diào)用
調(diào)用函數(shù)的時候用了 New關(guān)鍵字，那么New到底做了什么？用不用New有什么區(qū)別？再來看下面的例子
function CreatePerson(name){
this.name = name;
this.showName = function(){
alert(this.name);
};
console.log(this);
}
new CreatePerson('haha'); //CreatePerson
CreatePerson('haha'); //window
我們會發(fā)現(xiàn)當用New去調(diào)用一個函數(shù)的時候，this的指向會不一樣。其實New主要做了下面這些事，不過下面寫的只是大概的行為，并不是內(nèi)部源碼。
function CreatePerson(name){
var obj = {}; //聲明一個空對象obj
obj._proto_= CreatePerson.prototype;
//把這個對象的_proto_屬性指向構(gòu)造函數(shù)的原型對象,這樣obj就可以調(diào)用CreatePerson原型對象下的所有方法 ，這里原型先知道結(jié)論，下面會講。
CreatePerson.apply(obj); //用apply方法讓this指向obj對象
this.name = name; //obj對象添加屬性，方法
this.showName = function(){
alert(this.name);
};
return obj;//返回這個對象
}
函數(shù)構(gòu)造模式存在的問題：
alert(p1.showName==p2.showName);//false
缺點：可見這兩個對象并不是共用一個方法，每new一次，系統(tǒng)都會新創(chuàng)建一個內(nèi)存，這兩個對象各自有各自的地盤，但他們具有相同的功能，還不共用，肯定不是我們所希望的。所以就有了下一種方法，原型+構(gòu)造模式
4 原型+構(gòu)造模式
原型：每個函數(shù)都有一個prototype屬性，它是一個對象，也稱作原型對象，我們可以把方法和屬性寫在它上面（不過原型對象不僅僅有我們寫的屬性和方法，還有別的，下面會介紹），而通過這個函數(shù)創(chuàng)建出來的實例對象，都能共享這個原型對象下的方法和屬性。所以我們只需要把想要共享的東西放在函數(shù)的prototype下，不想共享的東西通過構(gòu)造函數(shù)來創(chuàng)建就可以了。
看個栗子（原型+構(gòu)造）
function CreatePerson(name){
this.name = name;
}
CreatePerson.prototype.showName = function(){
alert(this.name);
}
var p1 =new CreatePerson('haha');
p1.showName();
var p2 = new CreatePerson('hehe');
p2.showName();
alert(p1.showName==p2.showName);//true
測試為true，可見showName()方法是共享的，也就是說他們共用一個內(nèi)存，更進一步的說它們存在引用關(guān)系，也就是說你更改了p1的showName也會影響p2的showName。
_proto_屬性:
同一個函數(shù)造出來的實例對象能共享這個函數(shù)的prototype下的方法和屬性，但是它是如何做到的呢？這里要出場的就是_proto_屬性.
每個實例化對象都有_proto_屬性，它是一個指針，指向函數(shù)的prototype，也就是保存了它的地址。（JS中任何對象的值都是保存在堆內(nèi)存中，我們聲明的變量只是一個指針，保存了這個對象的實際地址，所以有了地址就能找到對象），
所以總得來說，每個實例化對象都有_proto_屬性，保存了構(gòu)造函數(shù)的原型對象的地址，通過這個屬性就可以擁有原型對象下的所有屬性和方法，_proto_屬性實際就是實例化對象和原型對象之間的連接
原型鏈：
每個函數(shù)都可以成為構(gòu)造函數(shù)，每個函數(shù)都有原型對象，每個原型對象也可以是一個實例化對象，比如，你創(chuàng)建了一個函數(shù)fun,它是構(gòu)造函數(shù)function的實例化對象，而function的原型對象，又是Object的實例對象。所以fun有個_proto_屬性可以訪問到function的原型對象,function原型對象也是個實例對象，也有個_proto_屬性,可以訪問到Object的原型對象，所以通過_proto_屬性，就形成了一條原型鏈。每個實例化對象都可以訪問到鏈子上方的方法和屬性，所以fun是可以訪問Object原型對象下的方法和屬性的。實際上所有對象都可以訪問到Object的原型對象。
原型鏈的訪問規(guī)則：先在自身的下面尋找，再去一級一級的往原型鏈上找。
如下：
function Aaa(){}
Aaa.prototype.num = 3;
var a1 = new Aaa();
a1.num =10;
alert(a1.num); //10
原型對象：
原型對象下可能有三種屬性：
1 原型對象所帶方法和屬性 2 constructor 3_proto_屬性
constructor:構(gòu)造函數(shù)屬性，每個函數(shù)的原型對象都有的默認屬性，指向函數(shù)。
每個實例化對象本身是沒有constructor屬性的，他們下面默認只有一個_proto_屬性,用來連接原型對象，而和構(gòu)造函數(shù)本身是沒有直接的聯(lián)系的。所以它的constructor是訪問的原型對象上的。所以當原型對象的constructor變化了，實例化對象的constructor也會改變。但是如果這個對象本身既是原型對象，又是實例化對象，那就擁有了constructor屬性，無需從原型對象上面訪問。**
看下面的例子，來驗證我們所說的：
function CreatePerson(name){
this.name = name;
}
CreatePerson.prototype.showName = function(){
console.log(this.name);
};
var p1 =new CreatePerson('haha');
p1.showName();
console.log(p1.constructor); // CreatePerson 來自CreatePerson.prototype
console.log(CreatePerson.prototype);
// {showName:{},constructor:CreatePerson,__proto__:Object.prototype}
//可見，原型對象保存了
1 自身添加的方法，
2 構(gòu)造函數(shù)constructor
3 _proto_(和上一層構(gòu)造函數(shù)原型對象的連接)
console.log(CreatePerson.prototype.__proto__===Object.prototype);
// true 這個原型對象本身又是object的實例化對象，所有_proto_指向Object的原型對象
console.log(CreatePerson.prototype.__proto__===Object);
// false 可見是和構(gòu)造函數(shù)下原型對象的連接，不是構(gòu)造函數(shù)
console.log(CreatePerson.prototype.constructor);
//CreatePerson CreatePerson.prototype是Object實例化對象,也是原型對象，所以自身擁有constructor屬性
console.log(Object.prototype.__proto__);
// null 原型鏈的終點是null
console.log(CreatePerson.__proto__); //function.prototype
// CreatePerson本身既是構(gòu)造函數(shù)又是function的實例化對象，擁有_proto_屬性，指向function的原型對象
console.log(CreatePerson.constructor);
// function 繼承自function.prototype
console.log(CreatePerson.prototype instanceof CreatePerson )
//驗證是否在一條原型鏈上 false
字面量法定義原型：
為了創(chuàng)建對象的代碼更方便，你一定見過這樣的代碼，就是字面量法：
function Aaa(){}
Aaa.prototype = {
showName:function(){},
showSex:function(){}
};
var a1 = new Aaa();
console.log(Aaa.prototype);
//{showName:function(){},_proto_}
//你會發(fā)現(xiàn)constructor不見了，因為這種方式相當于重新賦值了Aaa.prototype
console.log(Aaa.prototype.constructor);
//Object 因為自身沒有了constructor屬性，就去上級原型對象找，找到了Object
console.log(a1.constructor );
//Object 也變了，驗證了它是訪問的原型對象上的
因此我們在寫的時候需要修正一下原型的指向：
function Aaa(){}
Aaa.prototype = {
constructor:Aaa,
num1:function(){alert(10);}
}
var a1 = new Aaa();
a1.constructor // Aaa
以上所述是小編給大家介紹的JavaScrpt的面向?qū)ο笕娼馕觯Ｍ麑Υ蠹矣兴鶐椭?，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
- 這篇文章主要給大家介紹了關(guān)于js使用child_process模塊操作cmd命令的相關(guān)資料,在JavaScript中執(zhí)行CMD命令非常靈活,可以執(zhí)行任何CMD命令,例如:復制、移動、刪除文件等等,需要的朋友可以參考下2024-01-01
- 百度分頁想必大家都知道吧，瀏覽網(wǎng)頁的朋友都應該知道，下面有個小例子使用到了js、ajax等來模仿百度的分頁，感興趣的朋友可以參考下2013-10-10
- 這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)播放音頻功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
- 這篇文章介紹了js 三級關(guān)聯(lián)菜單效果，有需要的朋友可以參考一下2013-08-08
- 今天小編就為大家分享一篇layui實現(xiàn)二維碼彈窗、并下載到本地的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
-
js中textContent、innerText和innerHTML的用法以及區(qū)別
這篇文章主要介紹了JavaScript中textContent、innerText和innerHTML的用法以及區(qū)別,需要的朋友可以參考下2023-05-05 - Object.assign方法用于對象的合并，將源對象（ source ）的所有可枚舉屬性，復制到目標對象（ target ），下面這篇文章主要給大家介紹了關(guān)于ES6中新增的Object.assign()方法的相關(guān)資料，需要的朋友可以參考下。2017-09-09
- indexOf() 方法可返回數(shù)組中某個指定的元素位置，本文就來介紹一下js的indexOf方法使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2023-05-05
-
DB.ASP 用Javascript寫ASP很靈活很好用很easy
DB.ASP 用Javascript寫ASP很靈活很好用很easy，喜歡用js寫asp的朋友可以參考下。2011-07-07 - 下拉選擇框，是我們在網(wǎng)頁中經(jīng)常使用到的，在本文為大家詳細介紹下使用js使用的下拉選擇框2013-11-11