龙空技术网

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

千锋IT教育 72

前言:

今天你们对“jsnew关键字”大体比较关切,我们都需要分析一些“jsnew关键字”的相关资讯。那么小编也在网上网罗了一些关于“jsnew关键字””的相关资讯,希望朋友们能喜欢,朋友们一起来学习一下吧!

前言

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的属性:name、age,也具备了构造函数Person的原型prototype的属性color和方法sayBye。下面我们来通过伪代码来看看具体的实现过程。

初始化新对象var o = {}原型的执行,确定对象o的原型链o.__proto__ = Person.prototype绑定this对象为o,传入参数;执行Person构造函数,进行属性和方法的赋值操作Person.call(o, '胡小帅', 18)返回结果注意:在通过该种方式获取对象时,最终不一定返回的是对象o,要看构造函数的返回值是什么。如果函数返回的是基本类型值,实际会生成一个对象,返回o 如果是函数返回的是引用类型值,则实际返回的是该引用类型值

更多的教程觉尘风也会继续为大家更新!伙伴们有不清楚的地方,可以留言

留言回复:前端,即可领取全套前端视频学习教程!

标签: #jsnew关键字