How to understand JavaScript prototypes-JS Tutorial-php.cn

Prototype is the basis of inheritance in JavaScript. JavaScript inheritance is prototype-based inheritance. The prototype object of a function is in JavaScript. If we create a function A, then the browser will create an object B in the memory. .

How to understand JavaScript prototypes

1. What is a prototype

Prototype is the basis of inheritance in Javascript. Inheritance in JavaScript is prototype-based inheritance.

1.1 Prototype object of function

In JavaScript, we create a function A (means declaring a function), then browse The processor will create an object B in memory, and each function will have an attributeprototypepointing to this object by default (ie: the value of theprototype attribute is this object) . This object B is the prototype object of function A, referred to as the prototype of the function. By default, this prototype object B will have a propertyconstructorpointing to this function A (which means: the value of the constructor property is function A).

Look at the following code:

Copy after login

The following figure describes what happens after declaring a function:

1.2 Using the constructor Creating an object

When using a function as a constructor (theoretically any function can be used as a constructor) and using new to create an object, the object will have a default invisible attribute. to point to the prototype object of the constructor.We generally use [[prototype]] to represent this invisible attribute, but this attribute cannot be accessed directly.

Look at the code below:

Copy after login

Observe the diagram below:

Explanation:

As you can see from the above illustration, although the Person constructor is used to create the p1 object, after the object is created, the p1 object actually has nothing to do with the Person constructor. p1 The [[ prototype ]] property of the object points to the prototype object of the Person constructor.
If you use new Person() to create multiple objects, multiple objects will point to the prototype object of the Person constructor at the same time.
We can manually add properties and methods to this prototype object, then p1, p2, p3... these objects will share the properties and methods added in the prototype.
If we access an attribute name in p1, if it is found in the p1 object, it will be returned directly. If it is not found in the p1 object, search directly in the prototype object pointed to by the [[prototype]] attribute of the p1 object, and return if found. (If it is not found in the prototype, continue to look up the prototype-prototype chain of the prototype. More on this later).
If an attribute name is added through the p1 object, the attribute name in the prototype is blocked for the p1 object. In other words: there is no way to access the prototype attribute name in p1.
You can only read the value of the attribute name in the prototype through the p1 object, but you cannot modify the value of the attribute name in the prototype. p1.name = "李思"; It does not modify the value in the prototype, but adds an attribute name to the p1 object.

Look at the following code:

Copy after login

2. Several properties and methods related to the prototype

2.1 prototype attribute

prototype exists in the constructor (in fact, it exists in any function, but we don’t pay attention to prototype when it is not a constructor), it points to The prototype object of this constructor.

Refer to the previous diagram.

2.2 constructor attribute

The constructor attribute exists in the prototype object, and it points to the constructor function

Look at the following code:

Copy after login

We can specify a new object using the Person.prototype property as the prototype object of Person as needed.

But there is a problem at this time. The constructor property of the new object no longer points to the Person constructor.

Look at the following code:

Copy after login

2.3 __proto__ attribute (note: there are 2 underscores on the left and right)

Create with the constructor method After a new object is created, there will be an inaccessible attribute [[prototype]] in this object by default, which points to the prototype object of the constructor.

But in some browsers, access to this attribute [[prototype]] is also provided (chrome browser and Firefox browser. IE browser does not support it). Access method: p1.__proto__

But developers should try not to access in this way, because careless operation will change the inheritance prototype chain of this object.

Copy after login

2.4 hasOwnProperty() method

大家知道，我们用去访问一个对象的属性的时候，这个属性既有可能来自对象本身，也有可能来自这个对象的[[prototype]]属性指向的原型。

那么如何判断这个对象的来源呢？

hasOwnProperty方法，可以判断一个属性是否来自对象本身。

Copy after login

所以，通过hasOwnProperty这个方法可以判断一个对象是否在对象本身添加的，但是不能判断是否存在于原型中，因为有可能这个属性不存在。

也即是说，在原型中的属性和不存在的属性都会返回fasle。

如何判断一个属性是否存在于原型中呢？

2.5 in 操作符

in操作符用来判断一个属性是否存在于这个对象中。但是在查找这个属性时候，现在对象本身中找，如果对象找不到再去原型中找。换句话说，只要对象和原型中有一个地方存在这个属性，就返回true

Copy after login

回到前面的问题，如果判断一个属性是否存在于原型中：

如果一个属性存在，但是没有在对象本身中，则一定存在于原型中。

Copy after login

可以使用下面的方法解决：

Copy after login

但是上面的这种解决方法具有致命的缺陷：封装性太差。使用面向对象，目的之一就是封装代码，这个时候为了性能又要把代码抽出对象之外，这是反人类的设计。

3.3 使用组合模式解决上述两种缺陷

原型模式适合封装方法，构造函数模式适合封装属性，综合两种模式的优点就有了组合模式。

Copy after login

四、动态原型模式创建对象

前面讲到的组合模式，也并非完美无缺，有一点也是感觉不是很完美。把构造方法和原型分开写，总让人感觉不舒服，应该想办法把构造方法和原型封装在一起，所以就有了动态原型模式。

动态原型模式把所有的属性和方法都封装在构造方法中，而仅仅在需要的时候才去在构造方法中初始化原型，又保持了同时使用构造函数和原型的优点。

看下面的代码：

Copy after login

推荐教程：《JS教程》

The above is the detailed content of How to understand JavaScript prototypes. For more information, please follow other related articles on the PHP Chinese website!