前端技能拾遗

2023年4月17日 153次阅读来源: 后端开发

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

解释语言和编译型语言

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