Prototype attribute interpretation of JS and its common methods

each constructor has a property called prototype (prototype, which is no longer translated, uses its original text),

This property is useful: Declare a common variable or function for a particular class.

1.prototype inherits obj and does not need to explicitly declare a prototype property

you do not need to explicitly declare a prototype property, because in each constructor all have its existence, its inheritance object.prototype.

You can look at the following example:

function F () {}console.log (f.prototype); Console.log (Object.prototype);

Watch Express:

Console:

2. If you add an attribute to prototype, the created object contains the property

As you can see above, prototype is an object, so you have the ability to add properties to it. The property you add to prototype will be the common property of the object created using this constructor.

For example, I have a data type below fish, and I want all the fish to have these properties: livesin= "Water" and price=20; To achieve this, I can add those attributes to the prototype of the constructor fish.

function Fish (name, color) {this.name=name;this.color=color;} fish.prototype.livesin= "Water"; Fish.prototype.price=20;var fish1=new Fish ("Mackarel", "Gray"), Var fish2=new fish ("Goldfish", "orange"); var fish3=new Fish ("Salmon", "white"), for (var i=1; i<=3; i++) {var fish=eval ("Fish" +i);   I just made pointers to this fish console.log (fish.name+ "," +fish.color+ "," +fish.livesin+ "," +fish.price ");

Watch Express:

Console:

You see all the fish have attributes livesin and price, we don't even specifically declare these attributes for each different fish. This is because when an object is created, the constructor assigns its property prototype to the internal property __proto__ of the new object. This __proto__ is used by this object to find its properties.

3. Adding a function to an object using prototype

You can also add a common function to all objects by prototype. Here's a good thing: you don't need to create and initialize this function every time you construct an object. to explain this, let's take a look back at example DT9 and rewrite it with prototype :

function Employee (name, salary) {    this.name=name;                   This.salary=salary;} Employee.prototype.getsalary=function () {return this.salary;} Employee.prototype.addsalary=function (addition) {    this.salary=this.salary+addition;} VAR boss1=new employee ("Joan", 200000), VAR boss2=new employee ("Kim", 100000), VAR boss3=new employee ("Sam", 150000); Console.log (Boss1.getsalary ());   Output 200000console.log (Boss2.getsalary ());   Output 100000console.log (Boss3.getsalary ());   Output 150000boss3.addsalary (2); Console.log (' Addition 2: ', Boss3.getsalary ());//Output 150002

Watch Express:

Console:

here is a diagram illustrating how prototype works. Each instance of this object (Boss1, Boss2, BOSS3) has an intrinsic property called __proto__, which points to the property prototype of its constructor (Employee). When you execute getsalary or addsalary, the object will find and execute this code in its __proto__. Note this: There is no copy of the code (in contrast to the Example DT8 chart).

Reference: http://blog.sina.com.cn/s/blog_7045cb9e0100rtoh.html

Prototype attribute interpretation of JS and its common methods