2

前端面试之new操作符具体都干了什么?

 2 years ago
source link: https://segmentfault.com/a/1190000040823916
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

new操作符具体都干了什么?

  • (1) 首先创建了一个空对象。
  • (2) 设置原型,将对象的原型设置为函数的prototype对象。
  • (3) 让函数的this指向这个对象,执行构造函数中的代码
  • (4) 判断函数的返回值类型,如果是值类型,则返回创建的对象,如果是引用类型,则返回这个引用类型的对象。

    实现一下?

    function objectFactory(){
      let newObject = null,
      construct = Array.prototype.shift.call(anguments),
      result = null
    
      // 参数判断
      if(typeof construct !== 'function'){
          console.error('type error')
          return
      }
    
      // 新建一个空对象,对象的原型为构造函数的prototype对象
      newObject = Object.create(construct.prototype)
      // 将this 指向这个新建对象,并执行
      result = construct.apply(newObject,arguments)
    
      // 判断返回对象
      if flag = result && (typeof result === 'object' || typeof result === 'boolean')
      return flag ? result : newObject
    }

    判断返回值类型?

     对于返回值来讲,当构造函数返回的是基本数据类型,那么此时返回的结果是我们所创建的对象newObject,当构造函数返回的是引用类型object || function时,返回的是result值,此时通过apply函数又重新绑定了this指向,也就是说构造函数返回的是什么引用类型的值,当前返回值类型就是什么。
     具体代码可见:

    // 构造函数返回引用数据类型Object
    let foo = objectFactory([function Foo(){ this.name = 'name'; return new Object("name") },1])
    console.log(foo,"--------")  // [String: 'name'] --------
    // 当构造函数返回值为Object("name"),所以返回值此时返回result,程序又通过apply改变了this的指向,指向了构造函数的返回值Object('name'),所以此时使用new操作符的返回值为引用数据类型[String: 'name']
    
    // 构造函数返回基本数据类型String
    let foo = objectFactory([function Foo(){ this.name = 'name'; return 'sss' },1])
    console.log(foo,"--------")  // Foo { name: 'name' } --------
    // 当构造函数返回值为字符串,所以此时返回newObject,则此时的返回值为Foo

Recommend

  • 144
    • 掘金 juejin.im 6 years ago
    • Cache

    前端面试之webpack篇

    还是以前一样,有些概念面试可能会考,我都用*标记了出来,两句话就总结清楚其余的地方如果你想了解webpack,就仔细看看,虽然本教程不能让你webpack玩的很6,但是懂操作流程够了。面试你一般问你webpack的原理,Loader的原理,你有用那些优化措施前

  • 86
    • 掘金 juejin.im 6 years ago
    • Cache

    前端面试之js相关问题(一)

    最近我也是经历过面试别人和去面试的人了,总结几个常被提及的面试问题,做一下解答和备忘。JavaScript 中 this 是如何工作的 ?先来看看这个题目:var x = 0; var foo = { x:1, bar:{ x:2, baz: function () {...

  • 94
    • 掘金 juejin.im 6 years ago
    • Cache

    前端面试之js相关问题(二)

    上一篇我们讲到了,在前端面试的时候常被问到的函数及函数作用域的问题。今天这篇我们讲js的一个比较重要的甚至在编程的世界都很重要的问题 面向对象 。在JavaScript中一切都是对象吗?“一切皆对象!” 大家都对此深信不疑。其实不然,这里面带有很多的语言陷阱,

  • 42
    • blog.poetries.top 5 years ago
    • Cache

    前端面试之MVVM浅析

    1.2 vue 实现 todo-list

  • 53
    • blog.poetries.top 5 years ago
    • Cache

    前端面试之组件化

    视图 数据 变化逻辑

  • 54
    • blog.poetries.top 5 years ago
    • Cache

    前端面试之hybrid

    hybrid server 1.2 hybrid 存在价...

  • 56
    • 掘金 juejin.im 5 years ago
    • Cache

    前端面试之BFC

    什么是BFC BFC(块格式化上下文): 是Web页面可视化渲染CSS的一部分, 是布局过程中生成块级盒子的区域。也是浮动元素与其他元素的交互限定区域。 简单理解就是具备BFC特性的元素, 就像被一个容器所包裹, 容器内的元素在布局上不会影响外面的元素。 BF

  • 55
    • 掘金 juejin.im 4 years ago
    • Cache

    前端面试之手写代码

    本系列会从面试的角度出发围绕JavaScript,Node.js(npm包)以及框架三个方面来对常见的模拟实现进行总结,具体源代码放在github项目上,长期更新和维护 数组去重 (一维)数组去重最原始的方法就是使用双层循环,分别循环原始数组和新建数组;或者

  • 22
    • 微信 mp.weixin.qq.com 4 years ago
    • Cache

    前端面试之彻底搞懂this指向

    this是JavaScript中的一个关键字,但是又一个相对比较特别的关键字,不像function、var、for、if这些关键字一样,可以很清楚的搞清楚它到底是如何使用的。 this会在执行上下文中绑定一个对象,但是是根据什么条件绑定的呢?在不...

  • 11

    原文地址:码农在新加坡的个人博客 后端面试系列将剖析后端面试中常考技术点,用尽量短的篇幅把一个一个技术点呈现出来。 关于回表查询,是MySQL...

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK