Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to use new to call functions in JavaScript". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use new to call functions in JavaScript" can help you solve the problem.

1.1 No return statement

The constructor * does not have a return statement, which is the default when using the constructor. * returns a new object, as follows:

Function Foo (age) {this.age = age;} var o = new Foo (111l); console.log (o)

This is a common process of creating objects using constructors, which are printed out as {age: 111}.

1.2 return object type data

Constructor * return object type data:

Function Foo (age) {this.age = age; return {type: "I am explicitly returned"};} var o = new Foo (222nd); console.log (o)

What is printed is {type:'I explicitly returned'}, that is, all the previous work of return has been done in vain, and * returns the object after return.

1.3 return basic type data

Does it mean that as long as there is a return in the constructor body, the data returned is all the data after the return?

Let's take a look at how basic type data is returned:

Function Foo (age) {this.age = age; return 1;} var o = new Foo (333); console.log (o)

What is printed is {age: 333}, which is the same as without return. Unlike what you expected, look at the following analysis behind your principle.

Second, the principle behind

2.1 cases of non-arrowhead functions

When creating an object using the new operator, the ES5 official documentation defines 13.2.2 [[Construct]] as follows in the function definition section:

When the [[Construct]] internal method for a Function object F is called with a possibly empty list of arguments, the following steps are taken: Let obj be a newly created native ECMAScript object. Set all the internal methods of obj as specified in 8.12. Set the [[Class]] internal property of obj to Object. Set the [[Extensible]] internal property of obj to true. Let proto be the value of calling the [[Get]] internal property of F with argument "prototype". If Type (proto) is Object, set the [[Prototype]] internal property of obj to proto. If Type (proto) is not Object, set the [[Prototype]] internal property of obj to the standard built-in Object prototype object as described in 15.2.4. Let result be the result of calling the [[Call]] internal property of F, providing obj as the this value and providing the argument list passed into [[Construct]] as args. If Type (result) is Object then return result. Return obj.

Look at steps 8 and 9:

8) call function F and assign its return value to result;. The argument when F executes is the parameter passed to [[Construct]] (that is, F itself), and the internal this of F points to obj.

9) if result is of type Object, return result

This explains that if the constructor explicitly returns the object type, it returns the object directly, rather than the object that was originally created.

* looking at step 10:

10) if F does not return an object type (step 9 does not hold), the created object obj is returned.

If the constructor does not explicitly return the object type (explicitly returns the basic data type or does not return it directly), it returns the object that was originally created.

2.2 the case of the arrow function

What if the constructor is an arrow function?

There is no [[Construct]] method in the arrow function, and you cannot use new to call it. An error will be reported.

NOTICE: where [Construct] refers to the constructor itself.

The relevant specifications are mentioned in the official documentation of ES6, but the official documentation since ES6 is extremely difficult to understand and will not be expressed here.

3. The complete procedure of new calling function

3.1 Chinese description and related code analysis

Any function except the arrow function can be called using new. What happened behind it is clearly described in English in the previous section, and then described in Chinese as follows:

1) create ECMAScript native object obj

2) set the internal properties of the native object to obj; (unlike prototype properties, the internal properties are represented as [[PropertyName]], two square brackets wrap the attribute name, and the property name is capitalized, such as common [[Prototype]], [[Constructor]])

3) set the internal property [[Class]] of obj to Object

4) set the internal property [[Extensible]] of obj to true

5) set the value of proto to the value of the prototype attribute of F

6) if proto is an object type, set the internal property [[Prototype]] value of obj to proto; (prototype chain association, the key to inheritance)

7) if proto is not an object type, set the internal property [[Prototype]] value of obj to the prototype value of the built-in function Object; (the function prototype property can be rewritten, and if changed to non-object type, the [[Prototype] of obj points to the prototype object of Object)

8) 9) 10) see the analysis in the previous section. (decide what to return)

For the case of step 7, see the following code:

Function Foo (name) {this.name = name;} var o1 = new Foo ("xiaoming"); console.log (o1.protoplast = Foo.prototype) / / true / / override the constructor prototype property to be non-object type, and the [[Prototype]] attribute inside the instance points to the Object prototype object / / because the instance is data of an object type, it inherits the built-in object prototype by default. / / if the constructor prototype does not meet the requirements for forming a prototype chain, skip the direct association with the built-in object prototype Foo.prototype = 1 Var O2 = new Foo ("xiaohong"); console.log (o2.protoplast _ = = Foo.prototype); / / false console.log (o2.protoplast _ = Object.prototype); / / true

3.2 more concise language description

If you execute new Foo (), the process is as follows:

1) create a new object o

2) the key to assigning a value to the internal property of a new object is to assign a value to the [[Prototype]] attribute and construct a prototype chain (if the constructor prototype is of type Object, point to the constructor prototype; otherwise point to the Object object prototype)

3) execute the function Foo. During the execution, the internal this points to the newly created object o

4) if the object type data is explicitly returned within the Foo, the data is returned and the execution ends; otherwise, the newly created object o is returned.

Fourth, how many points to explain

4.1 determine whether it is an Object type

Whether a data is of type Object can be determined by the instanceof operator: if x instanceof Object returns true, x is of type Object.

As you can see, null instanceof Object returns false, so null is not of type Object, although typeof null returns "Object".

4.2 instanceof principle

How instanceof works is: in the expression x instanceof Foo, if the prototype of Foo (that is, Foo.prototype) appears in the prototype chain of x, true is returned, otherwise, false is returned.

Because the prototype of the function can be rewritten, it will occur when x completely rewrites Foo's prototype x instanceof Foo to return false after x comes out through Foo new. Because the constructor prototype is rewritten after the instance is created, the prototype that the instance points to is no longer the new prototype of the constructor, as shown in the following code:

Const Foo = function () {}; const o = new Foo (); o instanceof Foo; / / true / / rewrite the Foo prototype Foo.prototype = {}; o instanceof Foo; / / false on "how to use new to call functions in JavaScript" is introduced here, thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.