JavaScript中实例化与非实例化的区别与应用场景详解

 更新时间:2025年09月01日 10:21:07   作者:编程随想_Code  
在学习 JavaScript 的过程中,很多同学都会遇到这样的问题:为什么有的函数直接调用就能用,而有的必须要通过 new 来实例化,这背后其实就是 实例化 和 不实例化 的区别,本文就带你从概念、代码示例、应用场景几个方面深入探究,需要的朋友可以参考下

引言

在学习 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)。
  • 导致属性 nameage 被挂载到了全局对象上,而不是新建的对象实例中。

三、实例化和不实例化的区别

我们可以从几个角度来看它们的不同:

对比点实例化(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实例化与非实例化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS函数进阶之prototy用法实例分析

    JS函数进阶之prototy用法实例分析

    这篇文章主要介绍了JS函数进阶之prototy用法,结合实例形式分析了JavaScript函数中使用prototy扩展属性相关操作技巧,需要的朋友可以参考下
    2020-01-01
  • 5秒后跳转到另一个页面的js代码

    5秒后跳转到另一个页面的js代码

    跳转到另一个页面的方法有很多,在本文将为大家详细介绍下js中如何实现5秒后跳转到另一个页面,感兴趣的朋友可不要错过
    2013-10-10
  • JavaScript常见数组方法之如何转置矩阵

    JavaScript常见数组方法之如何转置矩阵

    这篇文章主要给大家介绍了关于JavaScript常见数组方法之如何转置矩阵的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-03-03
  • BootStrap 智能表单实战系列(二)BootStrap支持的类型简介

    BootStrap 智能表单实战系列(二)BootStrap支持的类型简介

    这篇文章主要介绍了BootStrap 智能表单实战系列(二)BootStrap支持的类型简介 的相关资料,非常不错具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-06-06
  • 深入解析ECMAScript 2023 中的新数组方法

    深入解析ECMAScript 2023 中的新数组方法

    ECMAScript 是一种标准化的脚本语言,它是 JavaScript 的规范。ECMAScript 2023 是 JavaScript 编程语言的更新,旨在带来改进并使 JavaScript 程序可预测和可维护,这篇文章主要介绍了探索 ECMAScript 2023 中的新数组方法,需要的朋友可以参考下
    2023-12-12
  • two.js之实现动画效果示例

    two.js之实现动画效果示例

    本篇文章主要介绍了two.js之实现动画效果示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • JavaScript操作localStorage实现保存本地json文件

    JavaScript操作localStorage实现保存本地json文件

    这篇文章主要为大家详细介绍了JavaScript如何操作localStorage实现保存本地json文件,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-02-02
  • JavaScript SHA512&SHA256加密算法详解

    JavaScript SHA512&SHA256加密算法详解

    本文给大家分享的是javascript版的SHA512&SHA256加密算法的代码,以及用法,有需要的小伙伴可以参考下。
    2015-08-08
  • 如何让div span等元素能响应键盘事件操作指南

    如何让div span等元素能响应键盘事件操作指南

    在我这几天的工作中遇到了一个问题,我有一个可编辑的div,并且在DIV里面还有一个可编辑的span,我想要让span能响应键盘事,想实现这种效果,应该如何实践呢
    2012-11-11
  • 解决JSON.stringify()自动将中文转译成unicode的问题

    解决JSON.stringify()自动将中文转译成unicode的问题

    下面小编就为大家分享一篇解决JSON.stringify()自动将中文转译成unicode的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01

最新评论