欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS利用prototype給類添加方法操作詳解

 更新時間:2019年06月21日 11:39:10   作者:學習筆記666  
這篇文章主要介紹了JS利用prototype給類添加方法操作,結合實例形式分析了javascript使用prototype實現(xiàn)給類添加方法的相關操作技巧,需要的朋友可以參考下

本文實例講述了JS利用prototype給類添加方法操作。分享給大家供大家參考,具體如下:

1.如何定義一個簡單的類?

以下是一個沒有任何屬性和方法的類的定義:

function MyClass(){};

你可能會想,這不就是個簡單的函數(shù)聲明?沒錯,這個函數(shù)就是一個類的定義的實現(xiàn)。如何使用這個類呢?看下面的代碼:

var cls1 = new MyClass();

這樣,利用new就可以生成MyClass的一個實例了。所以在js中可以說函數(shù)就是類,類就是函數(shù)。

2.給類增加屬性和方法

function MyClass(name,age){
  this.name = name;
  this.age = age;
}
var cls1 = new MyClass("lily",18);
alert(cls1.name);

從上面的代碼可以看出,在函數(shù)內使用this就能給函數(shù)本身增加屬性值。而在上面的代碼中就給myClass函數(shù)增加了name和age屬性。

同樣,還可以利用this給這個類增加一個 toString 方法,代碼如下:

function MyClass(name,age){
  this.name = name;
  this.age = age;
  this.toString() = function(){
    alert(this.name +":"+ this.age);
  };
}
var cls1 = new MyClass("liming",10);
cls1.toString();

我們已經(jīng)成功的給MyClass增加了toString方法。另外也可以用以下代碼來添加方法:

function MyClass(name,age){
  this.name = name;
  this.age = age;
}
var cls1 = new MyClass("liming",10);
cls1.toString() = function(){
            alert(this.name +":"+ this.age);
          };
cls1.toString(); // [liming:10]
var cls2 = new MyClass("zhang",10);
cls2.toString(); //報錯

雖然這樣也能給這個類添加一個方法,但這種方式只是給cls1這個實例增加了方法,并未給MyClass本身增加方法。

cls2并不存在toString方法。

3.引出prototype

從上面我們已經(jīng)知道要給MyClss類的本身增加方法,需要講方法定義在MyClass這個函數(shù)內部,這樣的話,每聲明一個新的實例,就會將MyClass本身復制一遍,這顯然不是最優(yōu)的做法。

既然不能將一個類(函數(shù))所包含的方法都定義在函數(shù)的內部,那么,如何來給一個類添加方法呢?這就需要用到函數(shù)的prototype屬性了。

每一個函數(shù)都會包含一個prototype屬性,這個屬性指向了一個prototype對象,我們可以指定函數(shù)對應的prototype對象。如果不指定,則函數(shù)的prototype屬性將指向一個默認的prototype對象,并且次默認的prototype對象的constructor屬性又會指向該函數(shù)。

當用構造函數(shù)創(chuàng)建一個新的對象時,新的對象會獲取構造函數(shù)的prototype屬性所指向的prototype對象的所有屬性和方法,這樣一來,構造函數(shù)對應的prototype對象所做的任何操作都會反映到它所生成的對象上,所有的這些對象將共享與構造函數(shù)對應的prototype對象的屬性和方法。

雖然新創(chuàng)建的對象可以使用它的構造函數(shù)所指向的prototype對象的屬性和方法,但不能像構造函數(shù)那樣直接調用prototype對象(對象沒有prototype屬性)。

簡而言之,就是如果我們使用函數(shù)的prototype對象來給函數(shù)添加方法,那么在創(chuàng)建一個新的對象的時候,并不會復制這個函數(shù)的所有方法,而是指向了這函數(shù)的所有方法。

具體看下面的代碼:

function MyClass(name,age){
  this.name = name;
  this.age = age;
}
MyClass.prototype.toString = function(){
  //
}
var cls1 = new MyClass("liming",10);
cls1.toString(); //
var cls2 = new MyClass("zhang",10);
cls2.toString();

如果要加入多個方法,也可以使用下面的方式:

function MyClass(name,age){
  this.name = name;
  this.age = age;
}
MyClass.prototype = {
  toString:function(){
    //
  },
  sayHellow:function(){
    //
  }
};

這就是js中給類添加方法的實現(xiàn),它是利用prototype來實現(xiàn)封裝的。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

更多關于JavaScript相關內容感興趣的讀者可查看本站專題:《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結

希望本文所述對大家JavaScript程序設計有所幫助。

相關文章

最新評論