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 is get a 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

JavaScript is 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 a prototype attribute, 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:

##Illustration:

Each constructor has a
• prototype attribute, which points to an object, that is, the prototype object
The prototype object has a
• constructor attribute 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

So, what are the prototype objects? Features

Prototype Features

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

It is not difficult to see from this code:

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.

Since the prototype is also an object, can we override this object? The answer is yes

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

var p = new Person()

It’s just that we need to pay attention to the following issues when rewriting the prototype chain:

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

Person.prototype.constructor === Person // false

p.name // undefined

A picture is worth a thousand words

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
• constructor property of the prototype object to point to Object, causing confusion in the prototype chain relationship. Therefore, we should specify constructor( when rewriting the prototype object. instanceof will still return the correct value)

Person.prototype = {
    constructor: Person
}

Note: Resetting the

constructor property in this way will cause its Enumerable attribute to be Set to true (default is false)

Now that we know what

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

Prototype 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

Similarly, we use a picture to describe

The end point of all prototype chains is the
• prototype attribute of the Object function
• Objec.prototype The prototype object pointed to also has a prototype, but its prototype is null, while null has no prototype

Understanding the concept of prototype chain, we can know more clearly the search rules for attributes, such as the previous

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

class class

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

Why is

class mentioned: ## The

class

of #ES6 can be regarded as just a syntactic sugar. Most of its functions can be achieved by ES5. The new class The writing method just makes the writing method of object prototype clearer and more like the syntax of object-oriented programming<pre class='brush:php;toolbar:false;'>class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return &amp;#39;(&amp;#39; + this.x + &amp;#39;, &amp;#39; + this.y + &amp;#39;)&amp;#39;; } } // 可以这么改写 function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return &amp;#39;(&amp;#39; + this.x + &amp;#39;, &amp;#39; + this.y + &amp;#39;)&amp;#39;; };</pre><p><code>class 里面定义的方法，其实都是定义在构造函数的原型上面实现实例共享,属性定义在构造函数中，所以 ES6 中的类完全可以看作构造函数的另一种写法

除去 class 类中的一些行为可能与 ES5 存在一些不同，本质上都是通过原型、原型链去定义方法、实现共享。所以，还是文章开始那句话  JavaScript是基于原型的

更多 class 问题，参考这里

关系判断

instanceof

最常用的确定原型指向关系的关键字，检测的是原型,但是只能用来判断两个对象是否属于实例关系， 而不能判断一个对象实例具体属于哪种类型

function Person(){}
var p = new Person();

p instanceof Person // true
p instanceof Object // true

hasOwnProperty

通过使用 hasOwnProperty 可以确定访问的属性是来自于实例还是原型对象

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]

引用类型，变量保存的就是一个内存中的一个指针。所以，当原型上面的属性是一个引用类型的值时，我们通过其中某一个实例对原型属性的更改，结果会反映在所有实例上面，这也是原型 共享 属性造成的最大问题

另一个问题就是我们在创建子类型（比如上面的 p）时，没有办法向超类型（ Person ）的构造函数中传递参数

The above is the detailed content of JS interview frequently asked questions Prototype and prototype chain. For more information, please follow other related articles on the PHP Chinese website!