本文主要是对自己前端知识遗漏点的总结和归纳,希望对大家有用,会持续更新的~
解释语言和编译型语言
解释型语言与编译型语言的区别翻译时间的不同。编译型语言在程序执行之前,有一个单独的编译过程,将程序翻译成机器语言,以后执行这个程序的时候,就不用再进行翻译了。解释型语言,是在运行的时候将程序翻译成机器语言,所以运行速度相对于编译型语言要慢。C/C++ 等都是编译型语言,而 Java,C# 等都是解释型语言。而 JS 是与编译型语言类似,一样要经过,词法分析,语法分析,AST 生成三个步骤。
模块
详细解释请参考参考
commonJS
CommonJS 模块中,如果你 require 了一个模块,那就相当于你执行了该文件的代码并最终获取到模块输出的 module.exports 对象的一份拷贝。
CommonJS 模块中 require 引入模块的位置不同会对输出结果产生影响,并且会生成值的拷贝
CommonJS 模块重复引入的模块并不会重复执行,再次获取模块只会获得之前获取到的模块的拷贝
ES6 输出值的引用
ES6 模块中就不再是生成输出对象的拷贝,而是动态关联模块中的值。
import 命令会被 JavaScript 引擎静态分析,优先于模块内的其他内容执行。
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