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

Experience summary of forced calling of javascript constructor_javascript skills

WBOY
Release: 2016-05-16 17:47:31
Original
816 people have browsed it

The following constructor was defined with great interest:

Copy code The code is as follows:

var Coder = function( nick ){
this.nick = nick;
};

What about after defining the constructor? That's right, instantiate it quickly:
var coder = Coder( 'casper' );
What is the name of this coder brother? Print it quickly:
Copy code The code is as follows:

console.log( coder.nick ) ; //undefined
= =b is actually undefined! ! Looking back at the instantiation statement, it is not difficult to find where the problem lies: there is a missing new
var coder = Coder( 'casper' ); // Called as an ordinary function, so the internal this The pointer actually points to the window object
console.log( window.nick); //Output: casper
var coder = new Coder( 'casper' ); //With new, everything is different, this points correctly The currently created instance
console.log( coder.nick ); //Output: casper

The issue of the pointing of this pointer is not discussed in this article. You can refer to the relevant chapters of the Rhinoceros book.
Such an error seems to be quite low-level, but the probability of occurrence is quite high. How to avoid or reduce the occurrence of this situation?
You can play around with the internal implementation:
Copy the code The code is as follows:

var Coder = function( nick ){
if( !(this instanceof Coder) ){
return new Coder( nick );
}
this.nick = nick;
};

In fact, it is very simple. When instantiating, the type of the object pointed to by this is determined internally. If it is not the type of the current constructor, the constructor is forced to be called again.
Suddenly you feel that the name Coder is not fashionable enough? If you want to use Hacker, okay, I'll change it. . . After counting, there are three things that need to be changed. This is unscientific. Is there any way to just change the name of the constructor?
Of course:
Copy code The code is as follows:

var Coder = function( nick ){
if( !(this instanceof arguments.callee) ){
return new arguments.callee( nick );
}
this.nick = nick;
};

tips: It is said that arguments.callee will be disabled under the strict mode of ES 5, but only if ES 5 is popular and you specify to use strict mode, otherwise it can still be used. Thinking about it: In JQ, the invincible $ is included. Everyone knows that it will return a jquery object, as follows:
var jObject = $('#node_id');
Have you noticed that there is no new here either! You should have guessed what happened. The principles are similar, but the implementation inside is much more complicated. I will unplug the implementation in JQ and write a summary when I have time.
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