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