前端技能拾遗

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

解释语言和编译型语言

解释型语言与编译型语言的区别翻译时间的不同。编译型语言在程序执行之前，有一个单独的编译过程，将程序翻译成机器语言，以后执行这个程序的时候，就不用再进行翻译了。解释型语言，是在运行的时候将程序翻译成机器语言，所以运行速度相对于编译型语言要慢。 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)
// NaN5 + undefined
// NaNNumber(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 也不行!)