JavaScript 普通函数与构造函数的核心区别解析
本文详细解析JavaScript中普通函数与构造函数的区别。从命名规范(首字母大写vs小驼峰)入手,深入对比调用方式、this指向规则(实例对象vs全局window)以及返回值逻辑。重点阐述构造函数在手动返回基本类型与复杂对象时的不同表现,结合代码示例厘清常见面试考点。
JavaScript 普通函数与构造函数的核心区别解析
普通函数和构造函数的区别
命名规范差异
在命名规范方面,构造函数通常采用首字母大写的命名方式,而普通函数则遵循小驼峰式命名法。
调用机制与 this 指向
在函数调用机制上,两者存在显著差异:
function fn() { }
构造函数: 1. 使用 new 关键字调用,如 new fn( ) 2. 构造函数内部会自动创建一个新的对象,即 f 的实例 3. 函数内部的 this 指向新创建的 f 的实例 4. 默认的返回值是 f 的实例
普通函数: 1. 直接调用,如 fn( ) 2. 在调用函数的内部不会创建新的对象 3. 函数内部的 this 指向调用函数的对象(如果没有对象调用,默认是 window) 4. 返回值由 return 语句决定
返回值处理逻辑
构造函数的返回值:
有一个默认的返回值,新创建的对象(实例); 当手动添加返回值后(return语句):
1. 返回值是基本数据类型-->真正的返回值还是那个新创建的对象(实例) 2. 返回值是复杂数据类型(对象)-->真正的返回值是这个对象
看一个常见的面试题
<script>
function foo() {
var f2 = new foo2();
console.log(f2); //{a: 3}
console.log(this); //window
return true;
}
function foo2() {
console.log(this); //foo2类型的对象 不是foo2函数
// this.age = 30;
return {a: 3};
}
var f1 = foo();
console.log(f1); // true
</script>
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
什么时候该用JS构造器:与工厂模式、字面量的选择对比
2026-11-05 16:18:22
推荐几款轻量级JS照片墙开源库及对比
2026-11-05 15:56:19
JavaScript递归写法有哪些常见陷阱及避免方法
2026-11-05 14:53:38
JS数组浅拷贝与深拷贝怎么选?场景与方法总结
2026-11-05 14:41:02
p5.js 中 setup() 和 draw() 函数的执行机制详解
2026-11-05 12:32:38
