21届秋招前端面经 -- 猫眼

JS继承的6种方式

• 原型链继承
  　　　　

• 重点：让新实例的原型等于父类的实例。

• 特点：

  • 实例可继承的属性有：实例的构造函数的属性，父类构造函数属性，父类原型的属性。（新实例不会继承父类实例的属性！）

• 缺点：

  • 新实例无法向父类构造函数传参。
  • 继承单一。
  • 所有新实例都会共享父类实例的属性。（原型上的属性是共享的，一个实例修改了原型属性，另一个实例的原型属性也会被修改！）

• 借用构造函数继承
  　　　　

  • 重点：用.call()和.apply()将父类构造函数引入子类函数（在子类函数中做了父类函数的自执行（复制））
  • 特点：
    • 只继承了父类构造函数的属性，没有继承父类原型的属性。
    • 解决了原型链继承缺点1、2、3。
    • 可以继承多个构造函数属性（call多个）。
    • 在子实例中可向父实例传参。

• 缺点：

  • 只能继承父类构造函数的属性。
  • 无法实现构造函数的复用。（每次用每次都要重新调用）
  • 每个新实例都有父类构造函数的副本，臃肿。

• 组合继承（组合原型链继承和借用构造函数继承）（常用）
  　　　　
  　- 重点：结合了两种模式的优点，传参和复用
  　- 特点：

  • 可以继承父类原型上的属性，可以传参，可复用。
    　　　- 每个新实例引入的构造函数属性是私有的。

  缺点：调用了两次父类构造函数（耗内存），子类的构造函数会代替原型上的那个父类构造函数。

• 原型式继承
  　　　　
  　- 重点：用一个函数包装一个对象，然后返回这个函数的调用，这个函数就变成了个可以随意增添属性的实例或对象。object.create()就是这个原理。
  　- 特点：类似于复制一个对象，用函数来包装。
  　- 缺点：
  　 - 所有实例都会继承原型上的属性。
  　　　- 无法实现复用。（新实例属性都是后面添加的）

• 寄生式继承
  　　　　
  　- 重点：就是给原型式继承外面套了个壳子。
  　- 优点：没有创建自定义类型，因为只是套了个壳子返回对象（这个），这个函数顺理成章就成了创建的新对象。
  　- 缺点：没用到原型，无法复用。

• 寄生组合式继承（常用）
  　- 寄生：在函数内返回对象然后调用
  　- 组合：1、函数的原型等于另一个实例。2、在函数中用apply或者call引入另一个构造函数，可传参　
  　　　　
  　- 重点：修复了组合继承的问题

招银科技

vue-router模式

• hash：浏览器环境，使用 URL hash 值来做路由；支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；
• history：依赖 HTML5 History API 和 服务器配置；
• abstract：支持所有 javaScript 运行环境，如 node.js 服务器；如果发现没有浏览器的 API，路由会自动强制进入这个模式；

vue-router中默认使用的是hash模式，也就是会出现如下的URL：，URL中带有#号

我们可以用如下代码修改成history模式：

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/Main'
Vue.use(Router)

export  default new Router({
    mode: 'history',
    routes: [
        {
            path: '/',
            component: Main
        }
    ]
})

这样子URL中的#号就被去除了。

hash与history区别

• hash模式url里面永远带着#号，我们在开发当中默认使用这个模式。
• 那么什么时候要用history模式呢？
  • 如果用户考虑url的规范那么就需要使用history模式，因为history模式没有#号，是个正常的url适合推广宣传。
• 当然其功能也有区别：
  • 我们在开发app的时候有分享页面，那么这个分享出去的页面就是用vue或是react做的，咱们把这个页面分享到第三方的app里，有的app里面url是不允许带有#号的，所以要将#号去除那么就要使用history模式。
• 但是使用history模式还有一个问题就是，在访问二级页面的时候，做刷新操作，会出现404错误，那么就需要和后端人配合让他配置一下apache或是nginx的url重定向，重定向到你的首页路由上就ok啦。

vue子组件向父组件传值

• $emit

https加密方法及过程

1、https=http+ssl安全传输协议+ca身份认证

2、HTTPS一般使用的加密与HASH算法如下：

• 非对称加密算法：RSA，DSA/DSS

  • 它使用了一对密钥，公钥和私钥。
  • 私钥只能由一方安全保管，不能外泄，而公钥则可以发给任何请求它的人。非对称加密使用这对密钥中的一个进行加密，而解密则需要另一个密钥。比如，你向银行请求公钥，银行将公钥发给你，你使用公钥对消息加密，那么只有私钥的持有人–银行才能对你的消息解密。与对称加密不同的是，银行不需要将私钥通过网络发送出去，因此安全性大大提高。
  • 虽然非对称加密很安全，但是和对称加密比起来，它非常的慢，所以我们还是要用对称加密来传送消息，但对称加密所使用的密钥我们可以通过非对称加密的方式发送出去。

• 对称加密算法：AES，RC4，3DES

  • 对称加密是最快速、最简单的一种加密方式，加密与解密用的是同样的密钥。

  • 对称加密的一大缺点是密钥的管理与分配，换句话说，如何把密钥发送到需要解密你的消息的人的手里是一个问题。在发送密钥的过程中，密钥有很大的风险会被黑客们拦截。现实中通常的做法是将对称加密的密钥进行非对称加密，然后传送给需要它的人。

实际加密过程举例：

（１）Alice需要在银行的网站做一笔交易，她的浏览器首先生成了一个随机数作为对称密钥。
（2） Alice的浏览器向银行的网站请求公钥。
（3） 银行将公钥发送给Alice。
（4） Alice的浏览器使用银行的公钥将自己的对称密钥加密。
（5） Alice的浏览器将加密后的对称密钥发送给银行。
（6） 银行使用私钥解密得到Alice浏览器的对称密钥。
（7） Alice与银行可以使用对称密钥来对沟通的内容进行加密与解密了。

• HASH算法：MD5，SHA1，SHA256

web常见的攻击手段（防范方式）

• XSS攻击：跨站脚本攻击。

  • XSS是一种常见的web安全漏洞，它允许攻击者将恶意代码植入到提供给其它用户使用的页面中。不同于大多数攻击(一般只涉及攻击者和受害者)，XSS涉及到三方，即攻击者、客户端与Web应用。XSS的攻击目标是为了盗取存储在客户端的cookie或者其他网站用于识别客户端身份的敏感信息。一旦获取到合法用户的信息后，攻击者甚至可以假冒合法用户与网站进行交互。

  • XSS通常可以分为两大类：

    • 存储型XSS，主要出现在让用户输入数据，供其他浏览此页的用户进行查看的地方，包括留言、评论、博客日志和各类表单等。应用程序从数据库中查询数据，在页面中显示出来，攻击者在相关页面输入恶意的脚本数据后，用户浏览此类页面时就可能受到攻击。这个流程简单可以描述为：恶意用户的Html输入Web程序->进入数据库->Web程序->用户浏览器。

    • 反射型XSS，主要做法是将脚本代码加入URL地址的请求参数里，请求参数进入程序后在页面直接输出，用户点击类似的恶意链接就可能受到攻击。

  • XSS防范方式：

    • 过滤特殊字符
      避免XSS的方法之一主要是将用户所提供的内容进行过滤(如上面的script标签)。
    • 使用HTTP头指定类型
      w.Header().Set("Content-Type","text/javascript")
      这样就可以让浏览器解析javascript代码，而不会是html输出。

• CSRF，跨站请求伪造，缩写为：CSRF/XSRF。

  • 攻击者盗用了你的身份，以你的名义发送恶意请求。CSRF能够做的事情包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账…造成的问题包括：个人隐私泄露以及财产安全。

  • 要完成一次CSRF攻击，受害者必须依次完成两个步骤：

    • 登录受信任网站A，并在本地生成Cookie。
    • 在不登出A的情况下，访问危险网站B。

  • CSRF攻击防范方法：

    • tocken：

      之所以被攻击是因为攻击者利用了存储在浏览器用于用户认证的cookie，那么如果我们不用cookie来验证不就可以预防了。所以我们可以采用token（不存储于浏览器）认证，为每一个提交的表单生成一个随机token， 存储在session中，每次验证表单token，检查token是否正确。。

    • 通过referer识别，HTTP Referer是header的一部分，当浏览器向web服务器发送请求的时候，一般会带上Referer，告诉服务器我是从哪个页面链接过来的，服务器基此可以获得一些信息用于处理。那么这样的话，我们必须登录银行A网站才能进行转账了。

xss与CSRF区别

1. CSRF危害程度更高一些；
2. xss有局限性；
3. CSRF相当于XSS的基础版，CSRF能做到的，XSS都能做到；
4. XSS主要指向客户端，CSRF主要指向服务端；
5. XSS是利用合法用户获取信息，而CSRF是伪造成合法用户发起请求。
6. CSRF：需要用户先登录网站A，获取cookie。XSS：不需要登录。
7. CSRF：是利用网站A本身的漏洞，去请求网站A的api。XSS：是向网站A 注入 JS代码，然后执行 JS 里的代码，篡改网站A的内容。

• DDOS：分布式拒绝服务攻击，简单说就是发送大量请求是使服务器瘫痪。

  • DDos攻击是在DOS攻击基础上的，可以通俗理解，dos是单挑，而ddos是群殴，因为现代技术的发展，dos攻击的杀伤力降低，所以出现了DDOS，攻击者借助公共网络，将大数量的计算机设备联合起来，向一个或多个目标进行攻击。

  • DDoS 防范方法：

    防御产品的核心是检测技术和清洗技术。检测技术就是检测网站是否正在遭受 DDoS 攻击，而清洗技术就是清洗掉异常流量。而检测技术的核心在于对业务深刻的理解，才能快速精确判断出是否真的发生了 DDoS 攻击。清洗技术对检测来讲，不同的业务场景下要求的粒度不一样。

• SQL注入：攻击者成功的向服务器提交恶意的SQL查询代码，程序在接收后错误的将攻击者的输入作为查询语句的一部分执行，导致原始的查询逻辑被改变，额外的执行了攻击者精心构造的恶意代码。

  • SQL注入防范方法：
    • 使用预编译语句，这样即使我们使用 SQL语句伪造成参数，到了服务端的时候，这个伪造 SQL语句的参数也只是简单的字符，并不能起到攻击的作用。
    • 对进入数据库的特殊字符（'"\尖括号&*;等）进行转义处理，或编码转换。
    • 在应用发布之前建议使用专业的SQL注入检测工具进行检测，以及时修补被发现的SQL注入漏洞。网上有很多这方面的开源工具，例如sqlmap、SQLninja等。
    • 避免网站打印出SQL错误信息，比如类型错误、字段不匹配等，把代码里的SQL语句暴露出来，以防止攻击者利用这些错误信息进行SQL注入。

css最小字体、如何设置小于12px的字体

高版本chrome谷歌浏览器不再支持小于12px的字体

使用小于12px字体方法：transform:scale()

<body>
    <p>我是一个小于12PX的字体</p>
</body>

定义一个样式

body,p{ margin:0; padding:0}
p{font-size:10px;}

放在浏览器预览，会发现最新版谷歌已经不在支持，还是12像素

所以我们就要用到了，下面属性

-webkit-transform:scale(0.8);   
//0.8位缩放倍数，具体自己根据实际需求修改。但是，这个属性会把整个p的属性都缩放。

如果有背景、边框、都会被缩小！

所以我们需要修改结构为

<p>
    <span>我是一个小于12PX的字体</span>
</p>

定义样式为

body,p{ margin:0; padding:0}
p{font-size:10px;}
span{-webkit-transform:scale(0.8);}
//改了之后，还是不可以的。
//原因 -webkit-transform:scale(0.8); 只能缩放可以定义宽高的元素，而span是行内元素，不可以

所以我们修改为

body,p{ margin:0; padding:0}
p{font-size:10px;}
span{-webkit-transform:scale(0.8); display:inline-block}

js作用域、作用域链

• 作用域：

  • 全局作用域

    在代码中任何地方都能访问到的对象拥有全局作用域，一般来说以下几种情形拥有全局作用域：

    • 最外层函数 和在最外层函数外面定义的变量拥有全局作用域
    • 所有末定义直接赋值的变量自动声明为拥有全局作用域
    • 所有 window 对象的属性拥有全局作用域

  • 函数作用域

    是指声明在函数内部的变量，和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部。

    注：块语句（大括号“｛｝”中间的语句），如 if 和 switch 条件语句或 for 和 while 循环语句，不像函数，它们不会创建一个新的作用域

  • 块级作用域

    块级作用域可通过新增命令 let 和 const 声明，所声明的变量在指定块的作用域外无法被访问。块级作用域在如下情况被创建：

    • 在一个函数内部
    • 在一个代码块（由一对花括号包裹）内部

• 作用域链

  当代码在一个环境中执行时，会创建变量对象的一个作用域链（作用域形成的链条）

  • 作用域链的前端，始终都是当前执行的代码所在环境的变量对象
  • 作用域链中的下一个对象来自于外部环境，而在下一个变量对象则来自下一个外部环境，一直到全局执行环境
  • 全局执行环境的变量对象始终都是作用域链上的最后一个对象

  内部环境可以通过作用域链访问所有外部环境，但外部环境不能访问内部环境的任何变量和函数。

js异步加载方式

• defer —— 以前适用于IE，现在适用于所有主流浏览器

  • defer属性规定是否对脚本执行进行延迟，直到页面加载为止

  • defer属性的值只有defer一个，即 defer = ‘defer’，可直接写defer

  • 用法：在script标签里加入defer属性即可，适用于所有script脚本

    <script src='http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js' defer></script>
    

  • 添加defer属性后，js脚本在所有元素加载完成后执行，而且是按照js脚本声明的顺序执行

• async —— h5新属性

  • async属性规定一旦脚本可用，则会异步执行

  • async的用法和defer一样，但async只适用于外部引用的脚本，即script有src属性时才可使用

    <script src='http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js' async></script>
    

  • 不同的是，添加async属性后，js脚本是乱序执行的，不管你声明的顺序如何，只要某个js脚本加载完就立即执行

• 动态生成script标签

  • 在js里创建script标签，插入DOM中，加载完成后callback

    function loadScript(url, callback){
        var s = document.createElement('script');
        s.type = 'text/javascript';
        if(s.readyState){
            s.onreadystatechange = function(){  //兼容IE
                if(s.readyState == 'complete' || s.readyState == 'loaded'){
                    callback();
                }
            }
        }else{
            s.onload = function(){  //safari chrome opera firefox
                callback();
            }
      }
    
    s.src = url;
    document.head.appendChild(s);
    
    }
    

  • 这样所有的js脚本都会在onload事件后才加载，onload事件会在所有文件内容（包括文本、图片、CSS文件等）加载完成后才开始执行，极大的优化了网页的加载速度，提高了用户体验

js事件委托

• 事件委托原理：

  事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

• 事件委托的好处：

  不需要对每一个子元素绑定事件，只需要在父元素上绑定事件，减少了操作DOM节点的次数，从而减少浏览器的重加载，提高代码的性能。

  因此当子元素较多，需要对子元素进行监听的时候，可以使用事件委托。

• 为什么要用事件委托：

  ​ 一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？比如我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会存在什么影响呢？

  ​ 在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；

  ​ 每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了（内存不够用，是硬伤，哈哈），比如上面的100个li，就要占用100个内存空间，如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了，自然性能就会更好。

js事件冒泡

DOM事件流存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

1，事件捕获：当鼠标点击或者触发DOM元素时，浏览器会从根节点由外而内的进行事件传播

2，事件冒泡：与事件捕获相反，事件冒泡是由内到外进行事件传播，直到根节点。

DOM标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。
常用的冒泡事件的API :

1，addEventListener(event, function, useCapture) 设定一个事件监听器，当某一事件发生通过设定的参数执行操作

  参数 event 是必须的，表示监听的事件，例如 click, touchstart 等，就是之前不加前缀 on 的事件。
  参数 function 是必须的，表示事件触发后调用的函数，可以是外部定义函数，也可以是匿名函数。
  参数 useCapture 是选填的，填true或者false，用于描述事件是冒泡还是捕获，true表示捕获，默认的false表示冒泡。

2，removeEventListener(event, function, useCapture) 移除 addEventListener() 添加的事件监听

具体参数和 addEventListener(event, function, useCapture) 相同

3.stopPropagation() 阻止事件的冒泡

该函数只阻止事件向祖辈元素的传播，不会阻止该元素自身绑定的其他事件处理函数的函数。

4.preventDefault() 取消事件的默认动作

js阻止事件冒泡

w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true

js数据类型

数据类型可以分为两类：一原始类型（基本类型）；二引用类型

原始类型又可以称为基本类型，可以分为六类

基本数据类型（原始类型）：String、Number、Null、Undefined、Boolean

引用类型：Object

ES6 中新增了一种 Symbol 。这种类型的对象永不相等，即始创建的时候传入相同的值，可以解决属性名冲突的问题，做为标记。

js undefined和null区别

null表示"没有对象"，即该处不应该有值。典型用法是：

（1） 作为函数的参数，表示该函数的参数不是对象。

（2） 作为对象原型链的终点。

undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时或者return后面什么也没有，返回undefined。

js symbol有什么用

Symbol类型是为了解决属性名冲突的问题，顺带还具备模拟私有属性的功能，它的功能类似于一种标识唯一性的ID。每个Symbol实例都是唯一的。因此，当比较两个Symbol实例的时候，将总会返回false