首頁 > web前端 > js教程 > 主體

javascript prototype原型詳解(基礎課程)

亚连
發布: 2018-05-19 13:49:25
原創
1561 人瀏覽過

prototype原型是javascript中特別重要的概念,屬於必須要掌握,如果沒有良好的掌握的話,進一步用好或者學好js基本是不可能的實現的事情,並且此概念稍有難度,可能對於初次接觸的朋友來說有點困難,以下就透過程式碼實例簡單介紹一下prototype原型的用法

javascript的prototype原型簡單介紹:
prototype原型是javascript中特別重要的概念,屬於必須要掌握,如果沒有良好的掌握的話,進一步用好或學好js基本是不可能的實現的事情,並且此概念稍有難度,可能對於初次接觸的朋友來說有點困難,下面就通過代碼實例簡單介紹一下prototype原型的用法。

一.基本概念:

每一個函數都有一個prototype屬性。
此屬性是一個指針,能夠指向一個對象,而此對象將會被由構造函數創建的對象實例所共享,也就是會繼承此對象。
總結:prototype所指向的物件是被建構函式所建立的物件實例所共同共享的。
所建立的物件實例有一個內部屬性[[Prototype]],它是一個指針,指向建構函式原型(prototype)指向的物件。
先看一段程式碼:

<script>
function antzone(name,age){
 this.webname=name;
 this.age=age;
}
antzone.prototype.getName=function(){
 return this.webname;
}
var oantzone=new antzone("PHP中文网",10);
console.log(oantzone.getName());
</script>
登入後複製

二.程式碼實例:
實例一:

##

function antzone(name,age){
 this.webname=name;
 this.age=age;
}
var obj={
 address:"江苏省徐州"
}
var oantzone=new antzone("PHP中文网",10);
antzone.prototype=obj;
console.log(oantzone.address);
登入後複製

看以上程式碼,很多朋友可能以為輸出值是"江蘇省徐州",但是實際輸出內容是undefined,這是因為在使用建構函式建立物件oantzone的時候,oantzone物件內部屬性[[ Prototype]]將會指向antzone()建構函式的原型prototype所指向的對象,而後來antzone.prototype=obj是重置建構函式的原型,而oantzone的內建屬性[[Prototype]]指向依然是原來的對象,自然oantzone.address是undefined。


實例二:

<script>
function antzone(name,age){
 this.webname=name;
 this.age=age;
}
var obj={
 address:"江苏省徐州"
}
antzone.prototype=obj;
var oantzone=new antzone("PHP中文网",10);
console.log(oantzone.webname+oantzone.address);
</script>
登入後複製

#此程式碼和上一段程式碼的唯一不同,就是第八行和第九行進行了一下交換,這樣就可以輸出"江蘇省徐州",這個就不難理解了,因為物件實例是在重置原型以後創建的。


實例三:

function antzone(name,age){
 this.webname=name;
 this.age=age;
}
var obj={
 address:"江苏省徐州"
}
antzone.prototype.add=obj;
var oantzone=new antzone("PHP中文网",10);
console.log(oantzone.add.address);
登入後複製

#以上程式碼只是修改物件原型,而不是重置物件原型。

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

有關在JS 取得JSON資料簡單呼叫(程式碼附上,簡單粗暴)

詳細介紹JS中使用EL表達式

#入門級video.js使用筆記(程式碼附上)

##

以上是javascript prototype原型詳解(基礎課程)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!