JavaScript 常见面试题分析（三）

2022-12-28 本文已影响0人 Nian糕

Unsplash

01 property 和 attribute 的区别

property 修改对象属性，不会体现到 HTML 结构中；attribute 修改 HTML 属性，会改变 HTML 结构，两者都有可能引起 DOM 重新渲染

02 执行上下文

执行上下文是评估和执行 JavaScript 代码的环境的抽象概念，每当 Javascript 代码在运行的时候，它都是在执行上下文中运行，JavaScript 中有三种执行上下文类型: ① 全局执行上下文；② 函数执行上下文；③ Eval 函数执行上下文

创建执行上下文有两个阶段：

创建阶段
a. this 值的决定，即我们所熟知的 this 绑定
b. 创建词法环境组件
c. 创建变量环境组件
执行阶段
完成对所有这些变量的分配，最后执行代码

当 JavaScript 引擎第一次遇到你的脚本时，它会创建一个全局的执行上下文并且压入当前执行栈。每当引擎遇到一个函数调用，它会为该函数创建一个新的执行上下文并压入栈的顶部，因为不同的调用可能会有不同的参数

JS 引擎会执行那些执行上下文位于栈顶的函数，当该函数执行结束时，执行上下文从栈中弹出，控制流程到达当前栈中的下一个上下文

03 JSONP的实现原理

<script> 标签可以绕过跨域限制，服务器可以任意动态拼接符合 JS 的数据返回

04 CORS跨域资源共享

服务器设置 http header，第二个参数填写允许跨域的域名称

response.setHeader("Access-Control-Allow-Origin", "[http://localhost:8080](http://localhost:8080/)")

05 选择器优先等级

!important > 行内样式 > id选择器 > class选择器 > 标签选择器 > * > 继承 > 默认

06 DOM查询做缓存

for (let i = 0; i < document.getElementsByTagName('p').length; i++) {
  // 每次循环都会计算 length，频繁进行 DOM 查询
}

const pList = document.getElementsByTagName('p')
const legnth = pList.length
for (let i = 0; i < length; i++) {
  // 缓存 length，只进行一次 DOM 查询
}

07 浅拷贝和深拷贝

// 浅拷贝
let copy1 = {...{x:1}}
let copy2 = Object.assign({}, {x:1})

// 深拷贝
function deepClone(obj) {
  let copy = obj instanceof Array ? [] : {}
  for (let key in obj) {
    // 保证key不是原型的属性
    if (obj.hasOwnProperty(key)) {
      copy[key] = typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key]
    }
  }
  return copy
}

JSON.parse(JSON.stringify(obj))

08 forEach() 和 map() 的区别

map() 会分配内存空间存储新数组并返回，forEach() 不会返回数据
forEach() 允许 callback 更改原始数组的元素，map() 返回新的数组

09 描述cookie localStorage sessionStorage 区别

cookie 本身用于浏览器和 Server 通讯，被“借用”到本地存储，可用 document.cookie = '...' 来修改，缺点：存储大小为 4 kb，HTTP 请求时需要发送到服务端，增加请求数据量

localStorage 数据会永久存储，除非代码或手动删除；sessionStorage 数据只存在于当前会话，浏览器关闭则清空，共同点：存储大小为 5M，不会随 HTTP 请求发送

10 常见的 web 前端攻击方式

XSS 跨站请求攻击（获取cookie），预防：将 <script> 变为 <script>

CSRF/XSRF 跨站请求伪造（获取用户信息进行购物），预防：使用 POST 接口，POST 请求处理跨域比较复杂；增加验证方式，密码、短信验证码、指纹

11 Ajax 请求 GET 和 POST 的区别

GET 一般用于查询操作，参数拼接在 URL 上；POST 一般用于提交操作，放在请求体内（数据体积可更大），安全性：POST 易于防止 CSRF/XSRF

12 jsonp 和 Ajax 的区别

jsonp 是通过 <script> 标签去实现的，Ajax 是通过 XMLHttpRequest 去实现的

13 同源策略

Ajax 请求时，浏览器要求当前网页和 Server 必须同源，即协议、域名、端口，三者必须一致，加载图片，CSS 和 JS 可无视同源策略

14 阻止事件冒泡和默认行为

e.stopPropagation();
e.preventDefault();

14 Class 和普通构造函数区别

Class在语法上更贴近面向对象的写法，Class实现继承更加易读、易理解，Class本质还是语法糖，使用prototype

// 继承

function Animal() {
  this.eat = function() {
    console.log('this is animal')
  }
}

function Dog() {
  this.bark = function() {
    console.log('this is dog')
  }
}

Dog.prototype = new Animal()

var hhh = new Dog()

hhh.eat()
hhh.bark()

class Animal {
  costructor(name) {
    this.name = name
  }
  eat() {
    console.log(`this is ${this.name}`)
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name) // 必须写上！！！让Animal也有name参数
    this.name = name
  }
  bark() {
    console.log(`${this.name} bark`)
  }
}

const hhh = new Dog('哈士奇')
hhh.eat()
hhh.bark()

End of File

行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^