首页 > web前端 > js教程 > 正文

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

原创 2017-08-08 13:54:30 0 818
赞助会员专享特权


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中文网其它相关文章!

php中文网最新课程二维码
  • 相关标签:JavaScript js 实例
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • 原生javascript实现分享到朋友圈功能 支持ios和android_javascript技巧
  • jQuery链式调用与show知识浅析_jquery
  • JS实现登录页面记住密码和enter键登录方法推荐_javascript技巧
  • BootstrapTable与KnockoutJS相结合实现增删改查功能【一】_javascript技巧
  • JavaScript中构造函数与new操作符的实例详解
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    作者信息

    黄舟

    人生最曼妙的风景,竟是内心的淡定与从容!

    最近文章
    jQuery中关于bind()函数详解 454
    php实现字符串匹配算法之sunday算法的示例 698
    css中关于hideFocus的使用详解 779

    相关视频教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 相关视频章节