JavaScript面试题

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

2. 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) //报错

3. instanceof

语法: 对象 instanceof 构造函数

不好判断基本数据类型

4. 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的解析

2. 浏览器下载完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