js构造函数创建对象是否加new问题

yizhihongxing

当使用 JavaScript 构造函数创建对象时,可以选择是否使用 new 关键字。如果使用了 new 关键字,则会创建一个新的对象并将其绑定到 this 上,最后返回这个新的对象。如果没有使用 new 关键字,则 this 被绑定到全局对象上,这可能导致一些意外的问题。

下面给出两个示例展示使用和不使用 new 关键字的区别。

示例一

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

var person1 = new Person('John');
console.log(person1.name);  // 输出 "John"

var person2 = Person('Jane');
console.log(person2);  // 输出 "undefined"
console.log(name);  // 输出 "Jane"

上述代码定义了一个 Person 构造函数,它接受一个名为 name 的参数,并将其储存在对象的 name 属性中。

在第一个调用中,我们使用了 new 关键字创建了一个新的 Person 对象,并将其储存在变量 person1 中,因此 person1.name 返回了正确的值。

在第二个调用中,我们没有使用 new 关键字创建对象,而是直接调用了 Person 函数,此时 this 绑定到了全局对象上,因此 person2undefined,并且 name 变量被设置为了 'Jane'

示例二

function Dog(name) {
  if (this instanceof Dog) {
    this.name = name;
  } else {
    throw new Error('必须使用 new 关键字创建对象');
  }
}

var dog1 = new Dog('旺财');
console.log(dog1.name);  // 输出 "旺财"

var dog2 = Dog('小黄');

上述代码定义了一个 Dog 构造函数,如果它被调用时 this 绑定到 Dog,则会将 name 储存在对象的属性中,否则将抛出一个错误提示必须使用 new 关键字创建对象。

在第一个调用中,我们使用了 new 关键字创建了一个新的 Dog 对象,并将其储存在变量 dog1 中,因此 dog1.name 返回了正确的值。

在第二个调用中,我们没有使用 new 关键字创建对象,因此会抛出一个错误提示必须使用 new 关键字创建对象。

综上所述,使用 new 关键字创建对象可以避免很多意外的问题。因此,建议使用 new 关键字来创建对象。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js构造函数创建对象是否加new问题 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • Firefox中使用outerHTML的2种解决方法

    下面是详细讲解“Firefox中使用outerHTML的2种解决方法”的完整攻略。 问题描述 当我们想要用 Element.outerHTML 获取某个元素以及其所有子元素的HTML代码时,发现在Firefox浏览器中会出现错误,而在其他浏览器中并不会。经过调查,发现这是因为在Firefox中,outerHTML 并没有被正确实现,导致代码执行出错。 解决方…

    JavaScript 2023年6月11日
    00
  • 纯js实现div内图片自适应大小(已测试,兼容火狐)

    下面是纯js实现div内图片自适应大小的完整攻略: 目录 实现思路 代码实现 示例一 示例二 实现思路 实现div内图片自适应大小,需要解决以下两个问题: 如何获取图片的宽度和高度? 如何在图片加载完成后将其按照正确的比例缩放到合适的大小? 因此,我们的实现思路是: 使用JS监听图片的load事件,在图片加载完成后获取其宽度和高度。 判断图片的宽高比例与容器…

    JavaScript 2023年6月11日
    00
  • js 键盘记录实现(兼容FireFox和IE)

    实现JS键盘记录兼容FireFox和IE的方法有很多种。下面我将为大家介绍一种比较常用的实现方式。 1. 监听键盘事件 要实现JS键盘记录,首先我们需要监听用户的键盘事件。一般情况下,用户在按下键盘上的按键时,会触发以下三种事件: keydown: 在键盘按下时触发,可能会连续触发多次。 keyup: 在键盘松开时触发,可能会连续触发多次。 keypress…

    JavaScript 2023年6月11日
    00
  • Javascript和Java语言有什么关系?两种语言间的异同比较

    JavaScript和Java都是编程语言,但它们具有不同的特性和用途。下面详细讲解JavaScript和Java语言之间的关系,以及两者之间的异同点。 JavaScript和Java的关系 JavaScript和Java两个语言之间除了单词中有”java”的字眼以外,两者并没有任何关联。Java是一种面向对象、跨平台的编程语言,适用范围涵盖从嵌入式设备到企…

    JavaScript 2023年6月11日
    00
  • JS的框架Polymer中的dom-if和is属性使用说明

    Polymer是一个基于Web Components标准的JavaScript框架,它提供了一些常用的组件和工具,例如dom-if和is属性。 dom-if dom-if是Polymer中的一个条件渲染组件,它可以根据条件动态地显示或隐藏元素。我们可以使用dom-if元素包裹需要进行条件渲染的元素,并设置if属性来控制是否显示该元素。当if属性返回true时…

    JavaScript 2023年6月10日
    00
  • HTML5中Localstorage的使用教程

    HTML5中Localstorage是用于在客户端浏览器上存储数据的API,这使得我们可以在浏览器中存储和检索数据,而不需要服务器的帮助。这篇文章将会介绍HTML5 Localstorage在Web应用程序中的使用方式,包括了创建,添加和检索基于关键字的数据,并且提供了两个本地存储的例子,帮助读者更好地理解Localstorage的使用。 简介 Locals…

    JavaScript 2023年6月11日
    00
  • 分享5个好用的javascript文件上传插件

    下面是分享5个好用的JavaScript文件上传插件的攻略: 1. 收集并比较不同的插件 JavaScript文件上传插件有很多,但是并不是所有插件都适合你的项目。因此,可以先收集一些常用的插件,并对它们进行评估和比较,以找到最适合你的项目的插件。下面是一些优秀的JavaScript文件上传插件: Dropzone.js Blueimp jQuery Fil…

    JavaScript 2023年5月27日
    00
  • javascript Keycode对照表

    下面我来为你详细讲解“JavaScript KeyCode对照表”的完整攻略。 什么是KeyCode对照表? KeyCode 是一个用来表示按键代码的数字值。在Web开发中,我们可以利用KeyCode来检测用户按了哪个键。而 KeyCode对照表 是一个清单,包含了所有可检测的键的代码及其对应的常量值。在编写JavaScript事件处理程序时,遵循KeyCo…

    JavaScript 2023年5月20日
    00
合作推广
合作推广
分享本页
返回顶部