Today’s video may be a little long, but I hope you watch it carefully, and you’ll get a lot out of it

1. __proto__ origin

We all know that javascript is an object oriented language, one of the characteristics of object oriented language is that everything is object, some of our common numbers, arrays, strings and so on are objects. However, although they are all objects, they are divided into ordinary objects and function objects because of their different forms of expression.

Ordinary objects

  var obj={
    name:"xiaoming"
  };
Copy the code

After the output

We can see that proto has a lot of methods in it, all of which can be used directly

The function object

 function Test() {}
 console.log(Test);
Copy the code

After the output

You can see both the Prototype attribute and the __proto__ attribute

From the above example, we can see the definition and output of ordinary objects and function objects

Both ordinary objects and function objects have an implicit attribute __proto__, and that attribute is what we call a stereotype (attribute), and that’s where __proto__ comes from

Each object has a __proto__ attribute that points to the prototype attribute of the corresponding constructor

How do I understand this better? Let’s start by creating an array that outputs its __proto__ property

Let arr1 = Array of (1, 2, 3); console.log(arr1);Copy the code

Next we print the array constructor’s prototype

console.log(Array.prototype);
Copy the code

The conclusion is that they are equal

2. The origin of the prototype

For function objects, they also have a prototype attribute, which is the same as the “proto” attribute of a normal object created with it as a constructor.

That is, the __proto__ of the instance object points to its prototype constructor. (This is why the instance object can use the method above.)

Function Person(name,age){this.name=name; this.age=age; } var xiaoming=new Person(" xiaoming ",10); console.log(xiaoming.__proto__==Person.prototype);Copy the code
Class Person {constructor(name,age) {this.name = name; this.age = age; } toString(){return this.name+' this '+this.age+' age! }} const xiaoming=new Person(' xiaoming ',10); console.log(xiaoming.toString()); console.log(typeof Person); // Each object has a _proto_ attribute that points to the prototype attribute of the corresponding constructor, Prototype console.log(xiaoming.__proto__=== person.prototype); // A lot of people ask, why is prototype so important? We will talk about the prototype chain and tell you where the original methods come fromCopy the code

Here’s what Prototype does

Javascript implements instance objects through constructors, where the properties and methods of instance objects are defined

<script>
		function Person(name,age){
			this.name=name;
			this.age=age;
		}
		var xiaoming=new Person("xiaoming",10);
		console.log(xiaoming.name);
		console.log(xiaoming.age);
	</script>
Copy the code

The disadvantage is that the same constructor cannot share methods and attributes, resulting in a waste of system resources. For example, if you create two Instances of Person, they both have a common method, such as sleeping, but each instance generates a new sleeping method. So there’s Prototype.

The JavaScript inheritance mechanism is designed with the idea that all properties and methods of the prototype object can be shared by the instance object. Prototype = prototype = prototype = prototype = prototype

We define private properties and methods in constructors and public properties in Prototype

3.__proto__ and prototype

All constructors/functions’ __proto__ points to function. prototype, which is an Empty Function.

Number.__proto__ === Function.prototype  // true
Boolean.__proto__ === Function.prototype // true
String.__proto__ === Function.prototype  // true
Object.__proto__ === Function.prototype  // true
Function.__proto__ === Function.prototype // true 
Array.__proto__ === Function.prototype   // true
RegExp.__proto__ === Function.prototype  // true
Error.__proto__ === Function.prototype   // true
Date.__proto__ === Function.prototype    // true
Copy the code

All of this includes, of course, custom functions

var Dog = function(){};
console.log(Dog.__proto__==Function.prototype);
Copy the code

We know that prototype is where we put public properties and methods, which means that our custom Dog Function prototype inherits Function Function prototypes, such as the bind, call, apply, and Length methods

Typeof XXX. Prototype is also the only typeof XXX whose prototype is “Function”. The other constructor’s prototype is an object as follows

console.log(typeof Function.prototype) // function
console.log(typeof Object.prototype)   // object
console.log(typeof Number.prototype)   // object
console.log(typeof Boolean.prototype)  // object
console.log(typeof String.prototype)   // object
console.log(typeof Array.prototype)    // object
console.log(typeof RegExp.prototype)   // object
console.log(typeof Error.prototype)    // object
console.log(typeof Date.prototype)     // object
console.log(typeof Object.prototype)   // object
Copy the code

Function. Prototype is an empty Function

console.log(Function.prototype.__proto__ === Object.prototype) // true
Copy the code

So constructors and functions inherit methods and properties from Object.prototype

Finally, who is __proto__ of Object.prototype?

Object.prototype.__proto__ === null  // true
Copy the code

That is, the top of __proto__ is null.

All objects’ __proto__ refers to their prototype constructor (see the new source code)

var obj = {name: 'jack'} var arr = [1, 3] var reg = /hello/g var date = new date var err = new Error('exception') console.log(obj.__proto__ === Object.prototype) // true console.log(arr.__proto__ === Array.prototype) // true console.log(reg.__proto__ === RegExp.prototype) // true console.log(date.__proto__ === Date.prototype) // true console.log(err.__proto__ === Error.prototype) // trueCopy the code

Take a look at custom constructors

function Person(name) {
    this.name = name
}

var p = new Person('jack')
console.log(p.__proto__ === Person.prototype) // true
Copy the code

Each object has a constructor property, and its constructor can be retrieved

function Person(name) {
    this.name = name
}

var p = new Person('jack')
console.log(p.__proto__ === p.constructor.prototype) // true
Copy the code

One thing to note

Function Person(name) {this.name = name} function() {} } var p = new Person('jack') console.log(p.__proto__ === Person.prototype) // true console.log(p.__proto__  === p.constructor.prototype) // falseCopy the code

This is the case because person. prototype is assigned an object’s immediate value {getName: Function (){return (){return (){return (){return (){return (){return (){return (){return (){return (){return (){return (){return ()

Var p = {} console.log(object.prototype) // An empty Object {} console.log(p.constructor === Object) // Prototype === Object. Prototype) // trueCopy the code

4. The prototype chain

The object’s __proto__ refers to its constructor’s prototype, and the constructor’s prototype refers to function. prototype. Prototype refers to Object. Prototype and inherits the methods above Object. In this way, Object to prototype and then prototype to prototype

We know from the chapter that all constructor/Function proTos point to function. prototype that the top level of the prototype chain is NULL

So how does an object get its properties and methods? The JavaScript engine looks for the properties of the object itself, if it can’t find them, it looks for the prototype, if it can’t find them, it looks for the prototype. If no Object. Prototype is found up to the top level, undefined is returned. Now, if an object and its archetype both define a primary property of the same name, we can look at things on the object itself first, and that’s called overriding.

function Person(name,age){ this.name=name; this.age=age; } Person.prototype.color='white'; Var xiaoming=new Person(" xiaoming ",10); xiaoming.color='yello'; Var xiaoli=new Person(" xiaoli ",12); console.log(xiaoming.color); console.log(xiaoli.color);Copy the code

We can also conclude from the above that if the stereotype points to an array, then we can have methods on the array

var MyArray = function () {};

MyArray.prototype = new Array();
MyArray.prototype.constructor = MyArray;

var mine = new MyArray();
mine.push(1, 2, 3);
mine.length // 3
mine instanceof Array // true

Copy the code

5. Conclusion:

1. Why does every object have toString, length, name, etc.?

A: Each object has a __proto__ attribute that points to the prototype attribute of the corresponding constructor, so the object can use methods in its prototype constructor. Answer the prototype chain

2. What is a prototype chain?

A: The Object’s __proto__ refers to its constructor’s prototype, which in turn points to function. prototype, which in turn points to Object.prototype, inheriting methods from Object. So object to prototype to prototype, this chain structure we call the prototype chain

3. What’s the difference between __proto__ and prototype?

A: All objects have a __proto__ attribute, and all function objects have a Prototype attribute

4. What was the original intention or background of the prototype?

A: 1) javascript uses prototype programming, so all objects can share the methods and properties of the prototype. This saves memory. If you do not use prototype, you will create a memory address for every object you create (there are not two separate objects, but two variables that reference the same object. References do not take up space for objects, they are just memory Pointers

Reference: wangdoc.com/javascript/…

Blog.csdn.net/hkh_1012/ar…