Home > Web Front-end > JS Tutorial > body text

Detailed explanation of JavaScript class constructor and self-updating function code examples

伊谢尔伦
Release: 2017-07-25 13:47:47
Original
1784 people have browsed it

Class constructor
JavaScript functions also serve as constructors of classes, so as long as you declare a function, you can use the new keyword to create an instance of the class.

 function Person(name) { 
   this.name = name; 
   this.toString = function() { 
     return 'Hello, ' + this.name + '!'; 
   }; 
 } 
   
 var p = new Person('Ghostheaven'); 
 alert(p); // Hello, Ghostheaven!
Copy after login

In the above example, the Person function is used as the constructor of the class. At this time, this points to the newly created instance object. You can add properties and methods to the instance. For detailed object-oriented JavaScript programming, please refer to this article. article. What I want to talk about here is the return value issue when JavaScript functions are used as class constructors.

 function MyClass(name) { 
   this.name = name; 
   return name;  // 构造函数的返回值? 
 } 
   
 var obj1 = new MyClass('foo'); 
 var obj2 = MyClass('foo'); 
 var obj3 = new MyClass({}); 
 var obj4 = MyClass({});
Copy after login

The above constructor is quite special, it has a return statement, so what objects do obj1~obj4 point to respectively? The actual result is this:

obj1 = MyClass对象
obj2 = 'foo'
obj3 = {}
obj4 = {}
Copy after login

Function class
There is a built-in class called Function in the JavaScript runtime. Using the function keyword to declare a function is actually a shorthand form of creating a Function class object. , all functions have all the methods of the Function class, such as call, apply, bind, etc. This statement can be verified through the instanceof keyword.
Since Function is a class, its constructor is Function (itself is also an object of the Function class), and it should be possible to generate a function object through the new keyword. Here comes the first monster, which is how to construct a function using the Function class. The syntax of Function is as follows:

new Function ([arg1[, arg2[, ... argN]],] functionBody)
Copy after login

where arg1, arg2, ... argN is a string, representing the parameter name, functionBody is also a string, representing the function body, the previous parameter name can be more or less, Function The constructor will treat the last parameter as the function body, and the previous ones as parameters.

var func1 = new Function('name', 'return "Hello, " + name + "!";'); 
 func1('Ghostheaven'); // Hello, Ghostheaven!
Copy after login

The above method constructs a function through Function. This function is exactly the same as other functions declared with the function keyword.
The Function class has its unique purpose. You can use it to dynamically generate various function logic, or replace the function of the eval function, and keep the current environment from being polluted*.

Self-updating function
In many languages, once a function is declared, it cannot declare a function with the same name again, otherwise a syntax error will occur. However, functions in JavaScript can not only be declared repeatedly, but also update themselves. Own. The monster that eats itself is here!

function selfUpdate() { 
   window.selfUpdate = function() { 
     alert('second run!'); 
   }; 
   
   alert('first run!'); 
 } 
   
 selfUpdate(); // first run! 
 selfUpdate(); // second run!
Copy after login

This kind of function can be used for logic that only runs once, and the entire logic is replaced with a new piece of logic after the first run.

The above is the detailed content of Detailed explanation of JavaScript class constructor and self-updating function code examples. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template