JS interview frequently asked questions Prototype and prototype chain

Prototype and prototype chain are one of the high-frequency front-end interview questions. I believe many friends have encountered this problem. So do you understand it clearly and completely?

[Related recommendations:Front-end interview questions]

International practice, let us first ask the question:

• What is Prototype, prototype chain
• What are their characteristics
• What can they do
• How to determine their relationship

Maybe you already have the answer, Maybe you are starting to have some doubts, whether it isgeta new skill or a simple review, let us explore it together

If there are any flaws or errors in the article, please let us know. Please give me some advice if you see it, thank you in advance

Prototype

JavaScriptis based on prototype

Every function we create has aprototype(Prototype)Attribute, this attribute is a pointer to an object, and the purpose of this object is to contain properties and methods that can be shared by all instances of a specific type.

To put it simply, when we create a function, the system will automatically assign aprototypeattribute, which can be used to store attributes and methods that can be shared by all instances.

It will be clearer if you use a picture:

Each constructor has a
• prototypeattribute, which points to an object, that is, the prototype object
The prototype object has a
• constructorattribute by default, which points to Its constructor
Each object has a hidden attribute
• __proto__, pointing to its prototype object

function Person(){} var p = new Person(); p.__proto__ === Person.prototype // true Person.prototype.constructor === Person // true

Copy after login

function Person(){} Person.prototype.name = 'tt'; Person.prototype.age = 18; Person.prototype.sayHi = function() { alert('Hi'); } var person1 = new Person(); var person2 = new Person(); person1.name = 'oo'; person1.name // oo person1.age // 18 perosn1.sayHi() // Hi person2.age // 18 person2.sayHi() // Hi

Copy after login

Instances can share the properties and methods on the prototype
The properties of the instance itself will block the properties of the same name on the prototype. Properties that are not on the instance will be found on the prototype.

function Person() {} Person.prototype = { name: 'tt', age: 18, sayHi() { console.log('Hi'); } } var p = new Person()

function Person(){} var p = new Person(); Person.prototype = { name: 'tt', age: 18 } Person.prototype.constructor === Person // false p.name // undefined

Overwriting the prototype when an instance has already been created will cut off the connection between the existing instance and the new prototype
Overwriting the prototype object, This will cause the
• constructorproperty of the prototype object to point toObject, causing confusion in the prototype chain relationship. Therefore, we should specifyconstructor(when rewriting the prototype object. instanceofwill still return the correct value)

Person.prototype = { constructor: Person }

Copy after login

constructorproperty in this way will cause itsEnumerableattribute to be Set totrue(default isfalse)

prototype (prototype)and its characteristics, then the prototype What is a chain?

All objects in JavaScript are inherited from its prototype object. The prototype object itself is also an object, and it also has its own prototype object. In this way, a structure similar to a linked list is formed, which is the prototype chain

The end point of all prototype chains is the
• prototypeattribute of theObjectfunction
• Objec.prototypeThe prototype object pointed to also has a prototype, but its prototype isnull, whilenullhas no prototype

pinstance attribute. If this attribute does not exist in itself or in the prototype chain, Then the final value of the attribute isundefined. If it is a method, an error will be thrown.

ES6 providesClass( Class) This concept, as the template of the object, can define the class through theclass keyword

classmentioned:## The

of#ES6can be regarded as just a syntactic sugar. Most of its functions can be achieved byES5. The newclassThe writing method just makes the writing method of object prototype clearer and more like the syntax of object-oriented programming

class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } // 可以这么改写 function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')'; };

class里面定义的方法，其实都是定义在构造函数的原型上面实现实例共享,属性定义在构造函数中，所以ES6中的类完全可以看作构造函数的另一种写法

function Person(){} var p = new Person(); p instanceof Person // true p instanceof Object // true

function Person() {} Person.prototype = { name: 'tt' } var p = new Person(); p.age = 15; p.hasOwnProperty('age') // true p.hasOwnProperty('name') // false

function Person(){} Person.prototype.arr = [1, 2, 3, 4]; var person1 = new Person(); var person2 = new Person(); person1.arr.push(5) person2.arr // [1, 2, 3, 4, 5]