怎么在JavaScript中使用prototype方法給類添加方法

怎么在JavaScript中使用prototype方法給類添加方法？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

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

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

function MyClass(){};

你可能會想，這不就是個簡單的函數聲明？沒錯，這個函數就是一個類的定義的實現。如何使用這個類呢？看下面的代碼：

var cls1 = new MyClass();

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

2.給類增加屬性和方法

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

從上面的代碼可以看出，在函數內使用this就能給函數本身增加屬性值。而在上面的代碼中就給myClass函數增加了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();

我們已經成功的給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

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

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

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

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

雖然新創建的對象可以使用它的構造函數所指向的prototype對象的屬性和方法，但不能像構造函數那樣直接調用prototype對象（對象沒有prototype屬性）。

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

具體看下面的代碼：

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(){
    //
  }
};

JavaScript有什么特點

1、js屬于一種解釋性腳本語言；2、在絕大多數瀏覽器的支持下，js可以在多種平臺下運行，擁有著跨平臺特性；3、js屬于一種弱類型腳本語言，對使用的數據類型未做出嚴格的要求，能夠進行類型轉換，簡單又容易上手；4、js語言安全性高，只能通過瀏覽器實現信息瀏覽或動態交互，從而有效地防止數據的丟失；5、基于對象的腳本語言，js不僅可以創建對象，也能使用現有的對象。

關于怎么在JavaScript中使用prototype方法給類添加方法問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。