JavaScript中实例化与非实例化的区别与应用场景详解
引言
在学习 JavaScript 的过程中,很多同学都会遇到这样的问题:为什么有的函数直接调用就能用,而有的必须要通过 new 来实例化?
这背后其实就是 实例化 和 不实例化 的区别。本文就带你从概念、代码示例、应用场景几个方面,深入理解它们的不同。
一、什么是实例化?
实例化(Instantiation)指的是通过 构造函数(Constructor) 或 类(Class) 创建一个具体的对象实例(Instance)。
在 JavaScript 中,通常使用 new 关键字来完成实例化。例如:
function Person(name, age) {
this.name = name;
this.age = age;
}
const p1 = new Person("张三", 20); // 实例化
console.log(p1.name); // 张三
这里:
Person是一个构造函数;new Person("张三", 20)就是对Person的实例化,返回了一个具体的对象。
二、不实例化是什么?
所谓不实例化,就是直接调用函数,而不使用 new。此时函数只是作为普通函数执行,不会创建对象实例。
function Person(name, age) {
this.name = name;
this.age = age;
}
Person("李四", 22); // 不实例化
console.log(window.name); // 浏览器环境下 -> 李四
在上面的代码中:
- 没有
new,所以this指向全局对象(浏览器中是window,Node.js 中是global)。 - 导致属性
name、age被挂载到了全局对象上,而不是新建的对象实例中。
三、实例化和不实例化的区别
我们可以从几个角度来看它们的不同:
| 对比点 | 实例化(new 调用) | 不实例化(直接调用) |
|---|---|---|
| 返回值 | 返回一个对象实例 | 返回函数本身的返回值(若无返回值则是 undefined) |
| this 指向 | 指向新创建的对象 | 指向调用环境(严格模式下是 undefined,非严格模式下是 window) |
| 用途 | 创建对象,封装属性和方法 | 普通函数调用,执行逻辑或计算 |
| 内存结构 | 会在堆内存中创建一个独立的对象实例 | 没有独立对象实例,只是执行代码 |
| 适用场景 | 类、构造函数、面向对象开发 | 工具函数、业务逻辑函数 |
四、举个例子:类和工具函数
1. 构造函数/类(需要实例化)
class Animal {
constructor(type) {
this.type = type;
}
speak() {
console.log(`${this.type} 在叫`);
}
}
const dog = new Animal("狗"); // 实例化
dog.speak(); // 狗 在叫
这里必须使用 new,否则会报错:Class constructor Animal cannot be invoked without 'new'。
2. 工具函数(不需要实例化)
function add(a, b) {
return a + b;
}
console.log(add(1, 2)); // 3
像这种纯粹计算的函数,只需直接调用即可,不需要也不能实例化。
五、总结
- 实例化:用
new调用构造函数/类,返回对象实例,适合创建可复用的对象结构。 - 不实例化:直接调用函数,执行逻辑或返回结果,适合写工具函数或业务逻辑函数。
简单一句话概括:
要创建对象时用实例化;只是执行逻辑时不用实例化。
写在最后
在实际开发中,你可以根据需求来选择:
- 如果是 构造对象/封装属性方法 —— 用
new实例化; - 如果是 简单逻辑处理/工具函数 —— 直接调用,不需要实例化。
到此这篇关于JavaScript中实例化与非实例化的区别与应用场景详解的文章就介绍到这了,更多相关JavaScript实例化与非实例化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
这篇文章主要介绍了BootStrap 智能表单实战系列(二)BootStrap支持的类型简介 的相关资料,非常不错具有参考借鉴价值,感兴趣的朋友一起学习吧2016-06-06
JavaScript操作localStorage实现保存本地json文件
这篇文章主要为大家详细介绍了JavaScript如何操作localStorage实现保存本地json文件,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-02-02
JavaScript SHA512&SHA256加密算法详解
本文给大家分享的是javascript版的SHA512&SHA256加密算法的代码,以及用法,有需要的小伙伴可以参考下。2015-08-08
解决JSON.stringify()自动将中文转译成unicode的问题
下面小编就为大家分享一篇解决JSON.stringify()自动将中文转译成unicode的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01


最新评论