這篇文章主要介紹了JavaScript中原型和原型鏈詳解,本文講解了私有變量和函數(shù)、靜態(tài)變量和函數(shù)、實(shí)例變量和函數(shù)、原型和原型鏈的基本概念,需要的朋友可以參考下
javascript中的每個(gè)對(duì)象都有一個(gè)內(nèi)置的屬性prototype,Javascript中對(duì)象的prototype屬性的解釋是:返回對(duì)象類(lèi)型原型的引用。意思是是prototype屬性保存著對(duì)另一個(gè)JavaScript對(duì)象的引用,這個(gè)對(duì)象作為當(dāng)前對(duì)象的父對(duì)象。
代碼如下:
A.prototype = new B();
理解prototype不應(yīng)把它和繼承混淆。A的prototype為B的一個(gè)實(shí)例,可以理解A將B中的方法和屬性全部克隆了一遍。A能使用B的方法和屬性。這里強(qiáng)調(diào)的是克隆而不是繼承。可以出現(xiàn)這種情況:A的prototype是B的實(shí)例,同時(shí)B的prototype也是A的實(shí)例。
繼續(xù)看下面的分析:
私有變量和函數(shù)
在函數(shù)內(nèi)部定義的變量和函數(shù),如果不對(duì)外提供接口,外部是無(wú)法訪(fǎng)問(wèn)到的,也就是該函數(shù)的私有的變量和函數(shù)。
代碼如下:
<script type="text/javascript">
function Box(){
var color = "blue";//私有變量
var fn = function() //私有函數(shù)
{
}
}
</script>
這樣在函數(shù)對(duì)象Box外部無(wú)法訪(fǎng)問(wèn)變量color和fn,他們就變成私有的了:
代碼如下:
var obj = new Box();
alert(obj.color);//彈出 undefined
alert(obj.fn);//同上
靜態(tài)變量和函數(shù)
當(dāng)定義一個(gè)函數(shù)后通過(guò)點(diǎn)號(hào) “.”為其添加的屬性和函數(shù),通過(guò)對(duì)象本身仍然可以訪(fǎng)問(wèn)得到,但是其實(shí)例卻訪(fǎng)問(wèn)不到,這樣的變量和函數(shù)分別被稱(chēng)為靜態(tài)變量和靜態(tài)函數(shù)。
代碼如下:
<script type="text/javascript">
function Obj(){};
Obj.num = 72;//靜態(tài)變量
Obj.fn = function() //靜態(tài)函數(shù)
{
}
alert(Obj.num);//72
alert(typeof Obj.fn)//function
var t = new Obj();
alert(t.name);//undefined
alert(typeof t.fn);//undefined
</script>
實(shí)例變量和函數(shù)
在面向?qū)ο缶幊讨谐艘恍?kù)函數(shù)我們還是希望在對(duì)象定義的時(shí)候同時(shí)定義一些屬性和方法,實(shí)例化后可以訪(fǎng)問(wèn),js也能做到這樣
代碼如下:
<script type="text/javascript">
function Box(){
this.a=[]; //實(shí)例變量
this.fn=function(){ //實(shí)例方法
}
}
console.log(typeof Box.a); //undefined
console.log(typeof Box.fn); //undefined
var box=new Box();
console.log(typeof box.a); //object
console.log(typeof box.fn); //function
</script>
為實(shí)例變量和方法添加新的方法和屬性
代碼如下:
<script type="text/javascript">
function Box(){
this.a=[]; //實(shí)例變量
this.fn=function(){ //實(shí)例方法
}
}
var box1=new Box();
box1.a.push(1);
box1.fn={};
console.log(box1.a); //[1]
console.log(typeof box1.fn); //object
var box2=new Box();
console.log(box2.a); //[]
console.log(typeof box2.fn); //function
</script>
在box1中修改了a和fn,而在box2中沒(méi)有改變,由于數(shù)組和函數(shù)都是對(duì)象,是引用類(lèi)型,這就說(shuō)明box1中的屬性和方法與box2中的屬性與方法雖然同名但卻不是一個(gè)引用,而是對(duì)Box對(duì)象定義的屬性和方法的一個(gè)復(fù)制。
這個(gè)對(duì)屬性來(lái)說(shuō)沒(méi)有什么問(wèn)題,但是對(duì)于方法來(lái)說(shuō)問(wèn)題就很大了,因?yàn)榉椒ǘ际窃谧鐾耆粯拥墓δ?,但是卻又兩份復(fù)制,如果一個(gè)函數(shù)對(duì)象有上千和實(shí)例方法,那么它的每個(gè)實(shí)例都要保持一份上千個(gè)方法的復(fù)制,這顯然是不科學(xué)的,這可腫么辦呢,prototype應(yīng)運(yùn)而生。
基本概念
我們創(chuàng)建的每個(gè)函數(shù)都有一個(gè)prototype屬性,這個(gè)屬性是一個(gè)指針,指向一個(gè)對(duì)象,這個(gè)對(duì)象的用途是包含可以由特定類(lèi)型的所有實(shí)例共享的屬性和方法。那么,prototype就是通過(guò)調(diào)用構(gòu)造函數(shù)而創(chuàng)建的那個(gè)對(duì)象實(shí)例的原型對(duì)象。
使用原型的好處是可以讓對(duì)象實(shí)例共享它所包含的屬性和方法。也就是說(shuō),不必在構(gòu)造函數(shù)中添加定義對(duì)象信息,而是可以直接將這些信息添加到原型中。使用構(gòu)造函數(shù)的主要問(wèn)題就是每個(gè)方法都要在每個(gè)實(shí)例中創(chuàng)建一遍。
在JavaScript中,一共有兩種類(lèi)型的值,原始值和對(duì)象值。每個(gè)對(duì)象都有一個(gè)內(nèi)部屬性 prototype ,我們通常稱(chēng)之為原型。原型的值可以是一個(gè)對(duì)象,也可以是null。如果它的值是一個(gè)對(duì)象,則這個(gè)對(duì)象也一定有自己的原型。這樣就形成了一條線(xiàn)性的鏈,我們稱(chēng)之為原型鏈。
含義
函數(shù)可以用來(lái)作為構(gòu)造函數(shù)來(lái)使用。另外只有函數(shù)才有prototype屬性并且可以訪(fǎng)問(wèn)到,但是對(duì)象實(shí)例不具有該屬性,只有一個(gè)內(nèi)部的不可訪(fǎng)問(wèn)的__proto__屬性。__proto__是對(duì)象中一個(gè)指向相關(guān)原型的神秘鏈接。按照標(biāo)準(zhǔn),__proto__是不對(duì)外公開(kāi)的,也就是說(shuō)是個(gè)私有屬性,但是Firefox的引擎將他暴露了出來(lái)成為了一個(gè)共有的屬性,我們可以對(duì)外訪(fǎng)問(wèn)和設(shè)置。
代碼如下:
<script type="text/javascript">
var Browser = function(){};
Browser.prototype.run = function(){
alert("I'm Gecko,a kernel of firefox");
}
var Bro = new Browser();
Bro.run();
</script>
當(dāng)我們調(diào)用Bro.run()方法時(shí),由于Bro中沒(méi)有這個(gè)方法,所以,他就會(huì)去他的__proto__中去找,也就是Browser.prototype,所以最終執(zhí)行了該run()方法。(在這里,函數(shù)首字母大寫(xiě)的都代表構(gòu)造函數(shù),以用來(lái)區(qū)分普通函數(shù))
當(dāng)調(diào)用構(gòu)造函數(shù)創(chuàng)建一個(gè)實(shí)例的時(shí)候,實(shí)例內(nèi)部將包含一個(gè)內(nèi)部指針(__proto__)指向構(gòu)造函數(shù)的prototype,這個(gè)連接存在于實(shí)例和構(gòu)造函數(shù)的prototype之間,而不是實(shí)例與構(gòu)造函數(shù)之間。
代碼如下:
<script type="text/javascript">
function Person(name){ //構(gòu)造函數(shù)
this.name=name;
}
Person.prototype.printName=function() //原型對(duì)象
{
alert(this.name);
}
var person1=new Person('Byron');//實(shí)例化對(duì)象
console.log(person1.__proto__);//Person
console.log(person1.constructor);//自己試試看會(huì)是什么吧
console.log(Person.prototype);//指向原型對(duì)象Person
var person2=new Person('Frank');
</script>
Person的實(shí)例person1中包含了name屬性,同時(shí)自動(dòng)生成一個(gè)__proto__屬性,該屬性指向Person的prototype,可以訪(fǎng)問(wèn)到prototype內(nèi)定義的printName方法,大概就是這個(gè)樣子的:
每個(gè)JavaScript函數(shù)都有prototype屬性,這個(gè)屬性引用了一個(gè)對(duì)象,這個(gè)對(duì)象就是原型對(duì)象。原型對(duì)象初始化的時(shí)候是空的,我們可以在里面自定義任何屬性和方法,這些方法和屬性都將被該構(gòu)造函數(shù)所創(chuàng)建的對(duì)象繼承。
那么,現(xiàn)在問(wèn)題來(lái)了。構(gòu)造函數(shù)、實(shí)例和原型對(duì)象三者之間有什么關(guān)系呢?
構(gòu)造函數(shù)、實(shí)例和原型對(duì)象的區(qū)別
實(shí)例就是通過(guò)構(gòu)造函數(shù)創(chuàng)建的。實(shí)例一創(chuàng)造出來(lái)就具有constructor屬性(指向構(gòu)造函數(shù))和__proto__屬性(指向原型對(duì)象),
構(gòu)造函數(shù)中有一個(gè)prototype屬性,這個(gè)屬性是一個(gè)指針,指向它的原型對(duì)象。
原型對(duì)象內(nèi)部也有一個(gè)指針(constructor屬性)指向構(gòu)造函數(shù):Person.prototype.constructor = Person;
實(shí)例可以訪(fǎng)問(wèn)原型對(duì)象上定義的屬性和方法。
在這里person1和person2就是實(shí)例,prototype是他們的原型對(duì)象。
再舉個(gè)栗子:
代碼如下:
<script type="text/javascript">
function Animal(name) //積累構(gòu)造函數(shù)
{
this.name = name;//設(shè)置對(duì)象屬性
}
Animal.prototype.behavior = function() //給基類(lèi)構(gòu)造函數(shù)的prototype添加behavior方法
{
alert("this is a "+this.name);
}
var Dog = new Animal("dog");//創(chuàng)建Dog對(duì)象
var Cat = new Animal("cat");//創(chuàng)建Cat對(duì)象
Dog.behavior();//通過(guò)Dog對(duì)象直接調(diào)用behavior方法
Cat.behavior();//output "this is a cat"
alert(Dog.behavior==Cat.behavior);//output true;
</script>
可以從程序運(yùn)行結(jié)果看出,構(gòu)造函數(shù)的prototype上定義的方法確實(shí)可以通過(guò)對(duì)象直接調(diào)用到,而且代碼是共享的。(可以試一下將Animal.prototype.behavior 中的prototype屬性去掉,看看還能不能運(yùn)行。)在這里,prototype屬性指向Animal對(duì)象。
數(shù)組對(duì)象實(shí)例
再看個(gè)數(shù)組對(duì)象的實(shí)例。當(dāng)我們創(chuàng)建出array1這個(gè)對(duì)象的時(shí)候,array1實(shí)際在Javascript引擎中的對(duì)象模型如下:
代碼如下:
var array1 = [1,2,3];
array1對(duì)象具有一個(gè)length屬性值為3,但是我們可以通過(guò)如下的方法來(lái)為array1增加元素:
代碼如下:
array1.push(4);
push這個(gè)方法來(lái)自于array1的__proto__成員指向?qū)ο蟮囊粋€(gè)方法(Array.prototye.push())。正是因?yàn)樗械臄?shù)組對(duì)象(通過(guò)[]來(lái)創(chuàng)建的)都包含有一個(gè)指向同一個(gè)具有push,reverse等方法對(duì)象(Array.prototype)的__proto__成員,才使得這些數(shù)組對(duì)象可以使用push,reverse等方法。
函數(shù)對(duì)象實(shí)例
代碼如下:
function Base() {
this.id = "base"
}
代碼如下:
var obj = new Base();
這樣代碼的結(jié)果是什么,我們?cè)贘avascript引擎中看到的對(duì)象模型是:
new操作符具體干了什么呢?其實(shí)很簡(jiǎn)單,就干了三件事情。
代碼如下:
var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);
原型鏈
原型鏈:當(dāng)從一個(gè)對(duì)象那里調(diào)取屬性或方法時(shí),如果該對(duì)象自身不存在這樣的屬性或方法,就會(huì)去自己關(guān)聯(lián)的prototype對(duì)象那里尋找,如果prototype沒(méi)有,就會(huì)去prototype關(guān)聯(lián)的前輩prototype那里尋找,如果再?zèng)]有則繼續(xù)查找Prototype.Prototype引用的對(duì)象,依次類(lèi)推,直到Prototype.….Prototype為undefined(Object的Prototype就是undefined)從而形成了所謂的“原型鏈”。
代碼如下:
<script type="text/javascript">
function Shape(){
this.name = "shape";
this.toString = function(){
return this.name;
}
}
function TwoShape(){
this.name = "2 shape";
}
function Triangle(side,height){
this.name = "Triangle";
this.side = side;
this.height = height;
this.getArea = function(){
return this.side*this.height/2;
}
}
TwoShape.prototype = new Shape();
Triangle.prototype = new TwoShape();
</script>
這里,用構(gòu)造器Shape()新建了一個(gè)實(shí)體,然后用它去覆蓋該對(duì)象的原型。
代碼如下:
<script type="text/javascript">
function Shape(){
this.name = "shape";
this.toString = function(){
return this.name;
}
}
function TwoShape(){
this.name = "2 shape";
}
function Triangle(side,height){
this.name = "Triangle";
this.side = side;
this.height = height;
this.getArea = function(){
return this.side*this.height/2;
}
}
TwoShape.prototype = new Shape();
Triangle.prototype = new TwoShape();
TwoShape.prototype.constructor = TwoShape;
Triangle.prototype.constructor = Triangle;
var my = new Triangle(5,10);
my.getArea();
my.toString();//Triangle
my.constructor;//Triangle(side,height)
</script>
原型繼承
原型繼承:在原型鏈的末端,就是Object構(gòu)造函數(shù)prototype屬性指向的那個(gè)原型對(duì)象。這個(gè)原型對(duì)象是所有對(duì)象的祖先,這個(gè)老祖宗實(shí)現(xiàn)了諸如toString等所有對(duì)象天生就該具有的方法。其他內(nèi)置構(gòu)造函數(shù),如Function,Boolean,String,Date和RegExp等的prototype都是從這個(gè)老祖宗傳承下來(lái)的,但他們各自又定義了自身的屬性和方法,從而他們的子孫就表現(xiàn)出各自宗族的那些特征。
ECMAScript中,實(shí)現(xiàn)繼承的方法就是依靠原型鏈實(shí)現(xiàn)的。
代碼如下:
<script type="text/javascript">
function Box(){ //被繼承的函數(shù)叫做超類(lèi)型(父類(lèi),基類(lèi))
this.name = "Jack";
}
function Tree(){ //繼承的函數(shù)叫做子類(lèi)型(子類(lèi),派生類(lèi))
this.age = 300;
}
//通過(guò)原型鏈繼承,賦值給子類(lèi)型的原型屬性
//new Box()會(huì)將box構(gòu)造里的信息和原型里的信息都交給Tree
Tree.prototype = new Box();//Tree繼承了Box,通過(guò)原型,形成鏈條
var tree = new Tree();
alert(tree.name);//彈出 Jack
</script>
原型鏈的問(wèn)題:原型鏈雖然很強(qiáng)大,可以用它來(lái)實(shí)現(xiàn)繼承,但它也存在一些問(wèn)題。其中最主要的問(wèn)題來(lái)自包含引用類(lèi)型的值原型。包含引用類(lèi)型的原型屬性會(huì)被所有實(shí)例共享;而這也正是為什么要在構(gòu)造函數(shù)中,而不是在原型對(duì)象中定義屬性的原因。在通過(guò)原型來(lái)實(shí)現(xiàn)繼承時(shí),原型實(shí)際上回變成另一個(gè)類(lèi)型的實(shí)例。于是,原先的實(shí)例屬性也就變成了原型的屬性。
在創(chuàng)建子類(lèi)型的實(shí)例時(shí),不能向超類(lèi)型的構(gòu)造函數(shù)中傳遞參數(shù)。實(shí)際上,應(yīng)該說(shuō)是沒(méi)有辦法在不影響所有對(duì)象實(shí)例的情況下,給超類(lèi)型的構(gòu)造函數(shù)傳遞參數(shù)。再加上剛剛討論的由于原型中包含引用類(lèi)型值所帶來(lái)的問(wèn)題,實(shí)踐中很少會(huì)單獨(dú)使用原型鏈。
再舉個(gè)栗子:
代碼如下:
<script type="text/javascript">
function Person(name)
{
this.name = name;//設(shè)置對(duì)象屬性
};
Person.prototype.company = "Microsoft";//設(shè)置原型的屬性
Person.prototype.SayHello = function() //原型的方法
{
alert("Hello,I'm "+ this.name+ " of " + this.company);
};
var BillGates = new Person("BillGates");//創(chuàng)建person對(duì)象
BillGates.SayHello();//繼承了原型的內(nèi)容,輸出"Hello,I'm BillGates of Microsoft"
var Jobs = new Person("Jobs");
Jobs.company = "Apple";//設(shè)置自己的company屬性,掩蓋了原型的company屬性
Jobs.SayHello = function()
{
alert("Hi,"+this.name + " like " + this.company);
};
Jobs.SayHello();//自己覆蓋的屬性和方法,輸出"Hi,Jobs like Apple"
BillGates.SayHello();//Jobs的覆蓋沒(méi)有影響原型,BillGates還是照樣輸出
</script>
看下面一個(gè)原型鏈例子:
代碼如下:
<script type="text/javascript">
function Year(){
this.value = 21;
}
Year.prototype = {
method:function(){
}
};
function Hi(){
};
//設(shè)置Hi的prototype屬性為Year的實(shí)例對(duì)象
Hi.prototype = new Year();
Hi.prototype.year = 'Hello World';
Hi.prototype.constructor = Hi;
var test = new Hi();//創(chuàng)建一個(gè)Hi的新實(shí)例
//原型鏈
test [Hi的實(shí)例]
Hi.prototype [Year的實(shí)例]
{year:'Hello World'}
Year.prototype
{method:……};
object.prototype
{toString:...};
</script>
從上面例子中,test對(duì)象從Hi.prototype和Year.prototype中繼承下來(lái);因此他能訪(fǎng)問(wèn)Year的原型方法method,同時(shí)他能訪(fǎng)問(wèn)實(shí)例屬性value
__ptoto__屬性
__ptoto__屬性(IE瀏覽器不支持)是實(shí)例指向原型對(duì)象的一個(gè)指針,它的作用就是指向構(gòu)造函數(shù)的原型屬性constructor,通過(guò)這兩個(gè)屬性,就可以訪(fǎng)問(wèn)原型里的屬性和方法了。
Javascript中的對(duì)象實(shí)例本質(zhì)上是由一系列的屬性組成的,在這些屬性中,有一個(gè)內(nèi)部的不可見(jiàn)的特殊屬性——__proto__,該屬性的值指向該對(duì)象實(shí)例的原型,一個(gè)對(duì)象實(shí)例只擁有一個(gè)唯一的原型。
代碼如下:
<script type="text/javascript">
function Box(){ //大寫(xiě),代表構(gòu)造函數(shù)
Box.prototype.name = "trigkit4";//原型屬性
Box.prototype.age = "21";
Box.prototype.run = function()//原型方法
{
return this.name + this.age + 'studying';
}
}
var box1 = new Box();
var box2 = new Box();
alert(box1.constructor);//構(gòu)造屬性,可以獲取構(gòu)造函數(shù)本身,
//作用是被原型指針定位,然后得到構(gòu)造函數(shù)本身
</script>
__proto__屬性和prototype屬性的區(qū)別
prototype是function對(duì)象中專(zhuān)有的屬性。
__proto__是普通對(duì)象的隱式屬性,在new的時(shí)候,會(huì)指向prototype所指的對(duì)象;
__ptoto__實(shí)際上是某個(gè)實(shí)體對(duì)象的屬性,而prototype則是屬于構(gòu)造函數(shù)的屬性。__ptoto__只能在學(xué)習(xí)或調(diào)試的環(huán)境下使用。
原型模式的執(zhí)行流程
1.先查找構(gòu)造函數(shù)實(shí)例里的屬性或方法,如果有,就立即返回。
2.如果構(gòu)造函數(shù)的實(shí)例沒(méi)有,就去它的原型對(duì)象里找,如果有,就立即返回
原型對(duì)象的
代碼如下:
<script type="text/javascript">
function Box(){ //大寫(xiě),代表構(gòu)造函數(shù)
Box.prototype.name = "trigkit4";//原型屬性
Box.prototype.age = "21";
Box.prototype.run = function()//原型方法
{
return this.name + this.age + 'studying';
}
}
var box1 = new Box();
alert(box1.name);//trigkit4,原型里的值
box1.name = "Lee";
alert(box1.name);//Lee,就進(jìn)原則
var box2 = new Box();
alert(box2.name);//trigkit4,原型的值,沒(méi)有被box1修改
</script>
構(gòu)造函數(shù)的
代碼如下:
<script type="text/javascript">
function Box(){
this.name = "Bill";
}
Box.prototype.name = "trigkit4";//原型屬性
Box.prototype.age = "21";
Box.prototype.run = function()//原型方法
{
return this.name + this.age + 'studying';
}
var box1 = new Box();
alert(box1.name);//Bill,原型里的值
box1.name = "Lee";
alert(box1.name);//Lee,就進(jìn)原則
</script>
綜上,整理一下:
代碼如下:
<script type="text/javascript">
function Person(){};
Person.prototype.name = "trigkit4";
Person.prototype.say = function(){
alert("Hi");
}
var p1 = new Person();//prototype是p1和p2的原型對(duì)象
var p2 = new Person();//p2為實(shí)例化對(duì)象,其內(nèi)部有一個(gè)__proto__屬性,指向Person的prototype
console.log(p1.prototype);//undefined,這個(gè)屬性是一個(gè)對(duì)象,訪(fǎng)問(wèn)不到
console.log(Person.prototype);//Person
console.log(Person.prototype.constructor);//原型對(duì)象內(nèi)部也有一個(gè)指針(constructor屬性)指向構(gòu)造函數(shù)
console.log(p1.__proto__);//這個(gè)屬性是一個(gè)指針指向prototype原型對(duì)象
p1.say();//實(shí)例可以訪(fǎng)問(wèn)到在原型對(duì)象上定義的屬性和方法
</script>
工廠(chǎng)模式
代碼如下:
function createObject(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
return obj;
}
工廠(chǎng)模式解決了實(shí)例化對(duì)象大量重復(fù)的問(wèn)題,但還有一個(gè)問(wèn)題,那就是根本無(wú)法搞清楚他們到底是哪個(gè)對(duì)象的實(shí)例。
使用構(gòu)造函數(shù)的方法,既解決了重復(fù)實(shí)例化的問(wèn)題,又解決了對(duì)象識(shí)別的問(wèn)題。
使用構(gòu)造函數(shù)的方法和工廠(chǎng)模式的不同之處在于:
1.構(gòu)造函數(shù)方法沒(méi)有顯示的創(chuàng)建對(duì)象(new Object());
2.直接將屬性和方法賦值給this對(duì)象
3.沒(méi)有return 語(yǔ)句
當(dāng)使用了構(gòu)造函數(shù),并且new 構(gòu)造函數(shù)(),那么就在后臺(tái)執(zhí)行了new Object();
函數(shù)體內(nèi)的this代表了new Object()出來(lái)的對(duì)象
1.判斷屬性是在構(gòu)造函數(shù)的實(shí)例里,還是在原型里,可以使用`hasOwnProperty()`函數(shù)
2.字面量創(chuàng)建的方式使用constructor屬性不會(huì)指向?qū)嵗?,而?huì)指向Object,構(gòu)造函數(shù)創(chuàng)建的方式則相反
為什么指向Object?因?yàn)锽ox.prototype = {};這種寫(xiě)法其實(shí)就是創(chuàng)建了一個(gè)新對(duì)象。
而每創(chuàng)建一個(gè)函數(shù),就會(huì)同時(shí)創(chuàng)建它的prototype,這個(gè)對(duì)象也會(huì)自動(dòng)獲取constructor屬性
3.如果是實(shí)例方法,不同的實(shí)例化,他們的方法地址是不一樣的,是唯一的
4.如果是原型方法,那么他們的地址的共享的
更多信息請(qǐng)查看IT技術(shù)專(zhuān)欄