Home > Web Front-end > JS Tutorial > Javascript Object.extend_js object-oriented

Javascript Object.extend_js object-oriented

WBOY
Release: 2016-05-16 18:27:14
Original
1128 people have browsed it

Since it is a class, there are abstract classes, concrete classes, and inheritance of classes. At the same time, members of a class can have instance members and static members. Let’s take a look at how the prototype does this.
First look at the following code in the prototype:

Copy the code The code is as follows:

var Abstract = new Object();
Object.extend = function(destination, source) {
for (property in source) {
destination[property] = source[property];
}
return destination;
}
Object.prototype.extend = function(object) {
return Object.extend.apply(this, [this, object]);
}

The first one declares an object Abstract. Object is actually a function. It does not have any members, so it is an empty class, so Abstract does not have any members. Let’s not talk about this for now. We will see later that this is the basis of abstract classes. First explain the following syntax:
function.member=function(){}
In this case, function has generally been defined. The function of this statement is to add a static member member to function. The content of member is after the equal sign. For example, the second code above, Object.extend=..., adds a static method extend to the Object class. ok, we know how to define static members for a class, then you must want to know how to define instance members. It is very simple. Add prototype between the class name and the member name:
function.prototype.member=function() {}
prototype can not only be used like this, but also:
Copy code The code is as follows:

function.prototype={
member1:function(){……},
member2:"abc",
member3:function(){……}
}

This implements the definition of instance members. But what does prototype mean? As I said in the first article, it is directly enclosed in {} to represent an object. For example, Prototype and Class are global objects defined in this way. Looking at the following usage, prototype is followed by a {} structure. Is it also an object? Yes, that’s right, prototype is actually an object! In JavaScript, we can add members to an object arbitrarily, using the following syntax:
object.member=function(){...};
As long as it is defined in this way, an object can immediately have members. This method! JavaScript is so magical!
Okay, we now know that prototype is an object, and function is a function or class, then we can think of prototype as a static member retained internally by any class (function). Its function is to store all member pointers of this class, but these members are only prototypes and have not been initialized, which is also in line with the original meaning of prototype. You can extend members at any time through the prototype object. When new a class, the prototype members are initialized and then assigned to the instantiated object.
The third piece of code above, Object.prototype.extend=..., adds an instance method extend to Object. In the instance method, you can reference this pointer, which points to the object itself instantiated by this class. Of course, this object has a member extend.
Before continuing, let’s understand these two statements:
for(var p in object){}
method.apply(object,arguments);
The first sentence: List all of a variable Members, if it is a function, then it is all static members; if it is an object, it is all instance members, and the type of p is a string. Indicates the name of the member. Not only can you use variabel.member to reference a member, you can also use variabel["member"]. In turn, the same goes for assignment. This brings great convenience to enumerating the members of a variable.
The second statement: Apply the method method to the object for execution, and the parameter is the arguments array. Note: method is not a member of object. However, we can think that the execution of this statement means: object.method(arguments). This is a very important method that will be used frequently later, and you will gradually become familiar with it.
Let’s continue with extend. It is a very important method. You can see that it is both a static member and an instance member of the class Object. So what does it do? Let's take a look: it receives two parameters, destination and source. If destination and source are both classes, then its function is to copy all static members of class source to class destination. If destination and source are both objects, then All instance members are copied over. At this time, if there is already a member with the same name in destination, this member will be overwritten. That is to say, let destination have all members of source, and the function returns this destination. Let’s look at extend as an instance member of Object:
Object.prototype.extend = function(object) {
return Object.extend.apply(this, [this, object]);
}
Start I'm a little dizzy, but don't worry, you can still understand it. The apply syntax has just been explained. Its caller is a method, and Object.extend is a static method. It is applied to this, which is Object. Example, assuming it is obj, the following square brackets are an array, including two members, this and object. This array is actually the arguments parameter of the Object static member extend. Then this statement is equivalent to executing
obj.extend(this, object);
this is not explained, it represents itself. What is object? Parameters, well, they are parameters passed by the instance method extend, don't be confused. What about extend? obj does not define extend instance members, but through apply, it can use the static member extend of Object. Let’s take a look at the function body of extend:
Object.extend = function(destination, source) {
for (property in source) {
destination[property] = source[property];
}
return destination;
}
Because obj is an object, object is also an object, that is, destination and source are both is an object, so the function of the function is to make obj have all the members of object. And will return obj. It sounds a bit awkward, but the logic is very simple: let obj "inherit" from object! Very good, we have seen inheritance, but you will definitely ask, object inheritance. This is the first time I heard that when we talk about inheritance, we are talking about class inheritance. That's right, we haven't seen real class inheritance yet, but we are close at hand: doesn't a class just have a prototype, and prototype is an object!
Okay, thinking about this, the inheritance syntax of a class seems to be very simple:
b.prototype.extend(a.prototype);
Let b inherit a.
But the truth is not that simple: prototype stores the method prototype pointer, and the extend method is not initialized and cannot be used! To use extend, you must instantiate an object. Let’s take a look at how prototype is done:
b.prototype=(new a()).extend(b.prototype);
A very clever method! It fully explains that the function is actually a variable. First instantiate the a object, then call extend based on it, overwrite all members of b.prototype to the a object, and then assign the a object to b.prototype.Completed the work of b inheriting from a. In actual use, the general usage is:
b.prototype=(new a()).extend({});
Because b inherits from a, b is usually undefined before class, so class members can actually be defined in the following {}. Of course, you can also define it first and then inherit it, but it is different from the traditional concept.
OK, I’m very tired writing this today, and I guess the people reading it are too, haha. Now we basically understand the prototype class development framework and can look at some advanced applications. See you next time:)
Copy code Code As follows:


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template