Detailed interpretation of Js OOP programming to create objects

Below I will bring you some comprehensive understanding of Js OOP programming to create objects. Let me share it with you now and give it as a reference for everyone.

Object-oriented is a method of understanding and abstracting the real world. It is the product of the development of computer programming technology to a certain stage.

The meaning of the object

The object can be a car, a person, an animal, a text, a form or anything that exists, etc.

Objects have:

Attributes -------Some specific properties of the object.
Method-------What the object can do.
Events ------- can respond to things that happen to objects.

We can understand object-oriented by creating a human object

People:

Two hands, two feet, one head, and Can run.

Hands, feet, and head are human attributes, and running is human method.

First, let’s create an object in the simplest way

var person = {
      head: "one",
      hand: "two",
      foot: "two",
      run : function(){
        console.log("running");
      }
    }

This method is not practical at all, because it creates a separate object, and this object is different from any common data The structure has no connection.

Then, we create an object using the constructor function

var Person = function(){//注意,首字母大写
      this.head = "one",
      this.hand = "two",
      this.foot = "two",
      this.run = function(){
        alert("running");
      }
    }
    var Joan = new Person();
    document.write(Joan.run())// "running"

This is the object created using the constructor function, and then we add a line of code to see

var Niki = new Person();
    alert(Joan==Niki) //false;

Yes, two different object instances are now created.

Every function in JavaScript has a prototype attribute. If a function is used as a constructor, this attribute will automatically be called through new to create the prototype of the object

console.log(Joan)

You can see that there is a __proto__:Person, where __proto__ is the prototype chain of Joan. It points to the prototype of Person.

When JS creates an object (whether it is a normal object or a function object), There is a built-in property called __proto__ that points to the prototype object prototype of the function object that created it.

Some understandings of the prototype chain are written in great detail in the book JavaScript Advanced Programming. If you are interested, you can check it out. There are also pdf documents available online. However, it is recommended to buy this book and support the original version.

Then any changes to the prototype attribute of prototype can be applied to every instance object constructed with new Person(), regardless of whether it is created before or after the change. Add a new function for Person.prototype. Specifically As follows:

var Person = function(){//注意,首字母大写
      this.head = "one",
      this.hand = "two",
      this.foot = "two"
    }
    Person.prototype.run = function(){
      alert("running");
    }
    var Joan = new Person();
    Joan.run()// "running"
    alert(Joan.__proto__===Person.prototype)//'true'

You can see that the method created in the prototype can be called, and Joan's prototype chain points to the prototype of Person.

Look again:

var Niki = new Person();//"runing"
     Person.prototype.run = function(){
       alert("running running")
     }
     Joan.run()//"running running"
     Niki.run()//"running running"

Look, modify the prototype method of Person. All methods in the object instances created by new Person() have been modified, because the same is shared by all instances. A prototype method run. This is an application of prototypes.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed explanation and implementation code of javascript judgment of palindrome number (picture and text tutorial)

Details for you Interpretation of JavaScript character set encoding and decoding (graphic tutorial)

Native js implements holiday time countdown function (code attached)

The above is the detailed content of Detailed interpretation of Js OOP programming to create objects. For more information, please follow other related articles on the PHP Chinese website!