As mentioned in my previous post, I think using prototypes is powerful enough to deserve a more detailed explanation. To start off, let me say we are talking about the prototype method here, not the JavaScript library.

正如我之前的文章中提到的 ，我認為使用原型足夠強大，值得進行更詳細的說明。 首先，讓我說我們在這里談論的是原型方法，而不是JavaScript庫。

Prototypes allow you to easily define methods to all instances of a particular object. The beauty is that the method is applied to the prototype, so it is only stored in the memory once, but every instance of the object has access to it. Let’s use the Pet object that we created in the previous post. In case you don’t remember it or didn’t read the article (please do) here is the object again:

原型使您可以輕松地為特定對象的所有實例定義方法。 優(yōu)點是該方法應用于原型，因此它僅在內存中存儲一??次，但是對象的每個實例都可以訪問它。 讓我們使用在上一篇文章中創(chuàng)建的Pet對象。 如果您不記得它或沒有閱讀該文章(請記住)，這里再次是該對象：

function Pet(name, species){this.name = name;this.species = species; } function view(){return this.name + " is a " + this.species + "!"; } Pet.prototype.view = view; var pet1 = new Pet('Gabriella', 'Dog'); alert(pet1.view()); //Outputs "Gabriella is a Dog!"

As you can see, by using simply using prototype when we attached the view method, we have ensured that all Pet objects have access to the view method. You can use the prototype method to create much more robust effects. For example, let’s say we want to have a Dog object. The Dog object should inherit each of the methods and properties utilized in the Pet object and we also want a special function that only our Dog objects have access to. Prototype makes this possible.

如您所見，通過在附加view方法時僅使用原型，我們確保了所有Pet對象都可以訪問該view方法。 您可以使用原型方法創(chuàng)建更強大的效果。 例如，假設我們要擁有一個Dog對象。 Dog對象應該繼承Pet對象中使用的每種方法和屬性，并且我們還需要一個特殊的功能，只有我們的Dog對象可以訪問。 原型使這成為可能。

function Pet(name, species){this.name = name;this.species = species; } function view(){return this.name + " is a " + this.species + "!"; } Pet.prototype.view = view; function Dog(name){Pet.call(this, name, "dog"); } Dog.prototype = new Pet(); Dog.prototype.bark = function(){alert("Woof!"); }

We set up the Dog object, and have it call the Pet function using the call() method. The call method allows us to call a specific target function within an object by passing in the object we want to run the function on (referenced by ‘this’ on line 10) followed by the arguments. Theoretically, we don’t need to do this. We could just create a ‘name’ and ‘species’ property inside of the Dog object instead of calling the Pet function. Our Dog object would still inherit from the Pet object because of line 12. However that would be a little redundant. Why recreate these properties when we already have access to identical properties inside of the Pet object?

我們設置了Dog對象，并使用call()方法讓它調用Pet函數(shù)。 調用方法允許我們通過傳入要在其上運行函數(shù)的對象(在第10行上由“ this”引用)后跟參數(shù)來調用對象中的特定目標函數(shù)。 從理論上講，我們不需要這樣做。 我們可以在Dog對象內部創(chuàng)建一個“ name”和“ species”屬性，而不用調用Pet函數(shù)。 由于第12行，我們的Dog對象仍將繼承自Pet對象。但這有點多余。 當我們已經可以訪問Pet對象內部的相同屬性時，為什么還要重新創(chuàng)建這些屬性？

Moving on, we then give Dog a custom method called bark that only Dog objects have access to. Keeping this in mind consider the following:

接下來，我們?yōu)镈og提供一個名為bark的自定義方法，只有Dog對象才能訪問它。 請記住以下幾點：

var pet1 = new Pet('Trudy', 'Bird'); var pet2 = new Dog('Gabriella'); alert(pet2.view()); // Outputs "Gabriella is a Dog!" pet2.bark(); // Outputs "Woof!" pet1.bark(); // Error

As you can see, the Dog object has inherited the view method from the Pet object, and it has a custom bark method that only Dog objects have access to. Since pet1 is just a Pet, not a Dog, it doesn’t have a bark method and when we try to call it we get an error.

如您所見，Dog對象繼承了Pet對象的view方法，并且具有僅Dog對象有權訪問的自定義樹皮方法。 由于pet1只是寵物，而不是狗，因此它沒有樹皮方法，當我們嘗試調用它時會出現(xiàn)錯誤。

It is important to understand that prototype follows a chain. When we called pet2.view(), it first checked the Dog object (since that is the type of object pet2 is) to see if the Dog object has a view method. In this case it doesn’t, so it moves up a step. Dog inherits from Pet, so it next checks to see if the Pet object has a view method. It does, so that is what runs. The bottom most layer of inheritance is actually from the Object.prototype itself. Every object inherits from that. So, in theory we could do this:

重要的是要了解原型遵循一條鏈。 當我們調用pet2.view()時，它首先檢查Dog對象(因為pet2是對象的類型)，以查看Dog對象是否具有view方法。 在這種情況下，它不是，所以它向上移動了一步。 Dog繼承自Pet，因此接下來檢查Pet對象是否具有view方法。 確實如此，這就是運行的結果。 繼承的最底層實際上是來自Object.prototype本身。 每個對象都從那里繼承。 因此，理論上我們可以這樣做：

Object.prototype.whoAmI = function(){alert("I am an object!"); } pet1.whoAmI(); //Outputs 'I am an object!' pet2.whoAmI(); //Outputs 'I am an object!'

Since all objects inherit from the Object.prototype, pet1 and pet2 both can run the whoAmI method. In short, prototype is an immensely powerful tool you can use in your coding. Once you understand how prototype inherits, and the chain of objects it inherits from, you can start to create some really advanced and powerful object combinations. Use the code examples used in this post to play around with and see the different ways you can use prototype to create more robust objects. With something like this, hands-on is definitely the best approach (at least I think so!).

由于所有對象都繼承自Object.prototype，因此pet1和pet2都可以運行whoAmI方法。 簡而言之，原型是可以在編碼中使用的功能非常強大的工具。 一旦了解了原型是如何繼承的，以及它所繼承的對象鏈，就可以開始創(chuàng)建一些真正高級且功能強大的對象組合。 使用本文中使用的代碼示例進行實驗，并了解使用原型創(chuàng)建更強大的對象的不同方法。 通過這種方式，動手操作絕對是最好的方法(至少我認為是這樣！)。

翻譯自: https://timkadlec.com/2008/01/using-prototypes-in-javascript/

總結

以上是生活随笔為你收集整理的在Javascript中使用原型的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。