這篇文章主要介紹了關于JS中new調用函數的原理介紹，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

JavaScript 中經常使用構造函數創建對象(通過 new 操作符調用一個函數)，那在使用 new 調用一個函數的時候到底發生了什么？先看幾個例子，再解釋背后發生了什么。

1)看三個例子

1.1 無 return 語句

構造函數最后沒有 return 語句，這也是使用構造函數時默認情況，最后會返回一個新對象，如下：function Foo(age) {

this.age = age;

}

var o = new Foo(111);

console.log(o);

這是常見的使用構造函數創建對象的過程，打印出來的是 {age: 111}。

1.2 return 對象類型數據

構造函數最后 return 對象類型數據：function Foo(age) {

this.age = age;

return { type: "我是顯式返回的" };

}

var o = new Foo(222);

console.log(o);

打印出來的是 {type: '我是顯式返回的'}，也就是說，return 之前的工作都白做了，最后返回 return 后面的對象。

1.3 return 基本類型數據

那是不是只要構造函數體內最后有 return，返回都是 return 后面的數據呢？

我們看下返回基本類型數據的情況：function Foo(age) {

this.age = age;

return 1;

}

var o = new Foo(333);

console.log(o);

打印出來的是 {age: 333}，和沒有 return 時效果一樣。跟預期不一樣，背后你原理看下面分析。

2)背后原理

2.1 非箭頭函數的情況

當使用 new 操作符創建對象是，ES5 官方文檔在 函數定義 一節中做了如下定義 13.2.2 [[Construct]]：

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.

看第 8、9 步：8)調用函數 F，將其返回值賦給 result；其中，F 執行時的實參為傳遞給 [[Construct]](即 F 本身) 的參數，F 內部 this 指向 obj；

9)如果 result 是 Object 類型，返回 result；

這也就解釋了如果構造函數顯式返回對象類型，則直接返回這個對象，而不是返回最開始創建的對象。

最后在看第 10 步：10)如果 F 返回的不是對象類型(第 9 步不成立)，則返回創建的對象 obj。

如果構造函數沒有顯式返回對象類型(顯式返回基本數據類型或者直接不返回)，則返回最開始創建的對象。

2.2 箭頭函數的情況

那如果構造函數是箭頭函數怎么辦？

箭頭函數中沒有 [[Construct]] 方法，不能使用 new 調用，會報錯。

NOTICE：其中 [[Construct]] 就是指構造函數本身。相關規范在 ES6 的官方文檔 中有提，但自從 ES6 以來的官方文檔巨難懂，在此不做表述。

3)new 調用函數完整過程

3.1 中文描述及相關代碼分析

除了箭頭函數之外的任何函數，都可以使用 new 進行調用，背后發生了什么，上節英文講述的很清楚了，再用中文描述如下：

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)見上節分析。(決定返回什么)

對于第 7 步的情況，見下面代碼：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

3.2 更簡潔的語言描述

若執行 new Foo()，過程如下：

1)創建新對象 o；

2)給新對象的內部屬性賦值，關鍵是給[[Prototype]]屬性賦值，構造原型鏈(如果構造函數的原型是 Object 類型，則指向構造函數的原型；不然指向 Object 對象的原型)；

3)執行函數 Foo，執行過程中內部 this 指向新創建的對象 o；

4)如果 Foo 內部顯式返回對象類型數據，則，返回該數據，執行結束；不然返回新創建的對象 o。

4)幾點說明

4.1 判斷是否是 Object 類型

關于一個數據是否是 Object 類型，可以通過 instanceof 操作符進行判斷：如果 x instanceof Object 返回 true，則 x 為 Object 類型。

由上可知，null instanceof Object 返回 false，所以 null 不是 Object 類型，盡管typeof null 返回 "Object"。

4.2 instanceof 原理

instanceof 的工作原理是：在表達式 x instanceof Foo 中，如果 Foo 的原型(即 Foo.prototype)出現在 x 的原型鏈中，則返回 true，不然，返回 false。

因為函數的原型可以被改寫，所以會出現在 x 通過 Foo new 出來之后完全改寫 Foo 的原型 x instanceof Foo 返回 false 的情況。因為實例創建之后重寫構造函數原型，實例指向的原型已經不是構造函數的新的原型了，見下面代碼：const Foo = function() {};

const o = new Foo();

o instanceof Foo; // true

// 重寫 Foo 原型

Foo.prototype = {};

o instanceof Foo; // false

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

總結

以上是生活随笔為你收集整理的php new对象 调用函数,关于JS中new调用函数的原理介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。