前端原理——重点难点汇总（JS纯收藏，方便单页查询）

一、面向对象 & 原型和原型链

学习原型前的基础----构造函数：

js的构造函数理解_laviniatu的博客-CSDN博客_js构造函数

构造函数相关属性：

JS中的静态属性及实例属性_shandamengcheng的博客-CSDN博客_js静态属性和实例属性

JavaScript的学习-实例属性和类属性_蜗系小玄武的博客-CSDN博客_js实例属性

原理解析：【原型和原型链】什么是原型和原型链_TowYingWang的博客-CSDN博客_原型和原型链  

1、原型

所有的构造函数都有一个prototype属性，这个属性也叫 原型对象。（构造函数.prototype）
所有的构造函数new出来的对象也都有一个原型对象。（对象._proto_）

2、原型链

原型链就是实例对象和原型之间的链接。
在使用new方法初始化函数的时候，得到的新对象的__proto__属性会指向函数对象的原型对象（部分浏览器兼容，兼容模式是 [[Prototype]]），而函数对象的原型对象又继承至原始对象。把这个有__proto__穿起来直到Object.prototype.__proto__为null的链叫做原型链。

 3、原型对象的执行流程

首先去实例上查找，如果找到了就返回。
如果没查找到，就去该构造函数的原型上查找，找到了就返回；没找到就去Object.prototype的原型上查找，找到了就返回，否则返回null。

4、JS面向对象的几种方式 / 如何创建一个对象

① 对象的字面量 var obj = {} 
② 创建实例对象 var obj = new Object();
③ 构造函数模式 function fn(){} , new fn();
④ 工厂模式：用一个函数，通过传递参数返回对象。
     function fn(params){var obj =new Object();obj.params = params; return obj;},fn(params);
⑤ 原型模式：function clock(hour){} fn.prototype.hour = 0; new clock();
⑥混合模式

 5、面向对象的三个特性：封装、继承、多态

封装 ： 屏蔽内部细节   用户直接调用被封装的功能
继承 ： 子类拥有父类的所有属性或方法  
多态 （js中不存在多态概念）

（1）继承的6种方式

① 通过改变父类的执行环境来实现
② 通过call
③ 通过apply
④ 原型继承
⑤ 混合继承
⑥ es6构造函数 

• 用原型链继承的方式写一个类和子类

function Person(name,age){
  this.name = name;
  this.age = age;
}
Person.prototype.study = function(){
  retrurn "学习"
}
function Student(class,name,age){
  this.class = class;
  this.name = name;
  this.age = age;
}
Student.prototype = new Person();
let s1 = new Student("二班","李",16);
console.log(s1.name,s1.age,s1.class,s1.study());

二、回调函数和递归，闭包和高阶函数的区别

1、回调函数（callback）

 解析非常清楚：JavaScript基础——回调(callback)是什么?_前端达人的博客-CSDN博客

定义：在JavaScript中，函数是对象。因此函数可以将函数作为参数，并且可以由其他函数进行返回。执行此操作的函数称为高阶函数。任何作为参数传递的函数都称为回调函数。
通俗解释：一个函数的参数还是一个函数的情况，是回调函数。例如：定时器。

2、闭包（closure）

概念：闭包是指有权访问另一个函数作用域中变量的函数。创建闭包最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量。利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。

 闭包的特性：
①函数内再嵌套函数；
②内部函数可以引用外层的参数和变量；
③参数和变量不会被垃圾回收机制回收。

 例如：li节点的onclick事件都能正确的弹出当前被点击的li索引。

<ul id="testUL">
    <li> index = 0</li>
    <li> index = 1</li>
    <li> index = 2</li>
    <li> index = 3</li>
</ul>
<script type="text/javascript">
    var nodes = document.getElementsByTagName("li");
    for(i = 0;i<nodes.length;i+=1){
        nodes[i].onclick = (function(i){
                  return function() {
                     console.log(i);
                  } //不用闭包的话，值每次都是4
                })(i);
    }

执行say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在，使得Javascript的垃圾回收机制GC不会收回say667()所占用的资源，因为say667()的内部函数的执行需要依赖say667()中的变量。

function say667() {
    // Local variable that ends up within closure
    var num = 666;
    var sayAlert = function() {
        alert(num);
    }
    num++;
    return sayAlert;
}
 var sayAlert = say667();
 sayAlert()//执行结果应该弹出的667

三、浏览器事件模型 

1、浏览器中的三种事件模型：

原始事件模型( original event model)，DOM2事件模型，IE事件模型。其中，原始的事件模型被所有浏览器所支持，而DOM2中所定义的事件模型目前被除了IE以外的所有主流浏览器支持。

2、浏览器事件模型分为三个阶段：

捕获阶段：事件从外向内传播。普通事件没有捕获阶段。

目标阶段：事件当前触发的时机。

冒泡阶段：事件从内向外传播。

3、Dom节点获取方法：

通过id属性获取             document.getElementById()
通过name属性获取      document.getElementsByName()
通过标签名获取           document.getElementsByTagName()
通过class属性获取      document.getElementsByClassName()
原生js中的 querySelector() 和 querySelectorAll() 方法也同样可以获取到相应的dom节点，相似于jquery，但比jq更快。

四、简述ECMASCRIPT6的新特性（ES6）

1、增加块作用域   { }
2、增加 let const 定义变量和常量的语法。

var & let & const 的区别:
let & var 
1、在同一个作用域下，let 不能重复定义同样的变量（会报错）；
2、let 定义的变量没有提升能力（error），var 可以；
3、let 具备块级作用域，在作用域外找不到作用域（error)。
4、let 主要应该在循环中，循环多少次就生成多少个变量。
const： 
1、不能重复定义；
2、没有提升；
3、具备块级作用域；
4、不能不给初始值。  const  c;  // error

3、解构赋值   [ ] 。（简化定义变量、定义数组、定义对象……）
4、函数参数扩展  ...  （函数参数可以使用默认值、不定参数以及拓展参数）
5、增加class类的支持。   class Foo( ){ }；
6、增加箭头函数。   let foo = ( ) =>{ }；
7、增加模块和模块加载。（ES6中开始支持原生模块化啦）
8、math, number, string, array, object 增加新的API。

五：箭头函数和普通函数的区别

1、普通函数

① this总是指向它的调用着，例如obj.foo，foo中的this就是obj；
② 默认情况下(即非严格模式下,未使用 'use strict')，没有找到直接调用者，this是window；
③ 严格模式下，没有直接调用者的this是undefined；
④ 使用call/bind/apply进行绑定的，this指的是绑定的对象。

2、箭头函数

箭头函数的this 永远指向其上下文的this ，任何方法都改变不了指向。
箭头函数可以绑定this对象，大大减少了显式绑定this对象的写法（call、apply、bind）。但是，箭头函数并不适用于所有场合，所以ES7提出了“函数绑定”（function bind）运算符，用来取代call、apply、bind调用。
函数绑定运算符是并排的两个冒号（::），双冒号左边是一个对象，右边是一个函数。该运算符会自动将左边的对象，作为上下文环境（即this对象），绑定到右边的函数上面。    
箭头函数不会自动绑定局部变量，如this，arguments，super(ES6)，new.target(ES6)等，所以箭头函数没有它自己的this值，箭头函数内的this值继承自外围作用域。在箭头函数中调用 this 时，仅仅是简单的沿着作用域链向上寻找，找到最近的一个 this 拿来使用。

六、this关键字修改指向：Apply、call、bind 的异同

通俗易懂：call、apply、bind三者的用法和区别_hexinyu_1022的博客-CSDN博客_callapplybind的用法和区别

相同点：

①都是要改变this指向；
②第一个参数是this要指向的对象；
③都可以利用后续的参数。

不同点：

call()方法，参数将依次传递给借用的方法作参数，即fn.call(thisobj, arg1,arg2,arg3...argn)，有n个参数；
apply()方法，第一个参数是对象，第二个参数是数组，fn.apply(thisobj,arg)，此处的arg是一个数组（argnments伪数组）,只有两个参数；
bind()方法，可以有多个参数，但需要注意形参顺序。使用更灵活，可调函数，可不调函数，使用最多。不调函数的写法同apply；修改指向并调用函数的写法 => fn.bind(thisobj, arg)()；

六、同源策略

解决Ajax跨域问题的三个方案：

1、CORS设置响应头信息
2、JSONP + padding

JSONP原理：动态创建一个script标签 ，添加到body中，设置script标签的src属性，属性值就是一个接口，通过接口上的某个参数向服务器传递一个函数，通过这个回调函数接收服务器的数据，通过jsonp格式获取的服务器数据大多数都是 object类型。
应用场景：在网上经常看到别人的blog中在用jsonp模仿360和百度进行跨域拿数据,这两者就是典型的跨域请求案例.又比如在近期开发中前端部分用的是vue.js进行开发,所以跟后台进行交互的时候就可以通过跨域进行通信,正好用的jsonp，另外，qq空间大部分用的都是jsonp。
jsonp优点:
完美解决在测试或者开发中获取不同域下的数据,用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。简单来说数据的格式没有发生很大变化。
jsonp缺点:
1.jsonp只支持get请求而不支持post请求,也即是说如果想传给后台一个json格式的数据,此时问题就来了,浏览器会报一个http状态码415错误,告诉你请求格式不正确,这让我很蛋疼(在登录注册中需要给后台传一大串数据),如果都用参数的形式拼接在url后面的话不太现实,后台取值也会显得繁琐；
2.在登录模块中需要用到session来判断当前用户的登录状态,这时候由于是跨域的原因,前后台的取到的session是不一样的,那么就不能就行session来判断；
3.由于jsonp存在安全性问题，后来考虑到上面的一系列问题,采用的是后台进行设置允许跨域请求(但还是存在缺陷的,实质上还是跨域,如上面说的session问题).Header set Access-Control-Allow-Origin * 
为了防止XSS攻击我们的服务器， 我们可以限制域，比如Access-Control-Allow-Origin: http://blog.csdn.net
安全防范:
1.防止callback参数意外截断js代码,特殊字符单引号双引号,换行符存在风险.
2.防止callback参数恶意添加script标签,造成xss漏洞
3.防止跨域请求滥用,阻止非法站点恶意调用

3、proxy（服务器代理）
 

七、get 和 post 的区别

详细解析：计算机网络2:get和post的区别_小西几的技术博客_51CTO博客

共同点：
无论是get还是post，都是可以发送数据，也可以接受数据。
区别：
①get是以url方式传递数据，而post是以http请求中的body部分传递数据 ，所以说post更安全；
②get传递数据时，直接在浏览器地址栏可以看到；而post可以使用开发者工具中看到；
③get传递数据，中文不会被编码或有可能出现乱码，而post支持多种编码因此不需要重新进行编码；
④get在IE下会走缓存，而post不会。

方法	str	attr

对跨域的理解及解决方案

本地存储session，与cookie的区别

promise

Ajax和json区别

什么是高内聚和低耦合
高内聚 ：
模块内部高内聚 。 一个系统有多个模块组成，在划分模块时，要把功能关系紧密的放到一个模块中，这就叫做高内聚。
低耦合：
功能关系远的放到其它模块中。模块之间的联系越少越好，接口越简单越好，这叫做低耦合，也称为细线通信。

作用域链的理解
作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的
js的作用域有哪些安全隐患
污染全局环境，或者造成内存泄露的问题
变量的提升