JavaScript 常见面试题分析（三）

property 和 attribute 的区别

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

执行上下文

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

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

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

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

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

JSONP的实现原理

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

CORS跨域资源共享

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

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

选择器优先等级

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

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 查询
}

浅拷贝和深拷贝

// 浅拷贝
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))

forEach() 和 map() 的区别

map()会分配内存空间存储新数组并返回，forEach()不会返回数据

forEach()允许callback更改原始数组的元素，map()返回新的数组

描述cookie localStorage sessionStorage 区别

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

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

常见的 web 前端攻击方式

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

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

Ajax 请求 GET 和 POST 的区别

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

jsonp 和 Ajax 的区别

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

同源策略

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

阻止事件冒泡和默认行为

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

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()