Inheritance of objects in JavaScript (paste)_javascript Tips

1. Apply and call functions on JavaScript
Prototype.js uses a large number of apply and call functions, and not noticing can cause an understanding bias.
Official explanation: A method of applying an object that replaces the current object with another object.
The difference between apply and call is that the second argument is different. Apply is an array or arguments object. And call is any type separated by commas.

The most confusing part of the Apply,call method is also the Apply,call feature. But it's best not to abuse it.
Can change the object that calls the function. In the following example, this keyword is used in the function, at which point this represents the first argument of the Apply,call function.

<script src= "Prototype1.3.1.js" ></script>
<input type= "text" id= "MyText" value= "input text" >
<script>
function Obj () {
This.value= "Object! ";
}
var value= "global variable";
function Fun1 () {
alert (this.value);
}
Window. Fun1 ();
fun1.apply (window);
Fun1.apply ($ (' myText '));
Fun1.apply (New OBJ ());
</script>

2. About Closures
Prototype.js features JavaScript closures in Class.create,bind. On the whole, however, prototype.js is not much used for the powerful closure characteristics. You can refer to my translated article to learn about closures.
3, let me more disgusted with the two methods
(1)
var Class = {
Create:function () {
return function () {
This.initialize.apply (this, arguments);
}
}
}
I hate to write JavaScript in other language styles. Using this method to construct a custom class does not feel convenient, and reducing the number of lines of code can only be difficult to understand and define a initialize method.
In fact, hate this a bit far-fetched, but to modify the object of the prototype is a bit excessive.
(2) Object.prototype.extend
First but you take a extend name will make the familiar Java people caused by ambiguity. It is not justified to modify the prototype of an object. I don't know what the author is thinking. When you're in a for-loop object, the trouble comes. Maybe someone will ask you for why in. I have a project that uses both DWR and Prototype.js,dwr to return JavaScript objects with a Exetend attribute and special handling.
I used to compare the implementation of Dojo and Prototype.js inheritance, and now I understand the truth. For JavaScript, which has no static type checking, syntax-relaxed language, if you choose a JS class library, then you must adapt to the author's writing JavaScript style. Prototype.js's authors have perfected the use of extend, and if we don't do it just as a function of a property copy, it's good to read the Prototype.js code more.
4, about the function of binding
The class library provides two methods for Function.prototype.bind Function.prototype.bindAsEventListener. First, we explain one of these two methods conceptually.
Either function can call the two methods; The parameter is a JavaScript object or an element object on a Web page, and the return type is a function object.
I was just a function, return or function, to the two functions are different. See implementation code, key or Apply\call function code. In fact, it just transforms the object of the method call.

<script src= "Prototype1.3.1.js" ></script>
<input type=checkbox id=mychk name= "asf" Value=1> Test
<script>
var checkboxwatcher = Class.create ();
Checkboxwatcher.prototype = {
Initialize:function (chkbox, message) {
This.chkbox = $ (chkbox);
this.message = message;
This.chkBox.onclick = This.showMessage.bindAsEventListener (this);
},
Showmessage:function (evt) {
Alert (This.message + ' (' + Evt.type + ') ');
}
};
New Checkboxwatcher (' Mychk ', ' message!!!! ');
$ (' Mychk '). Onclick=function () {};
</script>
This is the example of https://compdoc2cn.dev.java.net/, personal feeling is not interesting, but let me have some aversion to bind,bindaseventlistener. (JavaScript is like this, obviously everyone knows the syntax, but the written code is very different)
Look at the following code:

<script src= "Prototype1.3.1.js" ></script>
<input type=checkbox id=mychk name= "chk" value=1> Test
<script>
function Class () {
This.name= "Class";
}
Class.prototype.getname=function () {
alert (this.name);
}
var obj=new Class ();
$ (' Mychk '). Onclick=obj.getname;
$ (' Mychk '). Onclick=obj.getname.bind (obj);
$ (' Mychk '). Onclick=obj.getname.bind ($ (' mychk '));
</script>

From the above code can be seen Bind/bindaseventlistener just wrapped the Apply/call method, change the method of the Call object. As an example, you can convert the Obj.getname method to any object invocation and trigger the method to the form element. (Only the arguments for the return function differ between bind and Bindaseventlistener)
These two methods can also be reused in methods between objects to implement concepts such as inheritance methods. Look at the following code, in fact, is more boring.

<script src= "Prototype1.3.1.js" ></script>
<script>
function Class1 (name) {
This.name=name;
}
Class1.prototype.getname=function () {
alert (this.name);
}
function Class2 (name) {
This.name=name;
This.getname=class1.prototype.getname.bind (this);
}
var obj1=new Class2 ("yql");
Obj1.getname ();
var obj2=new Object ();
Obj2.name= "ZKJ";
Obj2.fun=class1.prototype.getname.bind (OBJ2);
Obj2.fun ();
</script>


I've never read Prototype.js's extended project code, nor do I know bind. Best practice, dig together. But you should never take bind/bindaseventlistener from the meaning of binding, which may make you more confused. Understand the essence from Apply/call. Applies a method of an object, replacing the current object with another object.

5, about the registration of events

<script src= "Prototype1.3.1.js" ></script>
<input type=checkbox id=mychk name= "chk" value=1> Test
<script>
Event.observe (Mychk, ' click ', ShowMessage, false);
$ (' Mychk '). Onclick=showmessage;
$ (' Mychk '). Onclick=showmessage.bind ();
$ (' Mychk '). Onclick=showmessage.bind ($ (' mychk '));
function ShowMessage () {
alert (this.value);
}
</script>

By executing the above code, you can understand the difference between Event.observe and Bind/bindaseventlistener:
(1) Obviously Event.observe is limited, can only handle simple function, and function can not have this kind of thing.
(2) Event.observe internal use to addeventlistener/attachevent. Multiple functions can be added to a trigger event (window.onload). Bind is covered.

6. Best practices on event monitoring
It is clear that the event registration method provided by Prototype.js is not perfect. So look at Dojo's Time Register (Chinese version), more complex, I guess a lot of people like me, for dojo temporarily hold a wait and see attitude.
If you have read the previous article about closures, you may have seen the following code.
Before looking at the following code I would like to express the view that any element in the Web page, the browser will create an object for you (see). (I think) the difference between these objects and the JavaScript objects you create is that they have event listening and respond to events on the mouse keyboard. If you use the following code, then the event monitoring code is well translated into your JavaScript code.

function associateobjwithevent (obj, methodname) {
Return (function (e) {
E = e| | window.event;
Return Obj[methodname] (e, this);
});
}
function Dhtmlobject (elementid) {
var el = Getelementwithid (ElementID);
if (EL) {
El.onclick = Associateobjwithevent (This, "Doonclick");
El.onmouseover = Associateobjwithevent (This, "domouseover");
El.onmouseout = Associateobjwithevent (This, "domouseout");
}
}
DhtmlObject.prototype.doOnClick = function (event, Element) {
..//Doonclick method body.
}
DhtmlObject.prototype.doMouseOver = function (event, Element) {
..//Domouseover method body.
}
DhtmlObject.prototype.doMouseOut = function (event, Element) {
..//Domouseout method body.
}

There is time I want to use the above thought to implement a Web page floating box drag code (in fact, there are many), to be continued ...