一道面试题引发的思考:理解 new 运算符

栏目: JavaScript · 发布时间: 5年前

内容简介:今天看到一道面试题,如下,问: 实例化说实话,第一反应我以为值为很显然,输出的结果是

今天看到一道面试题,如下,问: 实例化 Person 过程中, Person 返回什么(或者 p 等于什么)?

function Person(name) {
    this.name = name
    return name;
}
let p = new Person('Tom');
复制代码

说实话,第一反应我以为值为 'Tom' ,等到我把代码丢到控制台一输出,才明白我错了。天呐, new 运算符给无视掉了吗??? 撇开 new 的存在,我们修改下代码

function Person(name) {
    this.name = name
    return name;
}
let p = Person('Tom');
console.log(p);
复制代码

很显然,输出的结果是 'Tom' , 但是有 new 存在呢?接下去,我们来捋一捋。 首先,我先去MDN上搜索了 new 的定义

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

emmmm,相当晦涩难懂。

那我们试着写几个栗子看看结果吧

function Person1(name) {
  this.name = name;
  // 没有返回值
}

function Person2(name) {
  this.name = name;
  return name;
  // 返回非对象
}

function Person3(name) {
  this.name = name;
  return { a: 1 };
  // 返回对象
}

function Person4(name) {
  this.name = name;
  return null;
  // 返回null
}

var p1 = new Person1("aa");
var p2 = new Person2("bb");
var p3 = new Person3("cc");
var p4 = new Person4("dd");

console.log(p1); // Person1 {name: "aa"}
console.log(p2); // Person2 {name: "bb"}
console.log(p3); // {a: 1}
console.log(p4); // Person4 {name: "dd"}
复制代码

根据上面几个栗子,我们能得出结论:当使用 new 来创建对象||调用构造函数时,如果函数没有返回值|| 返回值是非对象,那么返回的就是构造函数实例后的对象;如果函数return对象,那么返回这个对象(特例: return null ,返回的也是构造函数实例后的对象而非 null )

我们接着看MDN 文档的解释,毕竟光光看这几个demo没有说服力。

一道面试题引发的思考:理解 new 运算符

一起来理解下 new 到底做了什么工作吧~ 就拿下面这个 demo 分析

function Person(name) {
  this.name = name;
  return {a: 1}
}
var p = new Person('fefeng')
复制代码

当调用 new Person(...) 时,会进行以下几步:

  • 首先是 继承自 Person.prototype 的新对象会被创建
  • 使用参数 'fefeng' 调用构造函数 Person , 并将 this 绑定到新创建的对象
  • Person 返回的对象就是 new 表达式的结果 =》 Person 返回的对象是 {a: 1} 所以 new 表达式的结果为 {a:1} ; 如果 Person 没有返回值(一般构造函数都不返回值)那么使用步骤1创建的对象,即==》 继承自 Person.prototype 的新对象

貌似照着文档能够些许理解了,倘若模拟实现 new 运算符更能深入理解 new 以下是 new 的模拟实现,代码来源 : JavaScript深入之new的模拟实现

function objectFactory() {
  var obj = new Object(),
  cons = [].shift.call(arguments)
  obj.__proto__ = cons.prototype
  var ret = cons.apply(obj, arguments)
  return typeof ret === 'object' ? ret|| obj : obj
}
function Person(name) {
  this.name = name;
  return {a: 1}
}
var p = objectFactory(Person, 'fefeng')
复制代码

当然了,学习别人的代码不能仅仅只是照搬过来,起码得理解这个代码吧。 使用

  • 首先是创建一个对象
  • cons 是调用 objectFactory 方法的第一个参数,即构造函数; 因为 shift 会改变原数组,所以改变后的 argument 即为调用构造函数的参数 (这里补充说明下: arguments 是一个对应于传递给函数的参数的类数组对象。)
  • obj 的原型指向构造函数, 这样 obj 就能访问到构造函数原型上的属性
  • 将构造函数 consthis 指向 obj ,这样 obj 能访问构造函数里的属性
  • 判断返回的值是不是一个对象,如果是对象即返回它(当然这里要处理 return null 的特例);如果不是对象就返回 obj (注意:这里的 obj 已经不是一个空对象)

如果你耐心看到了这里,那么十分感谢。如文章有错误,望给予指正~


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

HTML 5 与 CSS 3 权威指南

HTML 5 与 CSS 3 权威指南

陆凌牛 / 机械工业出版社华章公司 / 2011-4-7 / 69.00

如果你是一位有前瞻性的web前端工作者,那么你一定会从本书中受益,因为它就是专门为你打造的。 《HTML 5与CSS 3权威指南》内容系统而全面,详尽地讲解了html 5和css 3的所有新功能和新特性;技术新颖,所有知识点都紧跟html 5与css 3的最新发展动态(html 5和css 3仍在不断完善之中);实战性强(包含246个示例页面),不仅每个知识点都配有精心设计的小案例(便于动手......一起来看看 《HTML 5 与 CSS 3 权威指南》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

SHA 加密
SHA 加密

SHA 加密工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具