×

js中的new有什么作用呢?简单实例来说明下

作者:Web前端之家2021.11.23来源:Web前端之家浏览:113评论:0
关键词:newjs
微信公众号

微信公众号

js中的new有什么作用呢?

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。

语法

new constructor[([arguments])]

参数

  • constructor

  • 一个指定对象实例的类型的类或函数。

  • arguments

  • 一个用于被 constructor 调用的参数列表。

new 究竟干了什么事

上面说了new的作用是创建对象的实例,那么它究竟是怎么创建实例的,内部干了哪几件事?

以new Person()为例,当它执行时,会发生以下事情:

创建一个空的简单JS对象

const obj = {}

给这个对象添加属性__proto__,并将该属性链接到构造函数的原型对象

obj.__proto__ = Person.prototype

调用构造函数Person,并将this绑定到新创建的对象obj

Person.apply(obj)

如果构造函数没有显式返回一个对象,则返回新创建的对象,即obj。

模拟实现 new 运算符

如上所述,new运算符就干了这么4件事,下面我们就根据这4个步骤用函数来模拟实现new(面试手写代码)

const _new = function(constructor, ...args) {
    const obj = {}
    obj.__proto__ = constructor.prototype
    const res = constructor.apply(obj, args)
    // 这一步在"补充"中会详细解释
    return res instanceof Object ? res : obj
}

代码非常简单,就是按照上面4步,一步一步写就可以了。

另外,

ES5提供了Object.create方法,该方法可以创建一个对象,并让新对象的__proto__属性指向已经存在的对象。

所以我们可以使用这个方法合并1、2两步

const obj = Object.create(constructor.prototype)
// 等价于
const obj = {}
obj.__proto__ = constructor.prototype

补充:

  • 如果构造函数没有显式return(通常情况)那么person就是新创建的对象obj

  • 如果构造函数返回的不是一个对象,比如1、"abc" 那么person还是新创建的对象obj

function Person() {
    ...
   return 1
}

如果构造函数显式返回了一个对象,比如{}function() {}

那么person就不是新创建的对象obj了,而是显式return的这个对象

function Person() {
  // 函数也是对象
  return function() {}
}

所以我们在_new函数最后一句代码是:


return res instanceof Object ? res : obj

注意:模拟实现的函数_new传入的参数只能是构造函数,不能是类。

class Animal {  ...}_new(Animal)// 
会报错:Class constructor Animal cannot be invoked without 'new'// 类只能通过new来创建

总结

关于new内容就差不多,至于更加深入的知识,还得考大家自己去研究和探讨啦。

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/newjs20211123a2.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • Web前端之家

    可以的,有什么问题吗?...

  • 访客

    我就试试的...

  • a235

    不能比啊,老外赚钱就是多!...

  • Web前端之家

    备份是必须的,避免麻烦!...

  • a235

    总结得不错,正好用到,提前备份还是最靠谱啊!...

  • Web前端之家

    谢谢支持,请持续关注Web前端之家!...

  • 访客

    文章很棒,做即时通讯也可以试试【GoEasy】这个框架,官网文档详细还提供了各种demo,大大降低了...

  • Web前端之家

    是的,等其他人验证没问题再装吧,总会有第一个吃螃蟹的人,哈哈!!...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.1