Introduction to the principle of new calling function in JS

This article mainly introduces the principle of new calling function in JS. It has certain reference value. Now I share it with you. Friends in need can refer to it.

Constructor is often used in JavaScript to create Object (calling a function through thenewoperator), what exactly happens when calling a function usingnew? Let’s look at a few examples before explaining what’s going on behind the scenes.

1) Look at three examples

1.1 No return statement

There is noreturnstatement at the end of the constructor. This is also the default situation when using the constructor. Finally, a new object will be returned, as follows:

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

This is a common process of using a constructor to create an object, and what is printed is{age: 111}.

1.2 return object type data

Constructor lastreturnObject type data:

function Foo(age) { this.age = age; return { type: "我是显式返回的" }; } var o = new Foo(222); console.log(o);

What is printed is{type: 'I It is explicitly returned'}, that is to say, all the work beforereturnis done in vain, and finally the object afterreturnis returned.

1.3 Return basic type data

Does that mean that as long as there isreturnat the end of the constructor body, the data afterreturnwill be returned?

Let’s take a look at the situation of returning basic type data:

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

What is printed is{age: 333}, and the effect when there is noreturnSame. It’s different from expectations. Please see the analysis below for the principle behind it.

2) The principle behind

2.1 The case of non-arrow functions

When using thenewoperator to create an object, the ES5 official documentation is inFunction definitionThe following definition is made in section 13.2.2[[Construct]]:

When the[[Construct]]internal method for aFunctionobjectFis called with a possibly empty list of arguments, the following steps are taken:

1. Let obj be a newly creatednative ECMAScript object.

2. ##Set all the internal methods of obj as specified in 8.12.

3. Set the [[Class] ] internal property of obj to Object.

4. Set the [[Extensible]] internal property of obj to true.

5. Let proto be the value of calling the [[Get]] internal property of

   F with argument "prototype".

##If Type(proto) is Object, set the
6. [[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
7. Object prototype object

   as described in 15.2.4.

Let result be the result of calling the [[Call]] internal property of F,
8. providing obj as the this value

   and providing the argument list passed into [[Construct]] as args.

9. If Type(result) is Object then return result

   .

Return obj.
See steps 8 and 9:

8) Call function

, assign its return value to result; among them, the actual parameters when Fis executed are passed to [[Construct]](that is, Fitself) parameter, Finternal thispoints to obj; 9) Ifresult
is Objecttype, returns result;

Finally look at step 10:

10) If

returns not an object type (step 9 is not true), return the created object obj.

2.2 The case of arrow function

What if the constructor is an arrow function?

There is no

method in the arrow function, and it cannot be called usingnew, and an error will be reported.NOTICE:

refers to the constructor itself.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 described here.

3) The complete process of new calling function

3.1 Chinese description and related code analysis

Any function except arrow functions can be used

What happens behind the call is very clear in English in the previous section, and it is described in Chinese as follows:

1）创建 ECMAScript 原生对象 obj；
2）给obj设置原生对象的内部属性；（和原型属性不同，内部属性表示为[[PropertyName]]，两个方括号包裹属性名，并且属性名大写，比如常见[[Prototype]]、[[Constructor]]）
3）设置obj的内部属性[[Class]]为Object；
4）设置obj的内部属性[[Extensible]]为true；
5）将proto的值设置为F的prototype属性值；
6）如果proto是对象类型，则设置obj的内部属性[[Prototype]]值为proto；（进行原型链关联，实现继承的关键）
7）如果proto是不对象类型，则设置obj的内部属性[[Prototype]]值为内建构造函数Object的prototype值；（函数prototype属性可以被改写，如果改成非对象类型，obj的[[Prototype]]就指向 Object 的原型对象）
8）9）10）见上节分析。（决定返回什么）

function Foo(name) { this.name = name; } var o1 = new Foo("xiaoming"); console.log(o1.__proto__ === Foo.prototype); // true // 重写构造函数原型属性为非对象类型，实例内部 [[Prototype]] 属性指向 Object 原型对象 // 因为实例是一个对象类型的数据，默认会继承内建对象的原型， // 如果构造函数的原型不满足形成原型链的要求，那就跳过直接和内建对象原型关联 Foo.prototype = 1; var o2 = new Foo("xiaohong"); console.log(o2.__proto__ === Foo.prototype); // false console.log(o2.__proto__ === Object.prototype); // true

const Foo = function() {}; const o = new Foo(); o instanceof Foo; // true // 重写 Foo 原型 Foo.prototype = {}; o instanceof Foo; // false