Understanding of new keywords in javascript

Source: Internet
Author: User
Tags arrays

In JavaScript, instantiating an object uses the New keyword.

People often ask me when to use the New keyword for a function.

Before you answer this question, you need to understand the nature of new and what the new action does when invoking the new function.

First look at the following code:

Define class class name is ClassA
function ClassA () {
this.name=1;
}
ClassA.prototype.show = function () {
alert (this.name);
};
Instantiating with new
var B = new ClassA ();
B.show ();
In

var B = new ClassA ();

In this sentence, new has done the following several things.
1. Create a new object, the type of which is object;
2. Find all the methods and properties on the prototype of class, and copy the object created by
3, the constructor ClassA the inside of this point to the created object
4, created object __proto__ point to class prototype
5. Execute Constructor class
6, return the newly created object to the variable b

This process should be better understood. Here's another explanation:
1. Constructor: We generally refer to the function after new as a constructor, such as New ClassA (), where ClassA is the constructor
2, the 4th __proto__, may be more difficult to understand.
Each object initializes an attribute within it, which is __proto__, and can be viewed by writing an object in the debugger in Chrome. When we access an object's properties, if this property does not exist inside the object, then he will go to __proto__ to find this attribute, the __proto__ will have their own __proto__, so keep looking for, that is, we usually say the concept of the prototype chain.

When we call B.show (), first B does not show this property, so it needs to be found in its __proto__, which is Classa.prototype,
And we have defined classa.prototype.show=function () {}; So, we found this method.

Then use the following code to understand

var B = {}
b.__proto__ = Classa.prototype
Classa.call (b)

Finally, in a single sentence: The New keyword creates a new object for the template with ClassA () that duplicates all the member variables in the ClassA constructor, and this points to the newly created object.

There are 2 points to note:

1. If there is no return value within the constructor, the default is to return this (the current context) or return any non original type value.
2, if you do not use the new keyword, such as

var B = ClassA ();

The ClassA value returns undefined, and this (execution context) is a Window object.
That is, if you are not new, this refers to the window global object.
If you want to understand this, you need to clarify the point of this.

This point is:

1. In general, this is used inside the function to refer to the object that contains the function, not the function itself.
2. This value will always be a reference to the Head object (that is, the Global Window object) when the value's host function is encapsulated inside another function or invoked in the context of another function.
3. When calling a constructor using the New keyword, this refers to the object that is about to be created

Like the following code:

Define class class name is ClassA
function ClassA () {
this.name=1;
}
Execute ClassA
ClassA ();
See if name is undefined or 1.
Name//return 1

See here, I believe most people should understand the use of new.

The wonder of new

Plus no new results are the same
var obj = new Function (' var temp = 100;this.temp = 200;return temp + this.temp; ');
Alert (typeof (obj)); function
Alert (obj ()); 300


var obj = Function (' var temp = 100;this.temp = 200;return temp + this.temp; ');
Alert (typeof (obj)); function
Alert (obj ()); 300


var d=date ();
alert (d);


var reg1 = new RegExp (' ^hello$ ');
var reg2 = RegExp (' ^hello$ ');
Reg1.test (' Hello '); True
Reg2.test (' Hello '); True
Console.log (typeof REG1); Object
Console.log (typeof REG2); Object

Test discovery uses or does not use new, and finally returns the regular objects, and typeof they are all object. Things are different here.


var str1 = new String (1);
var str2 = String (1);
var num1 = new Number (' 1 ');
var num2 = number (' 1 ');
var bool1 = new Boolean (1);
var bool2 = Boolean (1);

Alert (typeof str1); Object
Alert (typeof str2); String
Alert (typeof NUM1); Object
Alert (typeof num2); Number
Alert (typeof bool1); Object
Alert (typeof bool2); Boolean

Or

function Person (name,age) {
This.name=name;
This.age=age;
}
var p1=person (' Zhangsan ', 30);
Alert (p1);//undefined

var p2=new person (' Zhangsan ', 30);
Alert (p2);//object

JavaScript is a prototype based language, but it has a new operator that makes it look like a classic face object language. That also confuses programmers, causing some problematic programming patterns. In fact, you never need to use the new Object () in JavaScript. Use the literal form {} to replace it. Instead of using the new Array (), replace it with a literal []. Arrays in JavaScript do not work like arrays in Java, and using Java-like syntax can only confuse you. Do not use new number, new String, or new Boolean. The use of these will only produce unwanted type encapsulation objects. Do not use the new function to create a function object. Use function expressions better. Like what:


Frames[0].onfocus = new Function ("Document.bgcolor= ' Antiquewhite '");
Should


Frames[0].onfocus = function () {Document.bgcolor = ' antiquewhite ';};
When you write this,


MyObj = new function () {
This.type = ' core ';
};

You should


MyObj = {
Type: ' Core '
};

The principle is simple: the only place where you should use the new operator is when you call a constructor function. When invoking a constructor function, it is mandatory to require the use of the new

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.