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

更新日期: 2021-10-18阅读: 1.2k标签: new

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

来自:https://segmentfault.com/a/1190000040823916


链接: https://www.fly63.com/article/detial/10741

new.target属性_你可能不知道的 new.target

new 是构造函数生成实例的命令, ES6为 new 命令引入了 new.target属性。这个属性用于确定构造函数是怎么调用的。在构造函数中, 如果一个构造函数不是通过 new操作符调用的, new.target会返回 undefined。

new 操作符 做了什么?

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。假设Test是一个构造函数,通常在创建对象的实例时,要使用new,eg:test = new Test() , 那么在调用new的时候,发生了什么呢?

JS中的new操作符原理解析

1. 创建一个类的实例:创建一个空对象obj,然后把这个空对象的__proto__设置为Person.prototype(即构造函数的prototype);2. 初始化实例:构造函数Person被传入参数并调用,关键字this被设定指向该实例obj;3. 返回实例obj。

JS深度解析 new 原理及模拟实现

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。 ——(来自于MDN)new 创建的实例有以下 2 个特性:1、访问到构造函数里的属性;2、访问到原型里的属性

“写”一个js的new运算符

new 运算符 创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。比较好奇new运算符的原理,了解了下,分享给大家。自己写一个New()方法,

JS中new操作符源码实现

首先我们来看一下实例化一个对象做了浏览器做了什么事情,new的四步操作:1. 创建一个空对象2. 设置空对象的__proto__属性继承构造函数的prototype属性,也就是继承构造函数的原型对象上的公有属性和方法

你知道多少this,new,bind,call,apply?

那么什么是this,new,bind,call,apply呢?这些你都用过吗?掌握这些内容都是基础中的基础了。如果你不了解,那还不赶快去复习复习,上网查阅资料啥的!通过call,apply,bind可以改变this的指向

Js中new操作符的详细过程

理解new对象过程,需要提前了解原型及原型链的相关知识;我们都知道,JS当中创建对象使用的是原型设计模式,即使用new操作符调用构造函数,这里先看一个例子:

js之new的原理

对于创建一个对象来说,更推荐使用字面量的方式创建对象(无论性能上还是可读性)。因为你使用 new Object() 的方式创建对象需要通过作用域链一层层找到 Object

JS中NEW的实现原理及重写

上面的代码,我们首先创建了一个函数,如果是用面向对象的说法就是创建了一个Function类的实例,如果直接执行这个函数,那它就是一个普通的函数,如果用new执行,则这个函数被称为一个自定义的类。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!