建站
咨詢
售后
建站咨詢
新聞中心
1 創(chuàng)建一個面向?qū)ο?/strong>
為岑溪等地區(qū)用戶提供了全套網(wǎng)頁設計制作服務，及岑溪網(wǎng)站建設行業(yè)解決方案。主營業(yè)務為成都網(wǎng)站設計、做網(wǎng)站、岑溪網(wǎng)站設計，以傳統(tǒng)方式定制建設網(wǎng)站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！
var obj = new Object(); //創(chuàng)建一個空對象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)了構造函數(shù)模式。
3 構造函數(shù)模式
我們要通過這二個方面來改變：1 函數(shù)名首字母大寫 2 New 關鍵字調(diào)用
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首字母大寫，是為了區(qū)別于普通的函數(shù)，構造函數(shù)本身就是普通的函數(shù)，只是我們專門用它來實現(xiàn)了構造的功能，所以專門起了一個名字叫構造函數(shù)，任何函數(shù)都可以成為構造函數(shù)，這取決于你調(diào)用函數(shù)的方式。是否用了New。
2 調(diào)用函數(shù)的時候用了 New關鍵字，那么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 res = {}; //聲明一個空對象res
res._proto_= CreatePerson.prototype;//這個對象的_proto_屬性指向構造函數(shù)的原型對象,這樣res就可以調(diào)用CreatePerson原型對象下的所有方法
CreatePerson.apply(res);//把this指向改為res對象
this.name = name; //res對象添加屬性，方法
this.showName = function(){
alert(this.name);
}; return res;//返回這個對象}
關于New做時候都是內(nèi)部的行為，看不到但確實存在，關于上面原型可以先大概知道結論，下面會說原型，接著看就懂了。
函數(shù)構造模式存在的問題：
alert(p1.showName==p2.showName);//false
測試這個代碼，兩個方法是不相同的，也就是說這兩個對象并不是共用一個方法，每new一次，系統(tǒng)都會新創(chuàng)建一個內(nèi)存，這兩個對象各自有各自的地盤，但他們具有相同的功能，還不共用，肯定不是我們所希望的。所以就有了下一種方法，原型+構造模式
4 原型+構造模式
每個函數(shù)都有一個prototype屬性，它是一個對象，也稱作原型對象，這個原型對象，我們可以把方法和屬性寫在它上面（不過原型對象不僅僅有我們寫的屬性和方法，還有別的，下面會介紹），而通過這個函數(shù)創(chuàng)建出來的實例對象，都能共享這個原型對象下的方法和屬性。所以我們只需要把想要共享的東西放在函數(shù)的prototype下，不想共享的東西通過構造函數(shù)來創(chuàng)建就可以了。
看個栗子（原型+構造）
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，可以看到在構造函數(shù)的原型下面加的方法showName()方法是所有通過這個構造函數(shù)創(chuàng)建出來的對象所共享的，也就是說他們共用一個內(nèi)存，更進一步的說它們存在引用關系，也就是說你更改了p1的showName也會影響p2的showName。
所以我們在構造對象的時候，一般是原型模式和構造模式組合使用，變化的用構造模式 不變的公用的用原型模式，就像上面的這個栗子，屬性用的構造函數(shù)，因為一般不同對象屬性都不同，方法用原型模式。
_proto_屬性:同一個函數(shù)造出來的實例對象能共享這個函數(shù)的prototype下的方法和屬性，但是它是如何做到的呢？這里要出場的就是_proto_屬性，每個實例化對象都有一個_proto_屬性，它是一個指針，指向函數(shù)的prototype，也就是保存了它的地址。（JS中任何對象的值都是保存在堆內(nèi)存中，我們聲明的變量只是一個指針，保存了這個對象的實際地址，所以有了地址就能找到對象），所以總得來說，每個實例化對象都有_proto_屬性，保存了構造函數(shù)的原型對象的地址，通過這個屬性就可以擁有原型對象下的所有屬性和方法，_proto_屬性實際就是實例化對象和原型對象之間的連接。
原型鏈： 每個函數(shù)都可以成為構造函數(shù)，每個函數(shù)都有原型對象，每個原型對象也可以是一個實例化對象，比如，你創(chuàng)建了一個函數(shù)fun,它是構造函數(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:構造函數(shù)屬性，每個函數(shù)的原型對象都有的默認屬性，指向函數(shù)。每個實例化對象本身是沒有constructor屬性的，每個實例化對象下面都默認只有一個_proto_,用來連接原型對象，而和構造函數(shù)本身是沒有直接的聯(lián)系的。所以它的constructor是訪問的原型對象上的。所以當原型對象的constructor變化了，實例化對象的constructor也會改變。但是如果這個對象本身既是原型對象，又是實例化對象，那就擁有了constructor屬性，無需從原型對象繼承。
看下面的例子，來驗證我們所說的：
.name == p1 = CreatePerson('haha'console.log(CreatePerson.prototype.__proto__===Object.prototype);console.log(CreatePerson.prototype.__proto__===Object);console.log(CreatePerson.constructor); console.log(CreatePerson.prototype CreatePerson )
字面量法定義原型：
為了創(chuàng)建對象的代碼更方便，你一定見過這樣的代碼，就是字面量法：
function Aaa(){}
Aaa.prototype = {
showName:function(){alert(10);}
}; var a1 = new Aaa();
console.log(Aaa.prototype);//{showName:function(){},_proto_} 你會發(fā)現(xiàn)constructor不見了，因為這種方式相當于重新賦值了Aaa.prototype console.log(Aaa.prototype.constructor);//Object 因為自身沒有了constructor屬性，就去上級原型對象找，找到了Objectconsole.log(a1.constructor );//Object 也變了，驗證了它是訪問的原型對象上的
因此我們在寫的時候需要修正一下原型的指向：
function Aaa(){}
Aaa.prototype = {
constructor:Aaa,
num1:function(){alert(10);}
}
var a1 = new Aaa();
a1.constructor // Aaa
新聞名稱：JS面向?qū)ο螅瑒?chuàng)建，繼承
URL鏈接：http://www.ef60e0e.cn/article/jhdsso.html
