一、你不知道的JavaScript
1、作用域
作用域 LHS
RHS
- RHS查询与简单地查找某个变量的值别无二致,而LHS查询则是试图找到变量的容器本身,从而可以对其赋值。从这个角度说,RHS并不是真正意义上的“赋值操作的右侧”,更准确地说是“非左侧”。RHS理解成retrieve his source value(取到它的源值),这意味着“得到某某的值”。
- 非严格模式下,当引擎执行LHS查询时,如果在顶层(全局作用域)中也无法找到目标变量,全局作用域中就会创建一个具有该名称的变量,并将其返还给引擎。严格模式下则会抛出异常未声明
ReferenceError
,另外还有typeError -
提升: 引擎会在解释JavaScript代码之前首先对其进行编译。编译阶段中的一部分工作就是找到所有的声明,并用合适的作用域将它们关联起来。当你看到
var a = 2;
时,可能会认为这是一个声明。但JavaScript实际上会将其看成两个声明:var a;
和a = 2
;。第一个定义声明是在编译阶段进行的。第二个赋值声明会被留在原地等待执行阶段。只有声明本身会被提升,而赋值或其他运行逻辑会留在原地。函数声明的提升高于变量声明。 - 匿名函数
(function(args){})(args)
-
var
和let
,let关键字可以将变量绑定到所在的任意作用域中(通常是{ .. }内部)。换句话说,let为其声明的变量隐式地劫持了所在的块作用域。let
只能运行在严格模式下。var foo = true; if (foo) { let bar = foo * 2; bar = something( bar ); console.log( bar ); } console.log( bar ); // 因为let , 对于用let声明的bar,if(){}变成一个块作用域,所以在外部引用bar 时, 未声明,不存在变量 ReferenceError var foo = true; if (foo) { var a = 2; const b = 3; // 包含在if中的块作用域常量 a = 3; // 正常! b = 4; // 错误! } console.log( a ); // 3 console.log( b ); // ReferenceError! //const同样会劫持块作用域,b在外部引用就是未声明,var声明的a则不存在劫持块作用域,const定义变量值不可改变
2、闭包
-
把内部函数baz传递给bar,当调用这个内部函数时(现在叫作fn),它涵盖的foo()内部作用域的闭包就可以观察到了,因为它能够访问a。
function foo() { var a = 2; function baz() { console.log( a ); // 2 } bar( baz ); } function bar(fn) { fn(); // 妈妈快看呀,这就是闭包! } //间接传递函数 var fn; function foo() { var a = 2; function baz() { console.log( a ); } fn = baz; // 将baz分配给全局变量 } function bar() { fn(); // 妈妈快看呀,这就是闭包! } foo(); bar(); // 2 // jquery example function setupBot(name, selector) { $( selector ).click( function activator() { console.log( "Activating:" + name ); } ); } setupBot( "Closure Bot 1", "#bot_1" ); setupBot( "Closure Bot 2", "#bot_2" );
-
虽然以下段代码可以正常工作,但严格来讲它并不是闭包。为什么?因为函数(示例代码中的IIFE)并不是在它本身的词法作用域以外执行的。它在定义时所在的作用域中执行(而外部作用域,也就是全局作用域也持有a)。a是通过普通的词法作用域查找而非闭包被发现的。
var a = 2; (function IIFE() { console.log( a ); })();
-
循环中的闭包
for (var i=1; i<=5; i++) { setTimeout( function timer() { console.log( i ); }, i*1000 ); } //运行时会以每秒一次的频率输出五次6 // for循环每次迭代并没有创建一个新的作用域 for (var i=1; i<=5; i++) { (function() { setTimeout( function timer() { console.log( i ); }, i*1000 ); })(); } // 不行,虽然每次迭代立即执行函数创建新的作用域,但是一个空作用域,不包含i for (var i=1; i<=5; i++) { (function(j) { // 或则 var j = i; setTimeout( function timer() { console.log( j ); }, j*1000 ); })( i ); } // 每秒一次,输出1~5 , 每次迭代,变量i当前值赋予函数的参数 j 并被封装到函数作用域中。 // let劫持块作用域,这样for每次迭代对let声明的i 都是一个新的块作用域 for (let i=1; i<=5; i++) { setTimeout( function timer() { console.log( i ); }, i*1000 ); }
-
模块,如下代码:CoolModule()只是一个函数,必须要通过调用它来创建一个模块实例。如果不执行外部函数,内部作用域和闭包都无法被创建。CoolModule()返回一个用对象字面量语法{ key: value, ... }来表示的对象。这个返回的对象中含有对内部函数而不是内部数据变量的引用。我们保持内部数据变量是隐藏且私有的状态。可以将这个对象类型的返回值看作本质上是模块的公共API。这个对象类型的返回值最终被赋值给外部的变量foo,然后就可以通过它来访问API中的属性方法,比如foo.doSomething()。
function CoolModule() { var something = "cool"; var another = [1, 2, 3]; function doSomething() { console.log( something ); } function doAnother() { console.log( another.join( " ! " ) ); } return { doSomething: doSomething, doAnother: doAnother }; } var foo = CoolModule(); foo.doSomething(); // cool foo.doAnother(); // 1 ! 2 ! 3 //我们将模块函数转换成了IIFE(参见第3章),立即调用这个函数并将返回值直接赋值给单例的模块实例标识符foo。 var foo = (function CoolModule() { var something = "cool"; var another = [1, 2, 3]; function doSomething() { console.log( something ); } function doAnother() { console.log( another.join( " ! " ) ); } return { doSomething: doSomething, doAnother: doAnother }; })(); foo.doSomething(); // cool foo.doAnother(); // 1 ! 2 ! 3 //模块也是普通的函数,因此可以接受参数 function CoolModule(id) { function identify() { console.log( id ); } return { identify: identify }; } var foo1 = CoolModule( "foo 1" ); var foo2 = CoolModule( "foo 2" ); foo1.identify(); // "foo 1" foo2.identify(); // "foo 2" //模块模式另一个简单但强大的用法是命名将要作为公共API返回的对象 var foo = (function CoolModule(id) { function change() { // 修改公共API publicAPI.identify = identify2; } function identify1() { console.log( id ); } function identify2() { console.log( id.toUpperCase() ); } var publicAPI = { change: change, identify: identify1 }; return publicAPI; })( "foo module" ); foo.identify(); // foo module foo.change(); foo.identify(); // FOO MODULE
-
现代的模块机制
var MyModules = (function Manager() { var modules = {}; function define(name, deps, impl) { for (var i=0; i<deps.length; i++) { deps[i] = modules[deps[i]]; } modules[name] = impl.apply( impl, deps ); // apply函数 继承,deps作为参数传入,此处为函数依赖的其他函数 } function get(name) { return modules[name]; } return { define: define, get: get }; })(); //这段代码的核心是modules[name] = impl.apply(impl, deps)。 //为了模块的定义引入了包装函数(可以传入任何依赖),并且将返回值,也就是模块的API,储存在一个根据名字来管理的模块列表中 MyModules.define( "bar", [], function() { function hello(who) { return "Let me introduce: " + who; } return { hello: hello }; } ); MyModules.define( "foo", ["bar"], function(bar) { var hungry = "hippo"; function awesome() { console.log( bar.hello( hungry ).toUpperCase() ); } return { awesome: awesome }; } ); var bar = MyModules.get( "bar" ); var foo = MyModules.get( "foo" ); console.log( bar.hello( "hippo" ) ); // <i>Let me introduce: hippo</i> foo.awesome(); // LET ME INTRODUCE: HIPPO
-
ES6模块机制 , ES6的模块没有“行内”格式,必须被定义在独立的文件中(一个文件一个模块)。浏览器或引擎有一个默认的“模块加载器”(可以被重载,但这远超出了我们的讨论范围)可以在导入模块时同步地加载模块文件。
//bar.js function hello(who) { return "Let me introduce: " + who; } export hello; //foo.js // 仅从"bar"模块导入hello() import hello from "bar"; var hungry = "hippo"; function awesome() { console.log( hello( hungry ).toUpperCase() ); } export awesome;
import可以将一个模块中的一个或多个API导入到当前作用域中,并分别绑定在一个变量上(在我
们的例子里是hello)。module会将整个模块的API导入并绑定到一个变量上(在我们的例子里是
foo和bar)。export会将当前模块的一个标识符(变量、函数)导出为公共API。
当函数可以记住并访问所在的词法作用域,即使函数是在当前词法作用域之外执行,这时就产生了闭包。
3、 动态作用域
- 事实上JavaScript并不具有动态作用域。它只有词法作用域,简单明了。但是this机制某种程度上很像动态作用域。
主要区别:词法作用域是在写代码或者说定义时确定的,而动态作用域是在运行时确定的。(this也是!)词法作用域关注函数在何处声明,而动态作用域关注函数从何处调用function foo() { console.log( a ); // 2 } function bar() { var a = 3; foo(); } var a = 2; bar(); // foo中的a 会通过RHS查询到全局的a,基于词法作用域查找 // 词法作用域最重要的特征是它的定义过程发生在代码的书写阶段 // 如果基于动态作用域,作用域链是基于调用栈的,即foo向上查找bar中的a
4、 this
对this的认识,this既不指向函数自身也不指向函数的词法作用域,抛开以前错误的假设和理解。this实际上是在函数被调用时发生的绑定,它指向什么完全取决于函数在哪里被调用。
1、 this并不像我们所想的那样指向函数本身
2、this在任何情况下都不指向函数的词法作用域。
function foo() {
var a = 2;
this.bar();
}
function bar() {
console.log( this.a );
}
foo(); // ReferenceError: a is not defined
this是在运行时进行绑定的,并不是在编写时绑定,它的上下文取决于函数调用时的各种条件。this的绑定和函数声明的位置没有任何关系,只取决于函数的调用方式。
- 绑定规则
- 1、默认绑定,当调用foo()时,this.a被解析成了全局变量a。为什么?因为在本例中,函数调用时应用了this的默认绑定,因此this指向全局对象。foo()是直接使用不带任何修饰的函数引用进行调用的,因此只能使用默认绑定,无法应用其他规则。如果使用严格模式(strict mode),则不能将全局对象用于默认绑定,因此this会绑定到undefined
function foo() { // "use strict"; 严格模式 console.log( this.a ); } var a = 2; foo(); // 2
- 2、隐式绑定,如下,调用位置会使用obj上下文来引用函数,因此你可以说函数被调用时obj对象“拥有”或者“包含”它。当foo()被调用时,它的前面确实加上了对obj的引用。当函数引用有上下文对象时,隐式绑定规则会把函数调用中的this绑定到这个上下文对象。因为调用foo()时this被绑定到obj,因此this.a和obj.a是一样的。对象属性引用链中只有上一层或者说最后一层在调用位置中起作用,如
obj1.obj2.foo();
则foo()
的this
指向obj2
。隐式绑定时,我们必须在一个对象内部包含一个指向函数的属性,并通过这个属性间接引用函数,从而把this间接(隐式)绑定到这个对象上。
如下代码,虽然bar是obj.foo的一个引用,但是实际上,它引用的是foo函数本身,因此此时的bar()其实是一个不带任何修饰的函数调用,因此应用了默认绑定。function foo() { console.log( this.a ); } var obj = { a: 2, foo: foo }; obj.foo(); // 2
参数传递其实就是一种隐式赋值,因此我们传入函数时也会被隐式赋值,function foo() { console.log( this.a ); } var obj = { a: 2, foo: foo }; var bar = obj.foo; // 函数别名! var a = "oops, global"; // a是全局对象的属性 bar(); // "oops, global
fn = obj.foo
function foo() { console.log( this.a ); } function doFoo(fn) { // fn其实引用的是foo fn(); // <-- 调用位置! } var obj = { a: 2, foo: foo }; var a = "oops, global"; // a是全局对象的属性 doFoo( obj.foo ); // "oops, global" //js的内置函数一样,将函数传递给另一函数的形参,其中包含了隐式赋值 function foo() { console.log( this.a ); } var obj = { a: 2, foo: foo }; var a = "oops, global"; // a是全局对象的属性 setTimeout( obj.foo, 100 ); // "oops, global" //JavaScript环境中内置的setTimeout()函数实现和下面的伪代码类似 function setTimeout(fn,delay) { // 等待delay毫秒 fn(); // <-- 调用位置! }
-
显示绑定,通过
call()
和apply()
函数实现,它们的第一个参数是一个对象,是给this准备的,接着在调用函数时将其绑定到this。因为你可以直接指定this的绑定对象,因此我们称之为显式绑定。function foo() { console.log( this.a ); } var obj = { a:2 }; //显示指定foo函数中的this并执行该函数 foo.call( obj ); // 2 //硬绑定,是一种非常常用的模式,所以ES5提供了内置的方法Function.prototype.bind,它的用法如下 function foo(something) { console.log( this.a, something ); return this.a + something; } var obj = { a:2 }; var bar = foo.bind( obj );//将foo函数的this绑定到obj,返回一个新的foo函数实例bar var b = bar( 3 ); // 2 3 console.log( b ); // 5 //第三方库的许多函数,以及JavaScript语言和宿主环境中许多新的内置函数,都提供了一个可选的参数, //通常被称为“上下文”(context),其作用和bind(..)一样,确保你的回调函数使用指定的this。 function foo(el) { console.log( el, this.id ); } var obj = { id: "awesome" }; // 调用foo(..)时把this绑定到obj [1, 2, 3].forEach( foo, obj ); // 1 awesome 2 awesome 3 awesome //这些函数实际上就是通过call(..)或者apply(..)实现了显式绑定,这样你可以少写一些代码。
-
new 绑定
function foo(a) { this.a = a; } var bar = new foo(2); //new foo(2)执行时 foo的this指向new新建的对象foo //若不用new直接执行foo(),其this指向全局作用域,同默认规则 console.log( bar.a ); // 2 // 使用new来调用函数,或者说发生构造函数调用时,会自动执行下面的操作 //1. 创建(或者说构造)一个全新的对象。 //2. 这个新对象会被执行[[Prototype]]连接。 //3. 这个新对象会绑定到函数调用的this。 //4. 如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象。 //new foo(2)创建一个全新的foo对象,this指向的就是foo对象,返回foo
- 1、默认绑定,当调用foo()时,this.a被解析成了全局变量a。为什么?因为在本例中,函数调用时应用了this的默认绑定,因此this指向全局对象。foo()是直接使用不带任何修饰的函数引用进行调用的,因此只能使用默认绑定,无法应用其他规则。如果使用严格模式(strict mode),则不能将全局对象用于默认绑定,因此this会绑定到undefined
-
胖箭头
=>
,箭头函数不使用this的四种标准规则,而是根据外层(函数或者全局)作用域来决定this。箭头函数的绑定无法被修改。function foo() { setTimeout(() => { // 这里的this在词法上继承自foo() console.log( this.a ); },100); } var obj = { a:2 }; foo.call( obj ); // 2
5、对象
-
语法,声明
var myObj = { key: value // ... }; var myObj = new Object(); myObj.key = value;
-
对象类型
// 对象是JavaScript的基础。在JavaScript中一共有六种主要类型,基本类型(术语是“语言类型”): string number boolean null undefined object //基本类型按照值传递 //内置对象 String Number Boolean Object Function Array Date RegExp Error
-
值传递,基本类型按照值传递,对象其实也是按值传递。js的基础类型原始值存储在栈中,对象存储在堆中,堆地址不能直接访问,所有栈中存储它的地址,引用值是存储栈中的指向堆的地址。参考https://www.zhihu.com/question/27114726/answer/35481766
var obj = {x : 1}; function foo(o) { o = 100; } foo(obj); console.log(obj.x); // 仍然是1, obj并未被修改为100. // var obj1 = { value:'111' }; var obj2 = { value:'222' }; function changeStuff(obj){ obj.value = '333'; obj = obj2; return obj.value; } var foo = changeStuff(obj1); console.log(foo);// '222' 参数obj指向了新的对象obj2 console.log(obj1.value);//'333'
-
ES6增加了可计算属性名,可以将对象的key用变量表示,即对变量加上
[]
var prefix = "foo"; var a="bar" var myObject = { [a]: "hello", ["baz"]: "world" }; console.log(myObject["bar"]); // hello console.log(myObject["baz"]); // world
-
ES6定义了Object.assign(..)方法来实现浅复制,方法的第一个参数是目标对象,之后还可以跟一个或多个源对象。
var newObj = Object.assign( {}, myObject ); newObj.a; // 2 newObj.b === anotherObject; // true newObj.c === anotherArray; // true newObj.d === anotherFunction; // true
6、类
二、Node.js Interview
1、内存释放
- 引用类型是在没有引用之后, 通过 v8 的 GC 自动回收, 值类型如果是处于闭包的情况下, 要等闭包没有引用才会被 GC 回收, 非闭包的情况下等待 v8 的新生代 (new space) 切换的时候回收.
-
内存泄漏几种情况
-
全局变量
a = 10; //未声明对象。 global.b = 11; //全局变量引用 //全局变量直接挂在 root 对象上,不会被清除掉。 ////非严格模式下bar会被定义到全局变量,页面中的全局变量只有在页面关闭后才会被销毁 function foo(arg) { bar = "some text"; } //// function foo() { this.var1 = "potential accidental global"; } // Foo 被调用时, this 指向全局变量(window),意外的创建了全局变量. foo();
-
闭包,闭包会引用到父级函数中的变量,如果闭包未释放,就会导致内存泄漏。如下代码是 inner 直接挂在了 root 上,从而导致内存泄漏(bigData 不会释放)。
function out() { const bigData = new Buffer(100); inner = function () { void bigData; } }
-
未销毁的定时器和全局函数,如下代码:如果后续 renderer 元素被移除, 整个定时器实际上没有任何作用. 但如果你没有回收定时器, 整个定时器依然有效, 不但定时器无法被内存回收, 定时器函数中的依赖也无法回收. 在这个案例中的 serverData 也无法被回收.
var serverData = loadData(); setInterval(function() { var renderer = document.getElementById('renderer'); if(renderer) { renderer.innerHTML = JSON.stringify(serverData); } }, 5000); // 每 5 秒调用一次
事件监听
-
- Js中的内存管理,参考https://zhuanlan.zhihu.com/p/30552148