1. 程式人生 > >JS中的phototype是JS中比較難理解的一個部分

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(
"I can run");
}
//原型方法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 
=new baseClass();

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表達式

javathis這個概念初學者非常理解,請舉例說明

不返回 什麽 自己 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