這篇文章主要介紹了關於JS中new調用函數的原理介紹，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
JavaScript 中經常使用構造函數創建物件（透過new操作符呼叫一個函數），那在使用new呼叫一個函數的時候到底發生了什麼事？先看幾個例子，再解釋背後發生了什麼事。
#建構子最後沒有return語句，這也是使用建構子時預設情況，最後會傳回一個新對象，如下：
function Foo(age) { this.age = age; } var o = new Foo(111); console.log(o);
這是常見的使用建構子建立物件的過程，列印出來的是{age: 111}。
建構子最後return物件類型資料：
function Foo(age) { this.age = age; return { type: "我是显式返回的" }; } var o = new Foo(222); console.log(o);
列印出來的是{type: '我是顯式回傳的'}，也就是說，return之前的工作都白做了，最後回傳return後面的物件。
那是不是只要建構函式體內最後有return，回傳都是return後面的資料呢？
我們看下傳回基本型別資料的情況：
function Foo(age) { this.age = age; return 1; } var o = new Foo(333); console.log(o);
印出來的是{age: 333}，而沒有return時效果一樣。跟預期不一樣，背後你原理看下面分析。
當使用new運算子建立物件是，ES5 官方文件在函數定義一節中做瞭如下定義13.2.2[[Construct]]：
When the[[Construct]]internal method for aFunctionobjectFis called with a possibly empty list of arguments, the following steps are taken:
Let obj be a newly creatednative 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 ofF with argument "prototype".
[[Prototype]] internal property of obj to proto.
Object prototype objectas described in 15.2.4.
providing obj as the this valueand providing the argument list passed into [[Construct]] as args.
#If Type(result) is Object then return result.
F，將其傳回值賦給result；其中，F執行時的實參為傳遞給[[Construct]]（即F本身）的參數，F內部this指向obj;9）如果
result是Object類型，返回result；
這也解釋瞭如果建構子明確傳回物件類型，則直接傳回這個對象，而不是傳回最開始建立的對象。
最後在看第10 步： 10）如果F傳回的不是物件類型（第9 步不成立），則傳回已建立的物件obj。
如果建構函式沒有明確傳回物件類型（明確傳回基本資料型別或直接不回傳），則傳回最開始建立的物件。
2.2 箭頭函數的情況 那如果建構子是箭頭函數怎麼辦？ 箭頭函數中沒有[[Construct]]方法，不能使用new調用，會報錯。
[[Construct]]就是指建構子本身。
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
若执行new Foo()，过程如下：
1）创建新对象o；
2）给新对象的内部属性赋值，关键是给[[Prototype]]属性赋值，构造原型链（如果构造函数的原型是 Object 类型，则指向构造函数的原型；不然指向 Object 对象的原型）；
3）执行函数Foo，执行过程中内部this指向新创建的对象o；
4）如果Foo内部显式返回对象类型数据，则，返回该数据，执行结束；不然返回新创建的对象o。
关于一个数据是否是Object类型，可以通过instanceof操作符进行判断：如果x instanceof Object返回true，则x为Object类型。
由上可知，null instanceof Object返回false，所以null不是Object类型，尽管typeof null返回 "Object"。
instanceof的工作原理是：在表达式x instanceof Foo中，如果Foo的原型（即Foo.prototype）出现在x的原型链中，则返回true，不然，返回false。
因为函数的原型可以被改写，所以会出现在x通过Foonew 出来之后完全改写Foo的原型x instanceof Foo返回false的情况。因为实例创建之后重写构造函数原型，实例指向的原型已经不是构造函数的新的原型了，见下面代码：
const Foo = function() {}; const o = new Foo(); o instanceof Foo; // true // 重写 Foo 原型 Foo.prototype = {}; o instanceof Foo; // false
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
以上是關於JS中new調用函數的原理介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
