欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-05-04 11:09:25
前言 new关键字在实例化获取对象时都做了什么?是一道经常出现在前端面试时的问题。如果只是简单的了解new关键字是实例化构造函数获取对象,是万万不能够的。更深入的层级发生了什么呢?同时面试官想从这道题里面考察什么呢?下面胡哥为各位小伙伴一一来解密。 一、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
    如果是函数返回的是引用类型值,则实际返回的是该引用类型值
    

后记

以上就是胡哥今天给大家分享的内容,喜欢的小伙伴记得收藏转发、点击右下角按钮在看,推荐给更多小伙伴呦,欢迎多多留言交流...

胡哥有话说,一个有技术,有情怀的胡哥!现任京东前端攻城狮一枚。
胡哥有话说,专注于大前端技术领域,分享前端系统架构,框架实现原理,最新最高效的技术实践!

长按扫码关注,更帅更漂亮呦!关注胡哥有话说公众号,可与胡哥继续深入交流呦!

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