JavaScript object-oriented programming understanding!

      Those who have knowledge of programming know that object-oriented is a very difficult concept to understand. The following Xiaoqian will share with you the understanding of the object, this article mainly shares the encapsulation of the object. Of course, object-oriented in real life is also quite difficult, hahaha~

      One, the original mode of the instance object

      First of all, we know that every object is an object. For example, "dog" as an object has two attributes: "type" and "color".


      Then, we need to create two instantiated objects


      This is also the most basic object encapsulation, that is, putting the two attributes of "type" and "color" in one object. But here comes the problem. There are two problems with this way of writing: one is that if you want to generate a lot of instantiated objects, you need to repeat it many times, which is very troublesome; the other is that they are very similar to the prototype Dog structure, but in fact they are not directly established. contact.

      Second, the original model upgrade

      Duplicate code, we can write a function to solve


      Then call the function to generate an instantiated object


      This method can solve the complex problem of generating multiple instantiated object codes, but there is no association between dog1 and dog2, that is, it still does not reflect that they are actually instances of the prototype object Dog.

      Three, the constructor

      In order to solve the problem that the instantiated object needs to be generated from the prototype object, js provides the concept of a constructor. Of course, the constructor is essentially an ordinary function, but the function uses this inside. In order to distinguish it from ordinary functions, we generally capitalize the first letter of the constructor. The specific code is as follows:


      With this constructor, we can generate instantiated objects, the specific code is as follows:


      Here we can see the keyword new, which means that Dog is actually an object, and dog1 and dog2 are instantiated objects of Dog; in order to verify this, js provides a property constructor, which is used to point to their construction function


      Of course, js also has another operator instanceof, which can verify the relationship between the prototype object and the instantiated object.


      The constructor seems to be perfect here, but there is a big drawback here, that is, memory waste. For example, we now add a constant property and method to the Dog object as follows:



console.log( ==; // false






console.log( ==; // true


      1. isPrototypeOf() , 此方法用于验证prototype对象和实例化对象之间的关联

console.log(Dog.prototype.isPrototypeOf(dog1)); // true
console.log(Dog.prototype.isPrototypeOf(dog2)); // true

      2. HasOwnProperty() , 每个实例化对象都有此方法,顾名思义,这个方法是用于验证属性是自有的还是继承自prototype对象的 ; 这里很显然type是自有属性,而age是继承自prototype对象。

console.log(dog1.hasOwnProperty('type')) // true
console.log(dog1.hasOwnProperty('age')) // false

This article is from Qianfeng Education , please indicate the source for reprinting.

Guess you like