JS object-oriented, prototype, call(), apply()

I used prototype.js that day, so I opened it and took a look. After reading a few lines, I was confused. The reason was that I was not very familiar with the object-oriented nature of js, so I googled it on Baidu, and finally found some success. I wrote Let’s commemorate this ^_^.

1. Cause
I used prototype.js that day, so I opened it and took a look. After reading a few lines, I was confused. The reason was that I was not very familiar with the object-oriented nature of js, so I googled it on Baidu. , I finally gained a little bit, so I write this to commemorate it ^_^.

prototype.js code snippet

var Class = { 
create: function() { 
return function() { 
this.initialize.apply(this , arguments); 
} 
} 
} 
// Class使用方法如下 
var A = Class.create(); 
A. prototype={ 
initialize:function(v){ 
this .value=v; 
} 
showValue:function(){ 
alert(this.value); 
} 
} 
var a = new A(‘helloWord!'); 
a. showValue();//弹出对话框helloWord！

l What is initialize?
l What does the apply method do?
lWhat about the arguments variable?
l Why is the initialize method executed after new A?

Find the answer:

2. Js object-oriented
What is initialize?
It’s just a variable, representing a Method, the purpose is the constructor of the class.
Its specific functions rely on the object-oriented support of js. So what does the object-oriented js look like? What are the similarities and differences with java?
Look at the code:

var ClassName = function(v){ 
this.value=v; 
this.getValue=function(){ 
return this.value; 
} 
this.setValue=function(v){ 
this.value=v; 
} 
}

So what is the difference between functions and classes in JS?

In fact, it is the same. ClassName is a function. When it appears after new, it is used as a constructor to construct the object.
Such as

var objectName1 = new ClassName(“a”);//得到一个对象

where objectName1 is the object obtained after executing the ClassName constructor, and this in the ClassName function refers to the object constructed after new, so objectName1 will have one attribute and two methods. . They can be called like this:

objectName1.setValue(''hello''); 
alert(objectName1.getValue());//对话框hello 
alert(objectName1.value) ;//对话框hello

So

var objectName2 = ClassName(“b”);//得到一个对象

What does objectName2 get? Obviously it is the return value of the method. Here ClassName is just used as an ordinary function (although the first letter is capitalized). But there is no return value in the previously written ClassName, so objectName2 will be undifinded. So who is "b" assigned to? An object is not generated here, but this method is simply executed, so this "b" is assigned to the object window that calls this method. The evidence is as follows:

var objectName2 = ClassName(“b”);//得到一个对象 
alert(window.value)；//对话框b

So all functions in JS are the same , but the purpose may be different (used to construct an object or execute a procedure).

It’s time to return to the topic. What does initialize do?

var Class = { 
create: function() { 
return function() { 
this.initialize.apply(this , arguments); 
} 
} 
} 
var A = Class.create();

This code constructs a function and copies it to A. This function is

function() { 
this.initialize.apply(this , arguments); 
}

and the following method is used as the constructor. When using this constructor to construct an object, the initialize variable of the constructed object will execute the apply() method. The purpose of apply() will be discussed later, and we will continue to talk about initialize. In this way, initialize will be contacted when initializing the object (how to contact depends on apply).
So what does

A.prototype={ 
initialize:function(v){ 
this .value=v; 
} 
showValue:function(){ 
alert(this.value); 
} 
}

mean?

Prototype means "prototype". A is a function(), then A. prototype is a variable in the function, which is actually an object. What methods this object has, then what methods the object generated by function has, so

var a = new A(‘helloWord!'); 
a. showValue();//弹出对话框helloWord！

So the a object will also have an initialize method. Not only that, every object constructed with A will have one. initialize method, and as mentioned before, the constructor will be called during construction, and the constructor will ask initialize to call the apply method, so when new A ('helloWord!'), initialize goes back to call the apply method. This is to call an initialization method.

3. call() and apply()

Let’s start studying apply(). I found some information on the Internet and combined it with my own research to understand call() and apply() functions. The functions are basically the same. The function of function().call(object,{},{}...) or function().apply (object,[...]) is that the object object calls the funciton() here. The difference is The call parameters are passed to funciton starting from the second one, and can be listed in sequence separated by ",". Apply only has two parameters. The second one is an array that stores all the parameters passed to the function.

this.initialize.apply(this , arguments); What does it mean?

The first this here refers to the object generated after calling the constructor with new, which is the previous a, so of course the second this should also refer to the same object. Then this sentence is that this (that is, a) calls the initialize method, and the parameter is the arguments object (array object of parameters), so when the constructor is executed, the object a will execute the initialize method to initialize, so that it is consistent with the word " initialize" means the right thing.

So how are the parameters for executing the initialize method passed in?

4. Arguments object

This code can explain everything:

function test(){ 
alert(typeof arguments); 
for(var i=0; i<arguments.length; i++){ 
alert(arguments[i]); 
} 
} 
test("1","2","3"); 
test("a","b");

After execution, alert(typeof arguments); will display object, description arguments are objects. Then 1, 2, and 3 will be played in sequence. Description arguments is the actual parameter group of the calling function.

var Class = { 
create: function() { 
return function() { 
this.initialize.apply(this , arguments); 
} 
} 
}

arguments 就是create返回的构造函数的实参数组，那么在 var a = new A(‘helloWord!'); 的时候‘helloWord!'就是实参数组（虽然只有一个字符串），传递给方法apply，然后在调用initialize 的时候作为参数传递给初始化函数initialize。 

以上就是本章的全部内容，更多相关教程请访问JavaScript视频教程！

The above is the detailed content of JS object-oriented, prototype, call(), apply(). For more information, please follow other related articles on the PHP Chinese website!