JavaScript中new操作符创建对象的原理与返回值处理

本文通过具体实例，解析JavaScript中使用new操作符构建对象的核心方法，供读者参考学习。

new操作符的基本调用方式

在JavaScript开发中，常需利用函数模拟类结构并生成实例。定义好构造函数后，必须使用new操作符调用该函数，才能获取预期的对象实例。具体示例如下：

<script>
function Constructor(name){
this.name = name
}
var person1 = Constructor("张三");//undefined
var person2 = new Constructor("张三");//得到一个对象｛name:"张三"｝
console.log(person1);
console.log(person2);
</script>

代码执行后的输出结果如下所示：

若省略new操作符直接调用函数，程序仅执行函数体逻辑，并将返回值赋给变量person1。因此，前例中person1的值为undefined。

new操作符的内部执行机制

当使用new操作符调用构造函数时，内部具体执行了哪些步骤？

情形一：构造函数未显式返回任何值。

使用new操作符调用函数时，系统会隐式创建一个新的对象（记为obj）。该对象的原型链指向构造函数的原型对象，从而继承原型上的属性与方法；同时，构造函数内部的this关键字被绑定至该新对象。函数执行完毕后，自动返回该新对象。

构造函数返回值的处理规则

情形二：构造函数显式返回了值（此场景较少见，甚至部分开发者未曾遇到）。

此时，new操作符返回的具体值取决于return语句中返回值的prototype类型。

具体代码示例如下：

function Constructor(name){
this.name = name
return this.name;
}
var person = new Constructor("123");//Constructor {name: "123"};Object,因为基本类型的prototype都是Object
function Constructor(name){
this.name = name
return new String(this.name);
}
var person = new Constructor("123");//String {0: "1", 1: "2", 2: "3", length: 3, [[PrimitiveValue]]: "123"},
console.log(person);

上述代码的运行结果如下：

读者可利用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun 测试上述代码的实际效果。

如需进一步了解JavaScript相关知识，可参考本站系列教程：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。

希望本文关于JavaScript程序设计的阐述能对读者有所帮助。