前端妙技拾遗

2023年12月16日 203次阅读来源: wupengyu

本文主假如对本身前端学问脱漏点的总结和归结，愿望对人人有效，会延续更新的~

诠释言语和编译型言语

诠释型言语与编译型言语的区分翻译时刻的差别。
编译型言语在顺序实行之前，有一个零丁的编译历程，将顺序翻译成机器言语，今后实行这个顺序的时刻，就不必再举行翻译了。
诠释型言语，是在运转的时刻将顺序翻译成机器言语，所以运转速率相对于编译型言语要慢。
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 也不行!)