登录  /  注册
首页 > web前端 > js教程 > 正文

JavaScript中构造函数与new操作符的实例详解

黄舟
发布: 2017-08-08 13:54:30
原创
3715人浏览过


JavaScript中构造函数与new操作符的实例详解

{…}语法允许创建一个对象,但如果需要创建多个类似的对象,则我们需要使用构造函数和“new”操作符。

构造函数

构造函数技术上就是正常的函数,但一般有两个约定:
1、他们的名称第一个字母大写。
2、他们应该仅仅使用new操作符执行。

示例:

function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User("Jack");

alert(user.name); // Jack
alert(user.isAdmin); // false
登录后复制

我们来看执行new User()时背后到底做了什么?
1、首先创建一个空对象,然后赋值给this。
2、执行函数,通常修改this对象,增加一些新的属性。
3、this被返回。

换句话说,new User() 内容如下代码所示:

function User(name) {
  // this = {};  (implicitly)

  // we add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}
登录后复制

所以 new User("Jack") 的结果和下面代码一致:

let user = {
  name: "Jack",
  isAdmin: false
};
登录后复制

现在我们想创建其他对象,我们可以使用new User("Ann") ,new User("Alice") 等。比每次使用文字描述对象方式更简短,且易读。
这时构造函数的主要目的——————实现创建对象的代码重用。

让我们再次注意:
技术上,任何函数都可以用作构造器,即任何函数都可以使用new调用,并且也执行上面描述的算法。
首字母大写只是一个常规约定,使其更清晰说明其为构造韩式,应该使用new调用。

new function(){…}
如果我们有多行代码,用于创建一个复杂对象,我们可以包装他们使用构造函数,代码如下:

  let user = new function() { 
     this.name = “John”; 
     this.isAdmin = false;
  // ...other code for user creation
  // maybe complex logic and statements
  // local variables etc
};
登录后复制

该构造器不能被再次调用,因为没有被保存,仅仅被调用创建对象。这个技巧的母的只是为了封装单个复杂对象代码。

双重使用构造器: new.target

函数内部,我们可以检查其调用方式是否使用new方式。使用一个特殊的属性new.target可以。
普通调用其值为空,通过new调用其值为该函数。

function User() {
  alert(new.target);
}

User(); // undefined
new User(); // function User { ... }
登录后复制

下面代码可以实现使用常规方式和new操作方式效果一致。

function User(name) {
  if (!new.target) { // if you run me without new
    return new User(name); // ...I will add new for you
  }

  this.name = name;
}

let john = User("John"); // redirects call to new User
alert(john.name); // John
登录后复制

这个方法在一些库中使用,为了使代码更加灵活。但到处使用并非好事,对熟悉User对象内部情况不够明显。

构造器返回值

通常构造器无需返回值语句。它的任务是往this对象中写一些必要内容,然后自动返回之。
但如果有return语句,那么规则很简单:
- 如果return返回一个对象,那么则代替this被返回。
- 如果return返回原始类型,则被忽略,仍然返回this。

也就是说,return要么返回对象,要么返回this,下面示例代替this返回对象,示例如下:

function BigUser() {

  this.name = "John";

  return { name: "Godzilla" };  // <-- returns an object
}

alert( new BigUser().name );  // Godzilla, got that object
登录后复制

这个示例return空,或在写原始类型,其实都不影响。

function SmallUser() {

  this.name = "John";

  return; // finishes the execution, returns this

  // ...

}

alert( new SmallUser().name );  // John
登录后复制

大多数构造函数无需返回,这里提醒这种特殊行为,仅仅为了知识完整性。

忽略括号
顺便说下,调用构造函数是,如果没有参数,我们可以省略对象标识后面的括号。

let user = new User; // <-- no brackets
// same as
let user = new User();
登录后复制

忽略括号并不是一个好的代码风格,但规范中是允许的。

构造器中的方法

使用构造函数创建对象提供了很大的灵活性,提供参数可以定义不同的对象。
当然,我们不仅给this增加属性,也可以增加方法。

下面示例创建对象,使用name参数,并增加一个方法sayHi:

function User(name) {
  this.name = name;

  this.sayHi = function() {
    alert( "My name is: " + this.name );
  };
}

let john = new User("John");

john.sayHi(); // My name is: John

/*
john = {
   name: "John",
   sayHi: function() { ... }
}
*/
登录后复制

总结

  • 构造函数或简称构造器,是普通函数,但有一般约定,名称第一个字母大写。

  • 构造函数使用new调用,即开始创建一个空this对象,然后返回填充内容的this。

我们能使用构造函数创建多个类似对象,当日内容不仅这些,后面进一步说明。
Javascript给一些内置对象提供了构造函数,如日期的Date,集合Set等。

以上就是JavaScript中构造函数与new操作符的实例详解的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号