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

胡哥有话说 等级 746 0 0

前言

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关键字都干了什么?

收藏
评论区

相关推荐

js去除字符串
js去除字符串js<DOCTYPE html<html<head <title</title</head<body</body<script type"text/javascript" function delHtmlTag(str){   return str.replace(/<^/g,""); } var s
只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
JS 折线图
JS 折线图  echarts 折线图。需要引入:echarts.min.js <script src="${ctxStatic}/common/echarts.min.js" charset="utf-8" type="text/javascript"></script> JS调用后台方法,得到数据 Map<String, Obj
JSON学习笔记(二、语法)
#### JSON和js关系 欲学JSON先学js,那么JSON和js的关系是什么样的呢? .JSON 使用 JavaScript 语法来描述数据对象,但是 JSON 仍然独立于语言和平台。 .JSON 语法是 JavaScript 语法的子集 #### 基本语法 .数据在名称/值对中 .数据由逗号分隔 .大括号保存对象 .中括号保
JS导出页面为PDF文件,该如何操作?来看一眼就明白啦!
废话不多说,直接上代码。 1.资源文件或依赖 <script type="text/javascript" src="https://my.oschina.net//u/4265132/blog/4054317/js/canvg2.js"></script><script type="text/javascript" src="https://m
JS的常用属性
JS-------定义:基于事件和对象驱动,并具有安全性能的脚本语言。 引入:<script  type=”text/javascript”>具体js代码</script> <script  type=”text/javascript” src=”js文件”></script> 大小写敏感:例如:A与a是两个不同的东东 注释://  单
java中ajax的用法简单案例
1.index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery-2.1.0.js">
Html5添加三联切换仿3D效果旋转木马jQuery插件教程
一、使用方法 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/gallery.js"></script>    二、Html结构 <div id="wrapper"> <div id="mai
JQValidate使用说明
JQuery Validate使用总结: 一、导入js库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jquery.validate.js" type="text/javascript"></script> 二、默认校验规则
JQuery
一、jq简介 jq其实就是js的一个文件。 二、jq书写步骤 1、先引入jq文件(min的文件) <script type="text/javascript" src="file:///C|/jquery/jquery-3.3.1.min.js"></script> 2、换新的一行写js代码 <script type="text/javascri
JS前端图形化插件之利器Gojs组件(php中文网)
JS前端图形化插件之利器Gojs组件(php中文网) ========================== 一、总结 ---- ### 一句话总结:php中文网我可以好好走一波 二、JS前端图形化插件之利器Gojs组件 -------------------- 参考: JS前端图形化插件之利器Gojs组件-js教程-PHP中文网 http://
JavaScaript学习笔记第(一)
js由三部分组成,分别是ECMAScript、DOM、BOM 其中ECMAScript规定了js的语法 js是一门解释型语言、脚本语言、动态类型语言、基于对象语言 书写js代码和CSS一样,有三个书写的地方,第一个是使用<script>标签,再<sccript>标签中书写js代码,标签一般都在body标签中的末尾,第二个地方是书写再结构里,html标签
JavaScript学习笔记
JavaScript学习笔记 ============== 和HTML和CSS不一样,它是一门编程语言。 JS简介 ---- JS是一个客户端脚本语言,不需要编译,每一个浏览器都有JS的解析引擎。可以增强用户和HTML页面的交互,使网页产生动态。 JS的生成是在当时网速所限,必须在客户端就完成一些表单的校验等工作以减少客户端和服务器端的通信次数的实际
Springboot+ajax前后端传参
记录一下Springboot前后端传参方式 基础环境:   Idea2018.3.2   maven3.6.1   jsp   js,ajax   Springboot 代码:   js: $(document).ready(function() { //添加用户信息,点击事件 $('#su
Springmvc异步上传文件
<script src="js/jquery.js" type="text/javascript"></script><script src="js/jquery.ext.js" type="text/javascript"></script><script src="js/jquery.form.js" type="text/javascript"