當前位置:
首頁 >
前端技术
> javascript
>内容正文
javascript
我所知的javascript之prototype
生活随笔
收集整理的這篇文章主要介紹了
我所知的javascript之prototype
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一:prototype大概概念和用途“prototype”字面翻譯是“原型”,是javascript實現繼承的主要手段。粗略來說就是:prototype是javascript中的函數(function)的一個保留屬性,并且它的值是一個對象(我們可以稱這個對象為"prototype對象"),通過以此函數作為構造函數構造出來的對象都自動的擁有構造函數的prototype對象的成員屬性和方法。其中的要點是:1.prototype是函數(function)的一個必備屬性(書面一點的說法是"保留屬性")(只要是function,就一定有一個prototype屬性)2.prototype的值是一個對象3.可以任意修改函數的prototype屬性的值。4.一個對象會自動擁有這個對象的構造函數的prototype的成員屬性和方法例子代碼://定義一個函數(構造函數),并定義一些屬性和方法用來給另外一個構造函數構造出來的對象繼承
var?function1=function(){
????this.name="function1";
????this.saySomething=function(){alert("This's?a?method?of?"+this.name);}//定義一個方法
}
//定義另外一個構造函數
var?function2=function(){
? ??
}
function2.prototype=new?function1();//將構造函數function2的prototype屬性設置為一個由function1構造出來的對象,以便使由function2構造出來的對象(并且原本是沒有任何屬性和方法的對象)擁有function1的屬性和方法
var?obj1=new?function1();
obj1.saySomething();//obj1本來什么成員也沒有,多得prototype機制,是它坐享其成地擁有了function1對象的屬性和方法。當然,上述例子離真正實際上使用的“繼承”還相差甚遠,但也體現出繼承的意義:一個對象擁有了另一個對象的屬性和方法。(如兒子擁有了老爸的血型和脾氣,人類繼承了動物的本能如進食和打斗等等)
var?function1=function(){
????this.name="function1";
????this.saySomething=function(){alert("This's?a?method?of?"+this.name);}//定義一個方法
}
//定義另外一個構造函數
var?function2=function(){
? ??
}
function2.prototype=new?function1();//將構造函數function2的prototype屬性設置為一個由function1構造出來的對象,以便使由function2構造出來的對象(并且原本是沒有任何屬性和方法的對象)擁有function1的屬性和方法
var?obj1=new?function1();
obj1.saySomething();//obj1本來什么成員也沒有,多得prototype機制,是它坐享其成地擁有了function1對象的屬性和方法。當然,上述例子離真正實際上使用的“繼承”還相差甚遠,但也體現出繼承的意義:一個對象擁有了另一個對象的屬性和方法。(如兒子擁有了老爸的血型和脾氣,人類繼承了動物的本能如進食和打斗等等)
?
二:prototype的背后發生了什么?以上部分大概闡述了prototype的概念和作用,但單憑這些還不夠對prototype加深認識?,F在來看看prototype背后是怎樣工作的:先來看看用new形式創建對象的過程:var obj=new func();//以func()作為構造函數創建一個對象obj這個過程是這樣的:javascript引擎首先遇到了關鍵字new后,馬上開辟了一塊內存,創建了一個空對象(并且將this指向這個對象),接著執行構造函數func()對這個空對象進行構造(構造函數里面有什么屬性和方法都一一給這個空白對象裝配上去,這也就是為什么構造函數叫“構造函數”的原因)其實,new和執行構造函數之間還有一件事引擎沒有顯式地告訴我們,而是偷偷地做了,這就是給這個空對象賦予prototype對象。這里不得不提到一個跟prototype一樣同樣是系統保留而且同樣重要的東西:__proto____proto__是一個對象自動擁有的內置屬性(請注意:prototype是函數的內置屬性,__proto__是對象的內置屬性,但它們最終都指向同一個對象,就是那個用來被繼承的對象),用chrome和FF都可以訪問到一個對象的__proto__屬性,IE就不可以。正是一個對象的__proto__指向著這個對象的構造函數的prototype對象,才使這個對象認識了它的構造函數的prototype對象,并擁有了這個prototype對象的屬性和方法。所以var obj=new func()這個過程更具體是這樣的:1.javascript解析引擎遇到new后,開辟一片內存并創建了一個空對象,并且將“this”指向這個空對象2.javascript解析引擎將這個空對象的__proto__指向后面緊跟著的構造函數默認的prototype對象(一指向到prototype對象后,解析引擎就知道了“噢,這個對象要擁有這個prototype對象的屬性和方法了”)3.javascript解析引擎執行構造函數體內的代碼,也就正式開始對這個空對象進行構造(或者說裝配)的過程了(this.name="xxx",this.sayHello=function(){...}等等)4.對象被構造裝配好,并賦值到等號左邊的變量。三:后記我在嘗試比較js中使用call與prototype實現繼承的優缺點的過程中曾遇到過一個問題,并在csdn論壇上求助過,有興趣的可以點擊看一下http://topic.csdn.net/u/20111119/12/c40f4674-6142-4c4a-a532-9580f2baed8d.html,這是這個問題使我加速了對prototype的了解。在此多謝一下為我解答的liangws。正如本文題目所說的,這些都是“我所知的javascript”,由于本人水平有限,本文描述肯定有不正確的地方,所以僅供參考,如發現有錯誤的地方歡迎拍磚。轉載于:https://www.cnblogs.com/lwhkdash/archive/2011/11/23/2260051.html
創作挑戰賽新人創作獎勵來咯,堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的我所知的javascript之prototype的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: GitHub上下载资源
- 下一篇: 部署也是工程的一部分,也要编程(自动化)