The prototype object in JS

During the day, I wrote an article [method of creating objects in JS], and after writing it, I felt that I still wanted more (the actual situation is that I feel that the content of the prototype is not clear), so I open this article to continue to talk about the prototype object in JavaScript

Use vue.prototype. XXX = XXX to add a method or property to the prototype of a vue object. This way, we can use this method or property anywhere in the vue instance. Is to mount the asynchronous request library (which I prefer using Axios) onto the Vue prototype:

// SRC /mian. Js // we can use axios to wrap an asynchronous request module // do some interception or processing in the module, and then import the module. Import axios from 'axios' import Vue from 'Vue' import App from './App' // Add a post module for all Vue instances Prototype post = axios new vue ({el: '#app', components: {app}, template: '< app />'})Copy the code

A prototype is a prototype. Let’s look at the explanation given by MDN

When it comes to inheritance, JavaScript has only one structure: objects. Each object has a private property (called [[Prototype]]) that points to its Prototype object (Prototype). The Prototype object has a Prototype of its own, cascading up until an object’s prototype is NULL. Null, by definition, has no prototype and serves as the last link in the prototype chain.

It seems to be a bit of a mouthful, it doesn’t matter, I summed it up in my own words

Prototype: a property/method of the object (a.protoType). Prototype: a property/method of the object (a.protoType).

2. Every object has a prototype, except null

What does this prototype look like? Prototype: by adding a post method to vue. Prototype, all instances of the object to which the prototype belongs can share the properties and methods in prototype. This method can then be used in all vUE instances as a simple practice.

Let’s go back to the prototype pattern in the method of creating objects in JS

Function Student(){} // Declare a null function student.prototype. name = 'xiaohong' student.prototype. age = 17 student.prototype. gender = 'f' student.prototype. study = fucntion() {console.log(' I'm learning... ')}Copy the code

We define an empty function first. Note: We didn’t add a prototype property/method to the function, but Student automatically has prototype. We then added name,age,gender and study methods to prototype. Then we instantiate the two Student objects with new

var studentA = new Student() console.log(studentA.name) // xiaohong console.log(studentA.age) // 17 Console. log(studentA. Gender) // f studentA. Study () // I study... var studentB = new Student() console.log(studentB.age) // xiaohong console.log(studentB.name) // 17 Console. log(studentb.gender) // f studentb.study () // I'm learning...Copy the code

As you can see from the above example, the properties and methods in the prototype object are shared between all instances of the object. What if we want the instance object to have its own properties/methods? For example, IF I want the name of studentB to be ‘lili’, simply add the property/method directly to the instance object:

StudentA. Name = 'lili' studentA. Study = function () {console.log(' I am doing something ')} console.log(studentA Console. log(studentb.name) // xiaohong studentA. Study () // I'm being goofy studentb. study() // I'm learning...Copy the code

StudentB does not change when studentA’s properties/methods are changed. All prototype properties/methods are shared. In fact, properties/methods in Prototype are shared. The problem is that we’re assigning values to instances, so properties/methods that belong to instances, not to Prototype, can’t be written to instance objects. StudentA and studentB access properties/methods differently from studentA and studb. StudentA and studb access properties/methods differently from studentA and studb. If there is a property/method on the instance, it will return the property/method. If there is no property/method on the instance, it will return the property/method. If there is no property/method on the instance, it will return the property/method. All the way to the top of the prototype chain. If none is found, undefined is returned.

How do we determine whether an attribute belongs to the instance itself or to prototype? HasOwnProperty () : hasOwnProperty () : hasOwnProperty () : hasOwnProperty () : hasOwnProperty () : hasOwnProperty () : hasOwnProperty () : hasOwnProperty () : hasOwnProperty () : hasOwnProperty ()

studentA.hasOwnProperty('name')  // true
studentB.hasOwnProperty('name')  // false
Copy the code

What if you want to find both the instance object and the prototype object? We can use the in operator

'name' in studentA    // true
'name' in studentB    // true
Copy the code

With these two methods, we can combine them to determine whether a property belongs to an instance or stereotype.

The instance object refers to the prototype of the constructor, but it is not directly related to the constructor. An indirect relationship between an instance and a constructor is the instance

That’s it for prototyping. If you need a more in-depth look at javascript, read the definitive javascript guide. It’s more detailed on the prototype than I have here.

Here’s a list of some of the most authoritative javascript tutorials on prototyping

  1. Get a prototype of an instance object (ES5 only supports this)

    Object.getPrototypeOf(studentA) // Student.prototype

    Some browsers (Chrome, Safari, Firefox) also support an attribute __proto__

    studentA.__proto__ == Student.prototype

  2. Determines whether a constructor is a stereotype of the specified instance object

    Student.prototype.isPrototypeOf(studentA) // true