Home > Web Front-end > JS Tutorial > Detailed explanation of usage examples of object.extend static method in Javascript

Detailed explanation of usage examples of object.extend static method in Javascript

伊谢尔伦
Release: 2017-07-27 17:33:28
Original
2836 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.

First look at the following code in the prototype:

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]); 
}
Copy after login

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(){}
Copy after login

In this case, the function has generally been defined. The function of this statement is to add a static member member to the function. The content of member is etc. behind the number. 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 member name:

function.prototype.member=function(){}
Copy after login

prototype is not only It can be used like this, or:

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

This implements the definition of instance members. But what does prototype mean? In the first article, I said that 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 way! 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 code above, Object.prototype.extend=..., is to add an instance method extend to Object. In the instance method, you can reference this pointer, pointing to the object itself instantiated by this class. Of course, this object has a member extend.
Before continuing, first understand the two statements:

for(var p in object){} 
method.apply(object,arguments);
Copy after login

The first sentence: List all members of a variable, if it is a function, then all static members; if it is an object, then That is, all instance members, 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 method to 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 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]); 
}
Copy after login

I'm a little dizzy at first, but don't worry, you can still understand it. The apply syntax has just been explained, and its caller is a method. Object.extend is a static method, which is applied to this, which is an instance of Object, 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 the extend instance member, 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; 
}
Copy after login

因为obj是对象,object也是对象,即destination和source都是对象,于是函数的作用就是使obj具有object的所有成员。并且会返回obj。听起来有点拗口,但逻辑很简单:让obj“继承于”object!很好,我们看到了继承,但你肯定会问,对象的继承,第一次听说啊,我们讲继承都是讲的类的继承。没错,现在的确还没有看到真正的类继承,但已经近在眼前了:类不就是有个prototype吗,而prototype是对象!
好,想到这一点,类的继承语法看似很简单了:

b.prototype.extend(a.prototype);
Copy after login

让b继承a。
可是事实却没那么简单:prototype是存放方法原型指针,extend方法没有初始化,不能使用!要使用extend,就必须实例化一个对象。还是看看prototype是怎么做的吧:

b.prototype=(new a()).extend(b.prototype);
Copy after login

很高明的办法!充分说明了函数其实也是一个变量的道理。先实例化a对象,然后在它基础上调用extend,将所有的成员b.prototype的成员覆盖到a的对象,然后把这个a对象再赋值给b.prototype。完成了b从a继承的工作。在实际使用中,一般的用法都是:

b.prototype=(new a()).extend({});
Copy after login

因为让一个b继承自a,通常b之前都是一个未定义的类,所以后面的{}中其实就可以定义类成员。当然,你也可以先定义,再继承,只是和传统概念有所区别了。 

The above is the detailed content of Detailed explanation of usage examples of object.extend static method in Javascript. For more information, please follow other related articles on the PHP Chinese website!

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