JavaScript面试题

本文涉及的产品
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
简介: 1. new一个函数发生了什么?2. Proxy和Object.defineProperty区别3. 说一下cookie sessionStorage localStorage 区别?4. call、apply、bind的区别5. arguments是一个类数组(array-like)对象,用于接受所有传递给函数的参数6. JS数据类型判断7. 回流和重绘8. JavaScript数据类型9. 浏览器渲染页面的过程10. 输入URL到页面加载的过程

1. new一个函数发生了什么?

  1. 在内存空间中创建一个新的空对象
  2. 这个对象的[[prototype]] 属性(__proto__) 指向该构造函数的prototype
  3. 构造函数的this会指向创建出来的对象
  4. 会指向函数内部代码
  5. 自动返回创建出来的对象
functionPerson() {
this.name=name    }
constp=newPerson()
console.log(p.__proto__===Person.prototype) //true// 等同于上面console.log(Object.getPrototypeOf(p) ===Person.prototype)

2. Proxy和Object.defineProperty区别

  1. Object.definProperty监听的是对象的属性,而Proxy监听的是对象本身
  2. 使用Object.definProperty需要遍历对象的每个属性,而Proxy则直接代理对象,不需要遍历操作
  3. Proxy对新增属性也可以监听,Object.defineProperty不可以(只能对设置和访问监听)
  4. Proxy可以监听数组和函数的变化

Object.defineProperty:
letobj= {
name:'coder',
age:18    }
Object.defineProperty(obj,'name', {
configurable:false ,//告诉js引擎,obj对象的name属性不可以被删除enumerable:false,//是否可以枚举 for .. in  Object.keys()writable:false,//是否可以修改    })
// delete obj.nameobj.name='hello'console.log(obj)
constobj= {
name: "why",
age: 18,
heieht: 1.88    }
Object.keys(obj).forEach(item=> {
letvalue=obj[item]
Object.defineProperty(obj, item, {
set(newvalue) {
value=newvalue        },
get() {
returnvalue        }
      })
    })


/

// Proxy和Reflect:constobj= {
name: 'why',
age: 18    }
constobjProxy=newProxy(obj, {
set(target, prop, newvalue, receiver) {
constisSuccess=Reflect.set(target, prop, newvalue, receiver)
if (isSuccess) {
console.log(prop, "修改成功")
        } else {
console.log(prop, "修改失败")
        }
      },
get(target, props, receiver) {
returntarget[props]
      }
    })
objProxy.name='kobe'console.log(objProxy)

3. 说一下cookie sessionStorage localStorage 区别?

相同

  1. 都是浏览器存储
  2. 都存储在浏览器本地


区别

  1. cookie前后端都可以写入,sessionStorage以及localStorage都是由前端写入
  2. cookie的生命周期是从写入时就设置好的,lo
  3. calStorage是永久缓存,除非手动删除,sessionStorage是会话缓存,关闭浏览器就自动清除
  4. cookie存储空间大小约4kb,sessionStorage及localStorage空间比较大,大约5M
  5. 三者的数据都遵从同源策略

4. call、apply、bind的区别

  1. call和apply的区别是传递的参数
  2. call可以接收多个参数,而apply只能接受数组
  3. bind返回的是一个函数,需要再调用一次

5. arguments是一个类数组(array-like)对象,用于接受所有传递给函数的参数

“类数组”意味着 arguments 有 长度属性 并且属性的索引是从零开始的,但是它没有 Array的 内置方法,例如 forEach()map()都是没有的。

functionfunc1(a, b, c) {
console.log(arguments[0]);
// expected output: 1console.log(arguments[1]);
// expected output: 2console.log(arguments[2]);
// expected output: 3}
func1(1, 2, 3);

箭头函数没有arguments


6. JS数据类型判断

  1. typeof

可以准确的判断基本数据类型

但是对于复杂数据类型并不准确

console.log(typeof123) //numberconsole.log(typeof"hello") // stringconsole.log(typeoftrue) // boolean console.log(typeofundefined) //undefinedconsole.log(typeofnull) // objectconsole.log(typeof {}) // objectconsole.log(typeof []) // objectconsole.log(typeofnewDate) // objectconsole.log(typeoffunction () { }) // function


  1. constructor

利用原型的属性

利用对象访问机制

但是null和undefined不能判断,因为不能通过点的形式来调用

letnum=123console.log(num.constructor)
console.log("aaa".constructor)
console.log(true.constructor)
console.log([].constructor)
console.log(function() {}.constructor)
console.log((newDate).constructor)
console.log(null.constructor) //报错console.log(undefined.constructor) //报错
  1. instanceof

语法: 对象 instanceof 构造函数

不好判断基本数据类型

  1. Object.prototype.toString.call()


7. 回流和重绘

回流

回流(reflow):也可以称之为重排

在第一次确定节点的大小和位置,称之为布局(layout)

之后对节点的大小、位置修改重新计算称之为回流

引起回流操作

  1. 修改DOM结构,比如添加新的节点或者移出节点
  2. 修改布局,修改了width、height、padding、font-size等
  3. 窗口resize,修改窗口的尺寸等
  4. 调用getComputedStyle方法获取尺寸,位置信息

避免回流

  1. 如果元素需要移动尽量使用transform,因为transform不会对页面进行回流
  2. 修改样式经量一次性修改
  3. 避免频繁的DOM操作
  4. 对某些元素使用position的absolute或fixed 不是不会引起回流,而是相对较小,不会对其他元素造成影响


重绘repaint

第一次渲染页面称之为绘制(paint)

之后重新渲染称之为重绘

引器重绘的操作有哪些

修改背景颜色、文字颜色、边框颜色、样式等等

回流一定引起重绘,所以回流非常消耗性能

我们在开发中尽量避免发生回流


8. JavaScript数据类型

JavaScript数据类型分为两种:基本数据类型复杂数据类型

一. 基本数据类型 ,也叫原始数据类型,包含7中类型,分别是Number、String、Boolean、Null、Undefined、BigInt、Symbol。

Symbol是ES6新出的一种基本数据类型,表示独一无二的值,由于Symbol的构造函数不够完整,所以不能使用new Symbol()来创建数据

Symbol数据类型的特点

  1. Symbol的值是唯一的,可以用来解决命名冲突的问题
  2. Symbol值不能与其他数据类型进行运算

BigInt 可以表示任意大的整数。

二. 复杂数据类型,也叫引用数据类型,通常用Object代表,普通对象,数组,正则,日期,Math数学函数都属于Object。引用数据类型是存储在堆内存中,占据空间大。


9. 浏览器渲染页面的过程

一. HTML解析过程

默认情况下服务器会给浏览器返回index.html文件,所以解析HTML是所有步骤的开始:

  1. 解析HTML文件,从上往下逐行解析
  2. 遇到link元素会下载css文件并解析(在下载和解析css过程中不会阻塞html文件的解析)
  3. 遇到script元素会下载js文件并解析

解析完HTML,会构建DOM Tree


二. CSS解析过程

  1. 在解析HTML过程中,遇到CSS的link元素,浏览器会负责下载对应的CSS文件:

在下载CSS文件是不会影响DOM的解析

  1. 浏览器下载完CSS文件后,就会对CSS文件进行解析,生成对应的规则树(CSSOM Tree)

称之为CSSOM(CSS Object Model)CSS对象模型

三. 构建renader Tree

当有了DOM Tree和CSSOM Tree 就会构建Render Tree(渲染树)

注意:link元素不会阻塞DOM Tree的构建过程,但会阻塞Render Tree的构建过程

因为 Render Tree在构建时,需要对应的CSSOM Tree


四. 布局layout

在渲染树(Render Tree)上运行布局(layout)

渲染树只是表示显示哪些节点以及样式,并不会计算出每个节点的尺寸、位置等信息

布局(layout)是确定呈现所有节点的宽度、高度和位置信息


五.绘制

绘制阶段,浏览器将布局阶段计算的每个frame(结构空间)转为屏幕上实际的像素点

将可见的元素进行绘制,比如文本,颜色,边框,阴影,等等

流程图:


10. 输入URL到页面加载的过程

  1. 首先我们会在浏览器地址栏输入域名,域名会经过DNS解析,也就是域名解析
  2. DNS会把我们的域名解析成IP地址
  3. 根据IP地址去和服务器的IP进行TCP连接
  4. 连接成功后发送HTTP请求
  5. 服务器处理请求并返回HTTP报文(数据)
  6. 浏览器拿到数据进行解析和渲染页面,一般返回的数据是index.html页面

大致流程图:

https://www.yuque.com/coderxiaoluo/aye273/ukt82a

相关文章
|
3月前
|
JSON JavaScript 前端开发
Javascript基础 86个面试题汇总 (附答案)
该文章汇总了JavaScript的基础面试题及其答案,涵盖了JavaScript的核心概念、特性以及常见的面试问题。
59 3
|
3月前
|
前端开发 JavaScript
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
JavaScript 面试系列:如何理解 ES6 中 Generator ?常用使用场景有哪些?
|
4月前
|
JavaScript 前端开发
常见的JS面试题
【8月更文挑战第5天】 常见的JS面试题
61 3
|
25天前
|
JSON JavaScript 前端开发
[JS]面试官:你的简历上写着熟悉jsonp,那你说说它的底层逻辑是怎样的?
本文介绍了JSONP的工作原理及其在解决跨域请求中的应用。首先解释了同源策略的概念,然后通过多个示例详细阐述了JSONP如何通过动态解释服务端返回的JavaScript脚本来实现跨域数据交互。文章还探讨了使用jQuery的`$.ajax`方法封装JSONP请求的方式,并提供了具体的代码示例。最后,通过一个更复杂的示例展示了如何处理JSON格式的响应数据。
31 2
[JS]面试官:你的简历上写着熟悉jsonp,那你说说它的底层逻辑是怎样的?
|
2月前
|
Web App开发 JavaScript 前端开发
前端Node.js面试题
前端Node.js面试题
|
4月前
|
存储 JavaScript 前端开发
2022年前端js面试题
2022年前端js面试题
40 0
|
4月前
|
JavaScript 前端开发 程序员
JS小白请看!一招让你的面试成功率大大提高——规范代码
JS小白请看!一招让你的面试成功率大大提高——规范代码
|
4月前
|
存储 JavaScript 前端开发
JS浅拷贝及面试时手写源码
JS浅拷贝及面试时手写源码
|
4月前
|
JavaScript 前端开发
JS:类型转换(四)从底层逻辑让你搞懂经典面试问题 [ ] == ![ ] ?
JS:类型转换(四)从底层逻辑让你搞懂经典面试问题 [ ] == ![ ] ?
|
5月前
|
缓存 JavaScript 前端开发
js高频面试题,整理好咯
中级前端面试题,不低于12k,整理的是js较高频知识点,可能不够完善,大家有兴趣可以留言补充,我会逐步完善,若发现哪里有错,还请多多斧正。