JS中的phototype是JS中比較難理解的一個部分
本文基於下面幾個知識點:
1 原型法設計模式
在.Net中可以使用clone()來實現原型法
原型法的主要思想是,現在有1個類A,我想要建立一個類B,這個類是以A為原型的,並且能進行擴充套件。我們稱B的原型為A。
2 javascript的方法可以分為三類:
a 類方法
b 物件方法
c 原型方法
例子:
function People(name){
this.name=name;
//物件方法this.Introduce=function(){
alert("My name is "+this.name);
}
}
//類方法People.Run=function(){
alert(
}
//原型方法People.prototype.IntroduceChinese=function(){
alert("我的名字是"+this.name);
}
//測試var p1=new People("Windking");
p1.Introduce();
People.Run();
p1.IntroduceChinese();
3 obj1.func.call(obj)方法
意思是將obj看成obj1,呼叫func方法
好了,下面一個一個問題解決:
prototype是什麼含義?
javascript中的每個物件都有prototype屬性,Javascript中物件的prototype屬性的解釋是:返回物件型別原型的引用。
A.prototype = new B();
理解prototype不應把它和繼承混淆。A的prototype為B的一個例項,可以理解A將B中的方法和屬性全部克隆了一遍。A能使用B的方 法和屬性。這裡強調的是克隆而不是繼承。可以出現這種情況:A的prototype是B的例項,同時B的prototype也是A的例項。
先看一個實驗的例子:
function baseClass()
{
this.showMsg =function()
{
alert("baseClass::showMsg");
}
}
function extendClass()
{
}
extendClass.prototype
var instance =new extendClass();
instance.showMsg(); // 顯示baseClass::showMsg
我們首先定義了baseClass類,然後我們要定義extentClass,但是我們打算以baseClass的一個例項為原型,來克隆的extendClass也同時包含showMsg這個物件方法。
extendClass.prototype = new baseClass()就可以閱讀為:extendClass是以baseClass的一個例項為原型克隆建立的。
那麼就會有一個問題,如果extendClass中本身包含有一個與baseClass的方法同名的方法會怎麼樣?
下面是擴充套件實驗2:
function baseClass(){
this.showMsg =function()
{
alert("baseClass::showMsg");
}
}
function extendClass()
{
this.showMsg =function ()
{
alert("extendClass::showMsg");
}
}
extendClass.prototype =new baseClass();
var instance =new extendClass();
instance.showMsg();//顯示extendClass::showMsg
實驗證明:函式執行時會先去本體的函式中去找,如果找到則執行,找不到則去prototype中尋找函式。或者可以理解為prototype不會克隆同名函式。
那麼又會有一個新的問題:
如果我想使用extendClass的一個例項instance呼叫baseClass的物件方法showMsg怎麼辦?
答案是可以使用call:
extendClass.prototype =new baseClass();var instance =new extendClass();
var baseinstance =new baseClass();
baseinstance.showMsg.call(instance);//顯示baseClass::showMsg
這裡的baseinstance.showMsg.call(instance);閱讀為“將instance當做baseinstance來呼叫,呼叫它的物件方法showMsg”
好了,這裡可能有人會問,為什麼不用baseClass.showMsg.call(instance);
這就是物件方法和類方法的區別,我們想呼叫的是baseClass的物件方法
最後,下面這個程式碼如果理解清晰,那麼這篇文章說的就已經理解了:
<script type="text/javascript">function baseClass(){
this.showMsg =function()
{
alert("baseClass::showMsg");
}
this.baseShowMsg =function()
{
alert("baseClass::baseShowMsg");
}
}
baseClass.showMsg =function()
{
alert("baseClass::showMsg static");
}
function extendClass()
{
this.showMsg =function ()
{
alert("extendClass::showMsg");
}
}
extendClass.showMsg =function()
{
alert("extendClass::showMsg static")
}
extendClass.prototype =new baseClass();
var instance =new extendClass();
instance.showMsg(); //顯示extendClass::showMsginstance.baseShowMsg(); //顯示baseClass::baseShowMsginstance.showMsg(); //顯示extendClass::showMsg
baseClass.showMsg.call(instance);//顯示baseClass::showMsg staticvar baseinstance =new baseClass();
baseinstance.showMsg.call(instance);//顯示baseClass::showMsg</script>
作者:軒脈刃(yjf512)
出處:(http://www.cnblogs.com/yjf512/)
版權宣告:本文的版權歸作者與部落格園共有。歡迎轉載閱讀,轉載時須註明本文的詳細連結。
[參考文章]
相關推薦
JS中的phototype是JS中比較難理解的一個部分
本文基於下面幾個知識點: 1 原型法設計模式 在.Net中可以使用clone()來實現原型法 原型法的主要思想是,現在有1個類A,我想要建立一個類B,這個類是以A為原型的,並且能進行擴充套件。我們稱B的原型為A。 2 javascript的方法可以分為三類: a 類方法 b 物件方法 c
在論壇中出現的比較難的sql問題:31(row_number函式+子查詢 月環比計算)
最近,在論壇中,遇到了不少比較難的sql問題,雖然自己都能解決,但發現過幾天后,就記不起來了,也忘記解決的方法了。 所以,覺得有必要記錄下來,這樣以後再次碰到這類問題,也能從中獲取解答的思路。
在論壇中出現的比較難的sql問題:39(動態行轉列 動態日期列問題)
最近,在論壇中,遇到了不少比較難的sql問題,雖然自己都能解決,但發現過幾天后,就記不起來了,也忘記解決的方法了。 所以,覺得有必要記錄下來,這樣以後再次碰到這類問題,也能從中獲取解答的思路。 求一SQL語句。 create table #tab ( col1
在論壇中出現的比較難的sql問題:10(刪除多表中的同一個外來鍵)
最近,在論壇中,遇到了不少比較難的sql問題,雖然自己都能解決,但發現過幾天后,就記不起來了,也忘記解決的方法了。 所以,覺得有必要記錄下來,這樣以後再次碰到這類問題,也能從中獲取解答的思路。 1、求助!SQLServer如何刪除多表(10表以上)中的同一個外來
關於 ++x 和 x++ 比較難的一個例子
public class testMain { static int x; static int y; public static void main(String[] args) { x = 0; y = 0; System.out.printl
如何在一個js文件中引入另外的js文件
ont logs clas lan pst brush 例如 b- spa 例如想要在a.js中引用b.js、c.js和d.js document.write("<script language=‘javascript‘ src=‘b.js‘></s
JS編程中,有時需要在一個方法返回兩個個或兩個以上的數據
簡單的 cli getname body 一個 rip itl s函數 info 轉自腳本之家: 1 使用數組的方式,如下: <html> <head> <title>JS函數返回多個值</title> </hea
如何在js或者jquery中操作EL表達式的一個List集合
就是 layer http style use class urn details 表達式 ------------吾亦無他,唯手熟爾,謙卑若愚,好學若饑------------- 先說明此篇博客看明白了可以幹嘛: 就是在js或者jquery中操作一個EL表達式
java中this這個概念初學者非常難理解,請舉例說明
不返回 什麽 自己 var 自動 new 視頻 article int 4.this關鍵字(this key word) (視頻下載) (全部書籍) 繼上一小節,(3.一個對象可能有多個參考)this是當中的一個參考!指向他自己。 本章源碼 class MyTest
js查找字符串中出現次數最多的一個
最大的 ctype utf console 次數 har lang 最大 body <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&
遊戲中音樂、音效和語音玩家比較看重哪一個?
在一款遊戲中,音樂、音效、語音堪稱遊戲必不可少的三寶,那麼玩家到底看重哪一個呢?每個人都有自己的理解方式,在每個人心中都有自己認為最重要的那一部分。有人認為是遊戲音樂、音效,也會有人認為是語音,因為對於不同的玩家,側重點是不一樣的,每個人的關注點也不一樣,不同的玩家看重的東西不同。
js 根據陣列中物件的某一個屬性值進行排序
var arr = [ {name:'zopp',age:0}, {name:'gpp',age:18}, {name:'yjj',age:8} ]; compare = (property) => { return function(a,b){
傳說中Python最難理解的點|看這完篇就夠了
閱讀本文大概需要5分鐘 菜鳥學Python的入門課程已經寫了60多篇,講了很多好玩有趣的知識點,但是整個入門篇還有一個最難的東西沒有講,這個知識點好多書裡面對這塊要麼不講,要麼就是講的太深奧,這個
Python中一些比較難安裝的Package
1 pip install textract 安裝這個模組,可能會提示缺失“swig.exe”的問題。swig是一個將c/c++程式碼和高階語言繫結的工具。 swigwin-3.0.12.zip,解壓
對js中回撥函式的理解
一、什麼是回撥函式 一直接觸回撥函式這個名詞,但是不知道具體是幹什麼的,今天在百度上看到了一句話讓對回撥函式產生了一點興趣,那就是回撥函式的英文解釋: A callback is a function that is passed as an argument to an
Eclipse 中svn 分支,主幹 合併與同步(比較好理解的)
Eclipse 中svn的合併與同步: 1、 從主幹拉取到分支: 然後一直下一步,到完成就OK了。 2、 從分支程式碼合併到主幹: 2.1、先將本地需要提交更新的程式碼提交更新到svn分支去 2.2、將本地路徑切換到需要合併程式碼的主幹去(就是切換工作空間,切換到主幹工作
js原型鏈中prototype,__proto__的理解
js原型鏈中prototype,__proto__的理解(18年12.25) 今天開始認真重新過一遍js最基礎的東西。話不多說,開始乾貨。 1,每一個建構函式都有一個屬性prototype,它是一個指標,指向原型物件。 2,每一個例項物件都有一個 __oproto__的屬性,同樣,它
原生JS、jQuery和VUE中的Ajax比較
Ajax:不重新整理瀏覽器的情況下載入資料 1.原生JS中的Ajax function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari
一個簡單的字元陣列中字元的比較
1.String字串轉化為字元陣列:toCharArray 2.字元的比較:等於== 不等於!= 3.執行了if型別語句,flag就等於false,程式才會停止。 public class Main
js中時間的比較
在js中經常會遇到一些時間的比較: var beginTime = "2017-05-21 00:00:00"; var endTime = "2017-06-21 0