JavaScript new一个函数相当于执行这个函数吗

 更新时间:2025年07月28日 09:28:16   作者:岛泪  
在JavaScript中new操作符用于创建一个用户自定义的对象类型的实例或具有构造函数的内置对象类型之一,这篇文章主要介绍了JavaScript new一个函数是不是相当于执行这个函数的相关资料,需要的朋友可以参考下

前言

在 JavaScript 中,使用 new 关键字调用函数(构造函数)与直接执行函数有本质区别,不是简单的函数执行。主要区别如下:

1.new操作符的完整执行过程

function MyClass(name) {
  this.name = name;
}

const obj = new MyClass("John"); // 不是简单执行函数!

实际发生的步骤:

  1. 创建新对象:创建一个空的纯 JavaScript 对象 {}

  2. 绑定原型:将新对象的原型指向构造函数的 prototype 属性
    obj.__proto__ = MyClass.prototype

  3. 绑定 this:将构造函数内的 this 指向这个新对象

  4. 执行函数体:像普通函数一样执行构造函数代码(此时 this 指向新对象)

  5. 返回对象

    • 如果构造函数未返回对象 → 自动返回新创建的对象

    • 如果返回非对象 → 仍返回新创建的对象

    • 如果返回对象 → 则替代新对象(实际返回该对象)

2. 与直接执行的对比

特性new MyClass()MyClass()
this 指向指向新创建的实例对象严格模式:undefined
非严格模式:全局对象(如 window
返回值自动返回新对象(除非构造函数返回对象)返回函数的显式返回值(无返回则为 undefined
原型链自动连接构造函数的原型无原型链建立
副作用安全创建实例可能污染全局变量(非严格模式)

3. 关键区别示例

function Person(name) {
  this.name = name;
}

// ✅ 正确用法:new 操作符
const p1 = new Person("Alice");
console.log(p1.name); // "Alice"(实例属性)

// ❌ 直接调用(非严格模式)
const p2 = Person("Bob");
console.log(p2);      // undefined(函数无返回值)
console.log(window.name); // "Bob"(污染全局!)

// ❌ 直接调用(严格模式)
"use strict";
const p3 = Person("Chris"); // 抛出错误:Cannot set property 'name' of undefined

4. 特殊情况的返回值

function A() { return { flag: true }; }
function B() { return 42; } // 返回原始值会被忽略

console.log(new A()); // { flag: true }(返回对象)
console.log(new B()); // {}(返回原始值无效,仍生成新对象)

总结:

  • new 是构造调用:创建新对象 + 绑定原型链 + 绑定 this + 返回实例

  • 直接执行是普通调用:单纯执行函数代码,无对象创建和原型绑定

💡 最佳实践:构造函数首字母大写(如 Person),提醒调用者必须使用 new。现代 JS 可用 class 语法避免混淆。

到此这篇关于JavaScript new一个函数相当于执行这个函数的文章就介绍到这了,更多相关js new函数是执行函数吗内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript控制图片360度旋转代码

    JavaScript控制图片360度旋转代码

    JavaScript控制一张图片旋转,每次旋转90度,可旋转一周360度,以前没见到过,也不知道有没有用,奉献给大家,希望喜欢
    2011-12-12
  • js+canvas实现刮刮奖功能

    js+canvas实现刮刮奖功能

    这篇文章主要为大家详细介绍了js+canvas实现刮刮奖功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 简述Matlab中size()函数的用法

    简述Matlab中size()函数的用法

    size()函数用来获取矩阵的行数和列数。接下来通过本文给大家介绍matlab中size()函数的用法,需要的朋友一起学习吧
    2016-03-03
  • javascript截取字符串小结

    javascript截取字符串小结

    本文章收藏了多种字符截取的方法,包括常用的js截取字符串,截取字符串函数及常用的截取使用,非常的简单实用,有需要的小伙伴可以参考下。
    2015-04-04
  • javascript判断是手机还是电脑访问网页的简单实例分享

    javascript判断是手机还是电脑访问网页的简单实例分享

    在智能手机越来越普及甚至是泛滥的时候,确实给大家的生活带来了很大的方便,但是对于web前端设计师来说,可就麻烦多了,现在很多的网站在制作过程中都要考虑到手机访问的问题,那么我们如何来判断客户端是不是手机呢,下面分享个例子吧
    2014-06-06
  • p5.js实现声音控制警察抓小偷游戏示例解析

    p5.js实现声音控制警察抓小偷游戏示例解析

    这篇文章主要为大家介绍了p5.js实现声音控制警察抓小偷游戏示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • js大数相加出现精度丢失、运算错误的问题

    js大数相加出现精度丢失、运算错误的问题

    js中数字类型长度达到16位时,进行加减乘除运算,会出现精度丢失,运算结果错误的问题,本文讲述精度丢失的原因及解决办法
    2023-08-08
  • 基于javascript实现表格的简单操作

    基于javascript实现表格的简单操作

    这篇文章主要为大家详细介绍了基于javascript实现表格的简单操作,具有一定的参考价值,感兴趣的朋友可以参考一下
    2016-05-05
  • webpack5 常用插件使用问题小结

    webpack5 常用插件使用问题小结

    webpack 是一个模块打包器,这篇文章主要介绍了webpack5 常用插件使用问题小结,每次打包完都需要手动删除掉dist文件目录,使用CleanWebpackPlugin就可自动清除dist目录,感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • JavaScript编写猜拳游戏

    JavaScript编写猜拳游戏

    这篇文章主要为大家详细介绍了JavaScript编写猜拳游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11

最新评论