Function of in js

  • 2020-03-30 01:05:27
  • OfStack

Javascript functions are different from other languages in that each function is maintained and run as an object. By virtue of the properties of function objects, it is easy to assign a function to a variable or pass a function as an argument. Before moving on, let's take a look at the syntax for using functions:

Here is the quote:
The function func1 (...). {... }
Var func2 = function (...). {... };
Var func3 - a non-class function = function func4 (...). {... };
Var func5 = new Function ();
 
<script type="text/javascript"> 

//1. Method invocation pattern
//When a function is saved as a property of an object, we call it a method of that object, and this is bound to that object
var myObject={ 
name : "myObject" , 
value : 0 , 
increment : function(num){ 
this.value += typeof(num) === 'number' ? num : 0; 
return this; 
} , 
toString : function(){ 
return '[Object:' + this.name + ' {value:' + this.value + '}]'; 
} 
} 
alert(myObject.increment(10).increment(20).toString()); // [Object:myObject {value:30}] 


//2. Function call mode
//When a function is not a function of an object, it is called as a function, and this is bound to the global object. This is an error in language design. If the language is designed correctly, this should still bind to the this variable of the external function when the internal function is called
var myObject={ 
name : "myObject" , 
value : 0 , 
increment : function(num){ 
this.value += typeof(num) === 'number' ? num : 0; 
return this; 
} , 
toString : function(){ 
return '[Object:' + this.name + ' {value:' + this.value + '}]'; 
}, 
getInfo: function(){ 
var self=this; 
return (function(){ 
//return this.toString(); //  Inside an anonymous function this Points to the global object window .   The output  [object Window] 
return self.toString(); //Define a variable selft and assign it to this, and the inner function accesses this pointing to the object through that variable
})(); 
} 
} 
alert(myObject.increment(10).increment(20).toString()); // [Object:myObject {value:30}] 


//3. Constructor invocation mode
//JavaScript is a prototype-based inheritance language, which 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 is created that hides the connection to the function's prototype member, and this is bound to the constructor's instance.
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 object. MyObject inherits all the properties of myobject.prototype. This is bound to the instance of MyObject

var myObject = new MyObject(); 
myObject.increment(10); 
alert(myObject.value); //10 

var otherObject = new MyObject(); 
otherObject.increment(20); 
alert(otherObject.value); //20 

alert(myObject.target===myObject); // ture 
alert(myObject.target.getInfo()); // [Object:MyObject {value:10}] 


//4. Apply invoke mode
//JavaScript is a functional object-oriented programming language, so functions can have methods. The apply method of the function, as if the object owned the method, this points to the object.
//Apply accepts two arguments, the first being the object to bind (which this points to) and the second an array of arguments.
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 points to myObj
alert(getInfo.apply(window)); //[object Window], this points to the Window


// for and while 
function func(a,b){ 
alert(a); // 1 
alert(b); // 2 

for(var i=0;i<arguments.length;i++){ 
alert(arguments[i]); // 1, 2, 1, 2, 3 
} 

var i=0; 
while(i<arguments.length){ 
alert(arguments[i]); // 1, 2, 1, 2, 3 
i=i+1; 
} 
} 
func(1,2,3); 

var i=0 
for (i=0;i<=10;i++) { 
document.write("The number is " + i + "<br/>") 
} 

</script> 

Related articles: