Summary of js function calling patterns_js object-oriented

Method calling mode
When a function is saved as a property of an object, we call it a method of the object, then this is bound to the object.

Copy code The code is as follows:

var myObject={
name : "myObject" ,
value : 0 ,
increment : function(num){
this.value = typeof(num) === 'number' ? num : 0;
} ,
toString : function(){
return '[Object:' this.name ' {value:' this.value '}]';
}
}
alert(myObject);//[Object: myObject {value:0}]

Function calling mode
When a function is not a function of an object, then it is called as a function, and this is Bind to the global object. This is a mistake in language design. If the language design is correct, when the inner function is called, this should still be bound to the this variable of the outer function. For example:

Copy code The code is as follows:

var myObject={
name : " myObject" ,
value : 0 ,
increment : function(num){
this.value = typeof(num) === 'number' ? num : 0;
} ,
toString : function(){
return '[Object:' this.name ' {value:' this.value '}]';
},
getInfo:function(){
return ( function(){
return this.toString();//this in the internal anonymous function points to the global object window
})();
}
}
alert(myObject.getInfo ());//[object Window]

Luckily, there is an easy solution: define a variable and assign it the value this, then the internal function can access it through this variable This points to the object, such as:

Copy code The code is as follows:

var myObject={
name : "myObject" ,
value : 0 ,
increment : function(num){
this.value = typeof(num) === 'number' ? num : 0;
} ,
toString : function(){
return '[Object:' this.name ' {value:' this.value '}]';
},
getInfo:function() {
var self=this;
return (function(){
return self.toString(); // Point to the myObject object through the variable self
})();
}
}
alert(myObject.getInfo());//[Object:myObject {value:0}]

Constructor calling mode
JavaScript is A language based on prototypal inheritance. This means that objects can inherit properties directly from other objects. The language is classless.
If a function is called with new in front, a new object will be created that hides the prototype member connected to the function, and this will be bound to the instance of the constructor.

Copy code The code is as follows:

function MyObject(name){
this.name =name || 'MyObject';
this.value=0;
this.increment=function(num){
this.value = typeof(num) === 'number' ? num : 0 ;
};
this.toString=function(){
return '[Object:' this.name ' {value:' this.value '}]';
}
this .target=this;
}
MyObject.prototype.getInfo=function(){
return this.toString();
}
/*
Create a MyObject.prototype at the same time Object, myObject inherits all properties of MyObject.prototype,
this is bound to the instance of MyObject
*/
var myObject=new MyObject();
var otherObject=new MyObject() ;
//alert(myObject.target===myObject);//ture
//alert(myObject.target.getInfo());//[Object:MyObject {value:0}]
myObject.increment(10);
otherObject.increment(20);
alert(myObject.value);//10
alert(otherObject.value);//20

Apply calling mode
JavaScript is a functional object-oriented programming language, so functions can have methods.
The apply method of the function, as if the object has this method, makes the object have this method. At this time this points to the object.
apply receives two parameters, the first is the object to be bound (the object pointed to by this), and the second is the parameter array.

Copy code The code is as follows:

function MyObject(name){
this.name=name || 'MyObject';
this.value=0;
this.increment=function(num){
this.value = typeof(num) === 'number' ? num : 0;
};
this.toString=function(){
return '[Object:' this.name ' {value:' this.value '}]';
}
this.target=this;
}
function getInfo(){
return this.toString();
}
var myObj=new MyObject();
alert(getInfo.apply(myObj));//[Object:MyObject {value:0}],this指向myObj
alert(getInfo.apply(window));//[object Window],this指向window