Detailed explanation of common methods of js function calling_Basic knowledge

Source: The essence of JavaScript language. This is not the source code from the book.
The function call of js will provide two additional parameters for free: this and arguments. arguments is a parameter group, it is not a real array, but you can use the .length method to get the length.
The book says there are 4 calling modes:
Method calling mode
Function calling mode
Constructor calling mode
Apply calling mode

Let’s take a look at some examples better understood.
1: Method calling mode
Please note that this points to myobject at this time.

Copy code The code is as follows:

/*Method calling mode*/
var myobject ={
value:0,
inc:function(){
alert(this.value)
}
}
myobject.inc()

2: Function calling mode
Please note that this points to window at this time.

Copy code The code is as follows:

/*Function call mode*/
var add =function(a,b){
alert(this)//this is tied to window
return a b;
}
var sum=add(3,4);
alert (sum)

3: Constructor calling pattern
The book Essence of JavaScript Language recommends abandoning this method. Because there is a better way. Not introduced here. Will post it next time I blog.
A link will be added here.

Copy code The code is as follows:

/*Constructor calling mode abandoned*/
var quo=function(string){
this.status=string;
}
quo.prototype.get_status=function(){
return this.status;
}
var qq=new quo("aaa");
alert(qq.get_status());

4: apply calling mode
== We can See a more useful example of apply. Look at the code at the bottom.

Copy code The code is as follows:

/*apply*/
//Pay attention to usage The above sum function
//and myobject
//The advantage of this calling method is that it can point to the object pointed to by this.
//The first parameter of apply is the object this pointer points to
var arr=[10,20];
var sum=add.apply(myobject,arr);
alert( sum);

See the real application of this apply. bind This is a function that binds time.

Copy code The code is as follows:

var bind=function(object,type,fn){
if(object.attachEvent){//IE browser
object.attachEvent("on" type,(function(){
return function(event){
window.event.cancelBubble= true;//Stop time bubbling
object.attachEvent=[fn.apply(object)];//----What I want to talk about here is here
//Use attachEvent to add a time in IE After binding.
//This does not point to the object object itself, so this.id in the function we bound will not work properly.
//But if we use fn.apply(object).
//It can be seen here that we changed the first object of apply, which is the point of this, to object, so this.id becomes
//object.id and it can work normally. >}
})(object),false);
}else if(object.addEventListener){//Other browsers
object.addEventListener(type,function(event){
event. stopPropagation();//Stop time bubbling
fn.apply(this)
});
}
}
bind(document.getElementById("aaa"),"click" ,function(){alert(this.id)});