前端经典面试题解密:JS的new关键字都干了什么?

简介: new关键字在实例化获取对象时都做了什么?是一道经常出现在前端面试时的问题。如果只是简单的了解new关键字是实例化构造函数获取对象,是万万不能够的。更深入的层级发生了什么呢?同时面试官想从这道题里面考察什么呢?下面胡哥为各位小伙伴一一来解密。

前言


new关键字在实例化获取对象时都做了什么?是一道经常出现在前端面试时的问题。如果只是简单的了解new关键字是实例化构造函数获取对象,是万万不能够的。更深入的层级发生了什么呢?同时面试官想从这道题里面考察什么呢?下面胡哥为各位小伙伴一一来解密。


一、new关键字


new关键字的作用:通过new关键字实例化构造函数,获取对象。说一千道一万,不如来段代码看一看


// 定义构造函数
function Person (name, age) {
  this.name = name
  this.age = age
  this.say = function () {
    console.log(`my name is ${this.name}, my age is ${this.age}`)
  }
}
// 构造函数的原型属性和方法定义
Person.prototype.color = 'yellow'
Person.prototype.sayBye = function () {
  console.log('Bye!')
}
// 实例化
let p = new Person('胡小帅', 18)
console.log(p)
// 当前属性
console.log(p.name)
// 当前方法
p.say()
console.log(p.color)
// 原型方法
p.sayBye()


二、伪代码演示过程


通过new关键字实例化的对象p,具备了构造函数Person中this的属性:nameage,也具备了构造函数Person的原型prototype的属性color和方法sayBye。下面我们来通过伪代码来看看具体的实现过程。


1. 初始化新对象


var o = {}


2. 原型的执行,确定对象o的原型链


o.__proto__ = Person.prototype


3. 绑定this对象为o,传入参数;执行Person构造函数,进行属性和方法的赋值操作


Person.call(o, '胡小帅', 18)


4. 返回结果


注意:在通过该种方式获取对象时,最终不一定返回的是对象o,要看构造函数的返回值是什么。


如果函数返回的是基本类型值,实际会生成一个对象,返回o
如果是函数返回的是引用类型值,则实际返回的是该引用类型值


相关文章
|
1月前
|
缓存 前端开发 中间件
[go 面试] 前端请求到后端API的中间件流程解析
[go 面试] 前端请求到后端API的中间件流程解析
|
1月前
|
JavaScript 前端开发
常见的JS面试题
【8月更文挑战第5天】 常见的JS面试题
49 3
|
21天前
|
前端开发 开发者
new操作符背后的秘密:揭开Web前端对象创建的神秘面纱!
【8月更文挑战第23天】在Web前端开发中,`new`操作符是创建对象实例的核心。本文以`Person`构造函数为例,通过四个步骤解析`new`操作符的工作原理:创建空对象、设置新对象原型、执行构造函数并调整`this`指向、判断并返回最终对象。了解这些有助于开发者更好地理解对象实例化过程,从而编写出更规范、易维护的代码。
24 0
|
28天前
|
存储 XML 移动开发
前端大厂面试真题
前端大厂面试真题
|
24天前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
【8月更文挑战第18天】
25 2
|
24天前
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
19 0
|
26天前
|
存储 前端开发 JavaScript
44 个 React 前端面试问题
44 个 React 前端面试问题
|
1月前
|
存储 JavaScript 前端开发
|
1月前
|
Web App开发 存储 缓存
|
1月前
|
前端开发 容器
前端面试热门问题--浮动和清除浮动(CSS)
前端面试热门问题--浮动和清除浮动(CSS)