Javascript OOP ideas

Javascript OOP ideas

Sort out some online materials for Reference

1. Create an object
1.1 New

Create an object with new:

VaR user = new object (); User. Age = 12; // Add the property user. Name = 'ajun' for the object at the same time ';

1.2 {}

Create an object with {}, for example:

var user = {   ‘name’:’ajun,           ‘age’:12}

At the same time, two attributes are added for the user: name and age.

In the code above, you can also add a method for an object, such:

VaR user = {'name': 'ajun', 'age': 12 'say': function () {alert (this. Name); // This indicates the current object }}

2. How to define classes and constructor 2.1

In JavaScript, all variables and methods are objects and can be passed through parameters.

Follow these steps:

function User(name,age){this.name = name;this.age = age;this.say = function(){     alert(this.name+’ say hello!!’);                }}

In this case, you can understand that user can be treated as the name of a class, and user () is the constructor of the class. This is a bit similar to that of the class and constructor in Java, call the constructor when new. Some initialization operations can be placed in your constructor. Here we use this method to initialize the values of the name and age attributes. The code for creating a user object is as follows:

var user = new User(‘ajun’ ,24);user.say();//ajun say hello!!

Here we will explain the following:This:

When we are using a new object, we will actually call a call () called to pass the current object as a parameter and assign it to this. Therefore, this refers to the currently referenced object.

3. Prototype 3.1

In JavaScript, each method has a property named "prototype" and is used to reference a prototype object. See the following code:

function User(){this.name = ‘ajun’;this.age = 24;this.say = function(){alert(this.name+’ say hello!!’);              }}

This user will have the prototype attribute, so the user can be referenced in this way. prototype is enough. When you create a new user object, this object inherits from the user. all properties of prototype, and user. prototype is inherited from object. all properties of prototype, so you can call methods such as tostring () on your object. In fact, they are all objects. the prototype property is inherited by your object. Here, you can understand that the Java class has to inherit, And the subclass inherits the parent class.

With the concept of prototype, we can use prototype to add methods and attributes to users. In this way, each user object will share methods and attributes, rather than each object will have their copies.

function User(){this.name = ‘ajun’;this.age = 24;}User. prototype. say = function(){alert(this.name+’ say hello!!’);}var user = new User();user.say();var user2 = new User();user2.say();

In this way, when a user object is created and the method is called, it can be used by other methods.

3.2 prototype chain

Each JavaScript Object inherits a prototype chain, and all prototype ends with object. prototype. Note that the inheritance you have seen so far is the inheritance between active objects. It is different from the common concept of inheritance. The latter refers to the inheritance between classes when classes are declared. Therefore, JavaScript inheritance is more dynamic. It uses a simple algorithm to achieve this, as shown below: when you try to access the object's attributes/methods, JavaScript will check whether the attributes/methods are defined in the object. If not, check the prototype of the object. If not, check the prototype of the object's prototype.

Using JavaScript to dynamically parse attribute access and method calls produces some special effects:

@ Changes made to the prototype can be immediately displayed on the objects that inherit the prototype object, even after these objects are created.

@ If property/method x is defined in the object, the prototype of the object will hide the property/method with the same name. For example,

By defining the tostring method in user. prototype, you can rewrite the tostring method of object. prototype.

@ Change is passed only in one direction, that is, the derived object from the prototype to it, but not in the opposite direction.

Example:

function User(){this.name = ‘ajun’;this.age = 24;}User. prototype. toString = function(){alert(this.name+’ say hello!!’);}var user = new User();user. toString ();

In this case, the tostring of object. prototype will be overwritten. In this way, the tostring of object. prototype will not be called, and [object] will not be output, while ajun say hello !! Now

4. Static attributes and Methods

Sometimes, if you want to operate your attributes and methods directly through classes like in Java, these are static attributes in Java and are directly referenced by class names, this can also be done in Javascript. Please refer to the following code:

function User(){}User.age = 12;User.name = ‘ajun’;User.say = function(){return ‘ajun’;}alert(User.say());

Then you can use the method name to directly reference your method or attribute instead of the new object.

5. Private attributes

Normally, local variables in the function cannot be accessed from outside the function. After the function exits, the local variable will disappear forever for various actual reasons. However, if the local variable is captured by the closure of the internal function, it will survive. This is actually the key to simulating JavaScript private attributes, such:

Function user (name, age) {This. setname = function (newname) {name = newname; // name is equivalent to the name attribute of setname}; this. getname = function () {return name;} This. getage = function () {return age ;}; this. setage = function (newage) {age = newage ;};} var user = new user ('ajun', 24); alert (user. getname) // ajunuser. setname ('lisi', 12); var newname = user. getname (); alert (newname); // Lisi

This can also simulate attributes, because the name is out of its scope and cannot be accessed.

function User (name, age) {    var name;    this.getName = function() { return name; };this.setName = function(newName) { name =  newName; };}var user = new User ('ajun’,12);user. setName('qq');alert(p.getName());

Note: The Private Attribute you set cannot be accessed by other public methods in this method (it refers to the shared method through user. method defined by prototype), which is not similar to Java

You can only access private members by having these private members in their closures.

For example, the following code cannot work.

User.prototype.somePublicMethod= function() {    alert(this.getName());}

5. namespace

The namespace mentioned here is equivalent to using the Package concept in Java. This prevents method name conflicts. The Code is as follows:

// Namespace var ajun ={}; ajun. examples = {}; ajun. examples. user = function () {This. setname = function (newname) {name = newname;}; this. getname = function () {return name;} This. getage = function () {return age ;}; this. setage = function (newage) {age = newage ;};} var user = new ajun. examples. user (); User. setname ('ajun'); alert (user. getname ());

Supplement: in fact, JavaScript can also implement class inheritance. Prototype attributes will be used and will be added later ....