walkerxin / interview Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 0.0 0 B

interview's People

Watchers

interview's Issues

Cookie里的httpOnly有什么作用？

带有 httpOnly 属性标记的 cookie，脚本操作 API document.cookie 访问不到，同时无法修改这种 cookie，只能在发送符合条件的请求时，被浏览器自动添加。该属性有助于缓解 XSS（跨站点脚本）攻击。

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly

当new一个构造函数时内部发生了什么

神奇的 new

缘由

我们都知道创建一个对象有两种方式，而 new 构造函数 就是其中一种。那么 new 函数 与函数的直接调用 函数() 有什么不同？加上关键字 new 后，JS 内部是会帮我们做一些神奇的事情吗？

new 本质上是一个运算符

当执行 `const p1 = new People('小小')` 时

new 会创建的一个新的空对象，假设名叫 tmpObj
将 tmpObj 对象的 constructor 属性指向当前构造函数 People；tmpObj.proto = People.prototype
执行构造函数 People('小小')，函数体中用到的 this 指代的就是这个 tmpObj 对象
函数执行完成后，这里根据函数体中是否有返回值分为两种情况
1. 无返回值，直接返回 tmpObj 对象
2. 有返回值，这里根据返回值的类型又分为两种情况
  1. 返回值为基础类型时，返回之前创建的 tmpObj 对象
  2. 返回值为复杂类型时，返回这个返回值

栗子

正常情况

function Test(name) {
  this.name = name
  // 或 return 一个基础类型
}

const test1 = new Test('Henry')
console.log(test1)    // {name: "Henry"}
test1.__proto__ === Test.prototype   // true
test1.__proto__.__proto__ === Object.prototype    // true

Test.prototype.__proto__ === Object.prototype    // true
Test.__proto__ === Function.prototype    // true

构造函数中擅自返回对象，导致原型链断层

function Test(name) {
  this.name = name
  return [1, 2, 3]
}

const test1 = new Test('Henry')
console.log(test1)    // [1, 2, 3]
test1.__proto__ === Object.prototype    // true

使用table、thead、tbody、tfoot、tr、th、td、caption、colspan、rowspan实现一个标准的表格

效果

学生信息统计

姓名	年纪	分数	班级
更多信息查看官网
张三	18	yiban	一班
李思	20	90
王武	22	120
赵柳	23	60	二班

源码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    table {
      width: 400px;
      border-collapse: collapse;
    }
    td, th {
      border: 1px solid #000;
    }
  </style>
</head>
<body>
<table>
  <caption>学生信息统计</caption>
  <tfoot>
    <tr>
      <td colspan="4">更多信息查看官网</td>
    </tr>
  </tfoot>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年纪</th>
      <th>分数</th>
      <th>班级</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>18</td>
      <td>yiban</td>
      <td rowspan="3">一班</td>
    </tr>
    <tr>
      <td>李思</td>
      <td>20</td>
      <td>90</td>
    </tr>
    <tr>
      <td>王武</td>
      <td>22</td>
      <td>120</td>
    </tr>
    <tr>
      <td>赵柳</td>
      <td>23</td>
      <td>60</td>
      <td>二班</td>
    </tr>
  </tbody>
</table>
</body>
</html>

继承属性有哪些

常见的有
font-size
font-family
font-weight
font-style

color
line-height
text-indent
text-align

介绍Session鉴权流程？

站在 Client 端的角度，session 其实是 cookie 的一个应用，在 Server 端的角度，则是保存在服务器session集中的一个对象。

登陆鉴权流程

你进入淘宝，搜索，跳转到登录页面

我要登录：我的用户名是walkerxin，密码：123456。
浏览器 http 打包信息发送请求给服务器。
服务器接收到请求后：
1. 查找 DB，有 walkerxin 这个用户，那计算下 secret，SHA256(123456, salt) 的结果和存储的 secret 一样，你的密码是对的
2. 创建一个 session 对象，形如 { id: "1", username: "walkerxin", sessionId: "437F812F2396A023D2F1CA..." ... }
3. 把 session_id 打包到响应头 set-cookie 属性中返回。
浏览器收到响应：设置下了这个 cookie 信息。
当我访问 “我的订单” 页面，发送请求给服务器，浏览器会自动在请求的报文中加入对应的 cookie 信息。
服务器收到请求：请求报文带有 cookie 信息，拿出来比较下，匹配上相同的 sessionId。这个session对应的用户是 walkerxin 啊，那去 DB 查询该用户的订单数据，拼接信息后返回。
浏览器显示我的订单页。

URI 与 URL 的区别？

cookie、session、localStorage有什么区别？

本地存储

cookie 是存储在浏览器上的一小段数据，常常用于本地缓存，session 是它的一个应用，用于补充 HTTP 无状态的特点。

类型	存储大小	存储时效	特点	说明
cookie	<= 4k	① 看 expire 和 max-age 参数 ② 两项都没设置，则关闭浏览器被清除	每次网络请求时，浏览器会在请求头中自动带上	document.cookie 可获取到 httpOnly 不为 true 的 cookie 键值字符串
session	<= 4k	与 cookie 同	与 cookie 同	是 cookie 的一个应用
localStorage	<= 5M ~ 10M	永远有效，除非手动删除

Cookie里的secure参数有什么作用？

设置 cookie 时，除了键(name) 值 (value) 外，还有其他的参数标识，共同作用。

secure 参数

它是一个布尔值。
标记为 secure 的 cookie，只会被加到 HTTPS 协议加密过的请求中发送给服务端，因此可以预防中间人攻击。

聊一聊选择器优先级

!important > 内联属性样式 > 设置的样式 > 浏览器默认样 > 继承的样式

a标签的target属性有哪些值?分别说说这些值的作用

a 标签的常用属性有 href、 target 和 download
其中 target 属性有4种值，代表点击 a 标签时，会以哪种形式跳转页面，分别是

_blank，表示在新的标签页中加载链接页面
_self，这个是默认值，表示在当前页面中跳转页面
_parent，表示在点击的 a 标签的父级框架中跳转页面
- 当父级框架不存在时，则在当前页面中打开
- 此项一般是结合 iframe 标签使用
_top，表示在该 a 标签所处页面的顶级框架中进行页面跳转
- 当不存在顶级框架时，则在当前页面中打开
- 此项一般是结合 iframe 标签使用

如何声明页面是HTML5页面？

【标准写法】在 HTML 文件的第一行，<html> 标签之前，顶格添加<!DOCTYPE html>声明。

<!DOCTYPE html>
<html>
    <head></head>
    <body></body>
</html>

其实在现代浏览器中，对 HTML 文件解析渲染时会进行优化，适当补全，
以下几种情况虽然不是标准写法，但是发现

只要是以 <!DOCTYPE 开头，前面可空格、回车，但不能含其他任何字符
Chrome、Firefox、IE9+ 的浏览器都能识别出该文档类型（或补全或使用）

       <!DOCTYPE  abc>
<html></html>

浏览器中查看DOM结果，发现补全成了 <!DOCTYPE abc>

       <!DOCTYPE  
<html></html>

浏览器中查看DOM结果，发现补全成了 <!DOCTYPE <html>

<!DOCTYPE>
<html></html>

查看DOM结构显示 <!DOCTYPE >

属性的值inherit、initial、unset分别有什么作用

inherit （继承），父类的 CSS 属性是否可继承；可继承属性和不可继承属性有哪些？
initial （浏览器默认样式）
unset （不设置），视当前属性的继承特性而定

聊一聊什么是闭包？

闭包

一、定义（参考 MDN）

闭包是由函数以及创建该函数的词法环境共同构成。词法环境包含该函数内部所有用到的外部的局部变量。

二、词法作用域

词法作用域 也叫静态作用域 —— 理解了这个，闭包也会了一半。
用处：“查询一个变量的来源的规则”

2.1 查询规则（找到即止）

首先在函数当前的作用域中查找是否有（该变量的声明）；若没有，则看看函数的形参中是否有（形参也是一个内部变量声明）
若还没找到，则前往上一级作用域，即创建当前函数的作用域中查找
若还没找到，沿着作用域链，一级一级往上找，直到全局作用域
全局作用域内都没找到，那就报错喽，“Uncaught ReferenceError: xxx is not defined”

三、理解闭包

3.1 举个栗子

var globalVar = '我在全局里'
function foo(a) {
  var b = a * 2
  function bar(c) {
    console.log(a, b, c, globalVar)
  }
  return bar
}
var outerBar = foo(2)
outerBar(3)

执行流程描述

执行 foo 函数，进入 foo 的执行环境，内部包含局部变量 a、b 和函数 bar
将返回的函数 bar 赋值给变量 outerBar，调用 outerBar 其实就是执行函数 bar，
进入 bar 的执行环境，内部包含形参 c，执行 console.log(a, b, c)，需要确定变量 a、b、c 的来源

确定变量 a

首先在 bar 函数作用域中查找是否有变量 a 的声明；没有，那看看形参
也没有，则查询当前的词法作用域。首先前往上一级作用域（创建函数 bar 所在的作用域），函数 foo 中查找，在 foo 的形参变量中找到了 a
因此，bar 中要打印的 a 来源于 foo 函数的形参 a

确定变量 b

首先在 bar 函数作用域中查找是否有变量 b 的声明；没有，那看看形参
也没有，则查询当前的词法作用域。首先前往上一级作用域（创建函数 bar 所在的作用域），函数 foo 中查找，找到了 var b = a * 2 关于变量 b 的声明
因此，bar 中要打印的 b 来源于 foo 函数的内部变量 b

确定变量 c

首先在 bar 函数作用域中查找是否有变量 c 的声明；没有，那看看形参， c 找到了
因此，c 来源于bar的内部变量 —— 形参变量 c

function bar(c) {
  console.log(a, b, c)
}
// 等价于
function bar(c) {
  var c = c
  console.log(a, b, c)
}
// 函数的形参是函数内部的局部变量，也是一个变量声明

总结：在上述例子中，函数bar、foo内部变量a、b 共同构成了一个闭包

3.2 验证 - 查看闭包

四、使用场景

闭包的重要作用有两个，常用于封装和暂存数据