What is a prototype

  1. allReference typesThere is a__proto__ (implicit prototype)Property, the value of which is a normal object
  2. allfunctionThere is aPrototype (explicit)Property, the value of which is a normal object
  3. Of all reference types__proto__All point to his constructorprototype

example

Function Father(name) {this.name = name} let Son = new Father('小 head ') console.log(Son.__proto__ === Father. Prototype) // true console.dir('Son': Son) console.dir('Father': Father)Copy the code

echo

Son: Father {name: 'Father ', __proto__ : Object} Father: Father () {name:' Father ', __proto__ : Object} Father: Father () {name: 'Father ', prototype:{... } __proto__ : ƒ (...). }Copy the code

What is a prototype chain

When access to the attribute of an object, will now find the object attribute, if not found, to his __proto__ search, was he the constructor of the prototype to find, if not found, to his constructor’s prototype. __proto lookup. This layer by layer lookup results in a chain structure called a prototype chain

  1. If null is not found, undefined is returned
  2. Object.prototype.proto = null
  3. All methods obtained and executed from prototypes or higher, where this, when executed, refers to the object on which the event is currently triggered

The role of archetypes

Sharing method

In actual combat

Implement the Person and Student objects as follows

  1. Student inheritance Person
  2. Person contains an instance variable name and a method printName
  3. Student contains an instance variable score, which contains an instance method printScore
  4. A method is shared between all Person and Student objects
function Person(name) { this.name = name this.printNama = function () { console.log('Person printNama '); } } Person.prototype.commen = function () { console.log('commenMethods') } function Student(name, score) { Person.call(this, name) this.score = score this.printScore = function () { console.log('Student printScore'); }} Student. Prototype = new Person() let Person = new Person() let Student = new Person() 20) console.log(Student.commen === Person.commen) console.log('student', student) console.log('person', person)Copy the code

Complete answer prototype, prototype chain

  • First prototype of the function is used to sharing method, such as array, we usually use objects, these apis, and determine the data type Object. The prototype. ToString. The call () method, instanceof methods, the use of plug-ins, in vue to mount it on the prototype of the vue, It’s all done using prototypes. When we use constructors to create new objects. Each constructor has a prototype, which is an object that contains all the constructor’s shared methods. When we create this object using the constructor, it contains a pointer to __proto__, which points to the constructor’s Prototype property,

When we access a property of this object, if it does not exist, we go back to his prototype object to find, and the prototype object has its own prototype, so layer by layer nesting, the formation of a chain structure, called the prototype chain

Writing summary

  1. The article uses new, so the principle and realization process of new must be mastered. Is the prototype also used in new and the prototype chain
  2. How much do you know about the brothers apply and bind? Can you write it by hand?
  3. The last one implements inheritance, do you know of any other inheritance methods?
  4. Know anything about ES6? Is it possible to implement an inheritance using es6 classes?
  5. What other applications can prototypes have, like? The method of array foreach, map, filter, some. Every… Why do arrays work, and can I write some methods of arrays by hand?
  6. How does Instanceof work?

Later we explore ~~~

1. The principle and implementation process of new

  1. The call, the apply, bind Write a call, the apply and bind

3, 4 several ways of inheritance

5. Handwritten array API

6. instanceof