JavaScript中new关键字结合返回对象函数的处理逻辑及调用差异

嘿，这个问题问到点子上了——很多刚接触JavaScript构造函数的开发者都会对new关键字的实际作用和函数返回值的优先级感到困惑，我来一步步给你拆解清楚：

先看你写的第一个Info函数 #

function Info() { return {x: 0, y: 0 } }

1. 直接调用Info()：var objInfo2 = Info(); #

这就是最普通的函数调用：执行函数体里的代码，最后返回{x: 0, y: 0}这个新对象。所以objInfo2就是这个对象，逻辑非常直观。

2. 使用new调用：var objInfo1 = new Info(); #

这里要重点讲new操作符的执行逻辑，正常情况下new会做四件事：

• 创建一个空的普通对象（{}）
• 把这个空对象的__proto__指向构造函数的prototype
• 把构造函数的this绑定到这个空对象上
• 执行构造函数的代码，最后返回这个绑定了this的对象（除非构造函数自己显式返回了一个对象类型的值）

划重点：你的Info函数最后显式返回了一个对象{x:0,y:0}，这时候new操作符会直接忽略原本要返回的那个绑定了this的空对象，转而返回你显式指定的这个对象。所以objInfo1拿到的和直接调用Info()得到的对象结构完全一样，看起来结果就相同了。

再对比标准构造函数写法 #

function Info() { this.x = 0; this.y = 0; }

这时候两种调用方式的结果就天差地别了：

• 直接调用Info()：非严格模式下this会绑定到全局对象（浏览器里是window），执行函数后会给全局对象添加x和y属性，而函数本身没有显式返回值，所以objInfo2是undefined；严格模式下this是undefined，执行this.x = 0会直接报错。
• 使用new调用Info()：new会创建空对象，把this绑定到它，执行函数给this添加x和y属性，最后返回这个对象，所以objInfo1是一个带有x和y的实例，这才是标准构造函数的正确用法。

总结核心要点 #

• 当构造函数显式返回对象类型的值（对象、数组、函数等引用类型）时，new会优先返回这个值，而不是默认的this实例。
• 当构造函数没有显式返回值，或者返回的是基本类型（字符串、数字、布尔等），new才会返回那个绑定了this的实例对象。
• 你第一个Info函数的特殊之处在于，不管有没有new，最终都会返回一个结构相同的新对象，所以结果看起来一致，但new背后还是执行了额外的步骤，只是被函数的返回值覆盖了而已。

内容的提问来源于stack exchange，提问作者Nithin B