前端技能拾遗

本文主要是对自己前端知识遗漏点的总结和归纳，希望对大家有用，会持续更新的~

解释语言和编译型语言

解释型语言与编译型语言的区别翻译时间的不同。
编译型语言在程序执行之前，有一个单独的编译过程，将程序翻译成机器语言，以后执行这个程序的时候，就不用再进行翻译了。
解释型语言，是在运行的时候将程序翻译成机器语言，所以运行速度相对于编译型语言要慢。
C/C++ 等都是编译型语言，而Java，C#等都是解释型语言。而JS是与编译型语言类似，一样要经过，词法分析，语法分析，AST生成三个步骤。

模块

详细解释请参考参考

commonJS

1. CommonJS 模块中，如果你 require 了一个模块，那就相当于你执行了该文件的代码并最终获取到模块输出的module.exports 对象的一份拷贝。
2. CommonJS 模块中 require 引入模块的位置不同会对输出结果产生影响，并且会生成值的拷贝
3. CommonJS 模块重复引入的模块并不会重复执行，再次获取模块只会获得之前获取到的模块的拷贝

ES6 输出值的引用

1. ES6 模块中就不再是生成输出对象的拷贝，而是动态关联模块中的值。
2. import 命令会被 JavaScript 引擎静态分析，优先于模块内的其他内容执行。
3. export 命令会有变量声明提前的效果。

空对象

Object.create(null)的结果和{}很像，但是它不会创建Object.prototype这个委托，所以它要比{}更空。

null和undefined的区别

null表示真正的“无”，代表一个空对象指针，即变量未指向任何对象。
Undefined 表示缺省值，即此处应该有一个值但是还没有定义。
在转换为数值类型时，而知区别很大

Number(undefined)
// NaN

5 + undefined
// NaN

Number(null)
// 0

理解js中的构造函数

function MyFunction() {}
var obj1 = new MyFunction()
var obj2 = new MyFunction()

其实可以将上面的代码等价为

funtion MyFunction(){}
var obj1 = {}
MyFunction.call(obj1)

js内部先用new操作符创建一个对象，紧接着就将函数的this绑定到这个对象上来执行这个函数。

硬绑定bind

参考
不同：
bind 是返回对应函数，便于稍后调用；apply 、call 则是立即调用 。

实现

Function.prototype.bind2 = function (context) {

    if (typeof this !== "function") {
      throw new Error("Function.prototype.bind - what is trying to be bound is not callable");
    }

    var self = this;
    var args = Array.prototype.slice.call(arguments, 1);

    var fNOP = function () {};

    var fBound = function () {
        var bindArgs = Array.prototype.slice.call(arguments);
        return self.apply(this instanceof fNOP ? this : context, args.concat(bindArgs));
    }

    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();
    return fBound;
}

箭头函数

function foo() {
    return (a) => {
        console.log( this.a ); 
    };
}
var obj1 = { a:2 };
var obj2 = { a:3 };
var bar = foo.call( obj1 );
bar.call( obj2 ); // 2, 不是 3 !

foo() 内部创建的箭头函数会捕获调用时 foo() 的 this。由于 foo() 的 this 绑定到 obj1， bar(引用箭头函数)的 this 也会绑定到 obj1，箭头函数的绑定无法被修改。(new 也不 行!)

安全

xss（跨站脚本攻击）

其原理是攻击者向有XSS漏洞的网站中输入(传入)恶意的HTML代码，当其它用户浏览该网站时，这段HTML代码会自动执行，从而达到攻击的目的。如，盗取用户Cookie、破坏页面结构、重定向到其它网站等。
详细内容可参考这里

csrf(跨站请求伪造)

macrotask和microtask

请参考

HTTP

keep-alive

请参考

为什么要进行三次握手

详细内容请参考

AJAX

React

react-router实现原理

请参考
请参考2