Node.js相關知識

一、你不知道的JavaScript

1、作用域

作用域 LHS RHS

  • RHS查詢與簡單地查找某個變量的值別無二致，而LHS查詢則是試圖找到變量的容器本身，從而可以對其賦值。從這個角度說，RHS并不是真正意義上的“賦值操作的右側”，更準確地說是“非左側”。RHS理解成retrieve his source value（取到它的源值），這意味著“得到某某的值”。
  • 非嚴格模式下，當引擎執(zhí)行LHS查詢時，如果在頂層（全局作用域）中也無法找到目標變量，全局作用域中就會創(chuàng)建一個具有該名稱的變量，并將其返還給引擎。嚴格模式下則會拋出異常未聲明ReferenceError，另外還有typeError
  • 提升： 引擎會在解釋JavaScript代碼之前首先對其進行編譯。編譯階段中的一部分工作就是找到所有的聲明，并用合適的作用域將它們關聯(lián)起來。當你看到var a = 2;時，可能會認為這是一個聲明。但JavaScript實際上會將其看成兩個聲明：var a;和a = 2;。第一個定義聲明是在編譯階段進行的。第二個賦值聲明會被留在原地等待執(zhí)行階段。只有聲明本身會被提升，而賦值或其他運行邏輯會留在原地。函數(shù)聲明的提升高于變量聲明。
  • 匿名函數(shù) (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、閉包

  • 把內部函數(shù)baz傳遞給bar，當調用這個內部函數(shù)時（現(xiàn)在叫作fn），它涵蓋的foo()內部作用域的閉包就可以觀察到了，因為它能夠訪問a。

    function foo() {
    var a = 2;

    function baz() {
        console.log( a ); // 2
    }

    bar( baz );
}

function bar(fn) {
    fn(); // 媽媽快看呀，這就是閉包！
}

//間接傳遞函數(shù)
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" );

  • 雖然以下段代碼可以正常工作，但嚴格來講它并不是閉包。為什么？因為函數(shù)（示例代碼中的IIFE）并不是在它本身的詞法作用域以外執(zhí)行的。它在定義時所在的作用域中執(zhí)行（而外部作用域，也就是全局作用域也持有a）。a是通過普通的詞法作用域查找而非閉包被發(fā)現(xiàn)的。

    var a = 2;

(function IIFE() {
    console.log( a );
})();

  • 循環(huán)中的閉包

    for (var i=1; i<=5; i++) {
    setTimeout( function timer() {
        console.log( i );
    }, i*1000 );
}
//運行時會以每秒一次的頻率輸出五次6
// for循環(huán)每次迭代并沒有創(chuàng)建一個新的作用域


for (var i=1; i<=5; i++) {
    (function() {
        setTimeout( function timer() {
            console.log( i );
        }, i*1000 );
    })();
}
// 不行，雖然每次迭代立即執(zhí)行函數(shù)創(chuàng)建新的作用域，但是一個空作用域，不包含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當前值賦予函數(shù)的參數(shù) j 并被封裝到函數(shù)作用域中。


// let劫持塊作用域，這樣for每次迭代對let聲明的i 都是一個新的塊作用域
for (let i=1; i<=5; i++) {
  setTimeout( function timer() {
      console.log( i );
  }, i*1000 );
}

  • 模塊，如下代碼：CoolModule()只是一個函數(shù)，必須要通過調用它來創(chuàng)建一個模塊實例。如果不執(zhí)行外部函數(shù)，內部作用域和閉包都無法被創(chuàng)建。CoolModule()返回一個用對象字面量語法{ key: value, ... }來表示的對象。這個返回的對象中含有對內部函數(shù)而不是內部數(shù)據(jù)變量的引用。我們保持內部數(shù)據(jù)變量是隱藏且私有的狀態(tài)?？梢詫⑦@個對象類型的返回值看作本質上是模塊的公共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

 //我們將模塊函數(shù)轉換成了IIFE（參見第3章），立即調用這個函數(shù)并將返回值直接賦值給單例的模塊實例標識符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

//模塊也是普通的函數(shù)，因此可以接受參數(shù)
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

  • 現(xiàn)代的模塊機制

    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函數(shù) 繼承，deps作為參數(shù)傳入，此處為函數(shù)依賴的其他函數(shù)
   }
   function get(name) {
       return modules[name];
   }
   return {
       define: define,
       get: get
   };
})();
//這段代碼的核心是modules[name] = impl.apply(impl, deps)。
//為了模塊的定義引入了包裝函數(shù)（可以傳入任何依賴），并且將返回值，也就是模塊的API，儲存在一個根據(jù)名字來管理的模塊列表中


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會將當前模塊的一個標識符（變量、函數(shù)）導出為公共API。

當函數(shù)可以記住并訪問所在的詞法作用域，即使函數(shù)是在當前詞法作用域之外執(zhí)行，這時就產生了閉包。

3、 動態(tài)作用域

  • 事實上JavaScript并不具有動態(tài)作用域。它只有詞法作用域，簡單明了。但是this機制某種程度上很像動態(tài)作用域。 
     function foo() {
    console.log( a ); // 2
}

function bar() {
    var a = 3;
    foo();
}

var a = 2;

bar();
// foo中的a 會通過RHS查詢到全局的a，基于詞法作用域查找
// 詞法作用域最重要的特征是它的定義過程發(fā)生在代碼的書寫階段
// 如果基于動態(tài)作用域，作用域鏈是基于調用棧的，即foo向上查找bar中的a
    主要區(qū)別：詞法作用域是在寫代碼或者說定義時確定的，而動態(tài)作用域是在運行時確定的。（this也是?。┰~法作用域關注函數(shù)在何處聲明，而動態(tài)作用域關注函數(shù)從何處調用

4、 this

對this的認識，this既不指向函數(shù)自身也不指向函數(shù)的詞法作用域，拋開以前錯誤的假設和理解。this實際上是在函數(shù)被調用時發(fā)生的綁定，它指向什么完全取決于函數(shù)在哪里被調用。
1、 this并不像我們所想的那樣指向函數(shù)本身
2、this在任何情況下都不指向函數(shù)的詞法作用域。

function foo() {
    var a = 2;
    this.bar();
}

function bar() {
    console.log( this.a );
}

foo(); // ReferenceError: a is not defined

this是在運行時進行綁定的，并不是在編寫時綁定，它的上下文取決于函數(shù)調用時的各種條件。this的綁定和函數(shù)聲明的位置沒有任何關系，只取決于函數(shù)的調用方式。

  • 綁定規(guī)則
    • 1、默認綁定，當調用foo()時，this.a被解析成了全局變量a。為什么？因為在本例中，函數(shù)調用時應用了this的默認綁定，因此this指向全局對象。foo()是直接使用不帶任何修飾的函數(shù)引用進行調用的，因此只能使用默認綁定，無法應用其他規(guī)則。如果使用嚴格模式（strict mode），則不能將全局對象用于默認綁定，因此this會綁定到undefined 
      function foo() { 
    // "use strict"; 嚴格模式
    console.log( this.a );
}

var a = 2;

foo(); // 2
    • 2、隱式綁定，如下，調用位置會使用obj上下文來引用函數(shù)，因此你可以說函數(shù)被調用時obj對象“擁有”或者“包含”它。當foo()被調用時，它的前面確實加上了對obj的引用。當函數(shù)引用有上下文對象時，隱式綁定規(guī)則會把函數(shù)調用中的this綁定到這個上下文對象。因為調用foo()時this被綁定到obj，因此this.a和obj.a是一樣的。對象屬性引用鏈中只有上一層或者說最后一層在調用位置中起作用，如obj1.obj2.foo(); 則foo()的this指向obj2。隱式綁定時，我們必須在一個對象內部包含一個指向函數(shù)的屬性，并通過這個屬性間接引用函數(shù)，從而把this間接（隱式）綁定到這個對象上。 
      function foo() { 
    console.log( this.a );
}

var obj = { 
    a: 2,
    foo: foo 
};

obj.foo(); // 2
      如下代碼，雖然bar是obj.foo的一個引用，但是實際上，它引用的是foo函數(shù)本身，因此此時的bar()其實是一個不帶任何修飾的函數(shù)調用，因此應用了默認綁定。 
      function foo() { 
    console.log( this.a );
}

var obj = { 
    a: 2,
    foo: foo 
};

var bar = obj.foo; // 函數(shù)別名！
var a = "oops, global"; // a是全局對象的屬性

bar(); // "oops, global
      參數(shù)傳遞其實就是一種隱式賦值，因此我們傳入函數(shù)時也會被隱式賦值，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的內置函數(shù)一樣，將函數(shù)傳遞給另一函數(shù)的形參，其中包含了隱式賦值
function foo() { 
    console.log( this.a );
}

var obj = { 
    a: 2,
    foo: foo 
};

var a = "oops, global"; // a是全局對象的屬性

setTimeout( obj.foo, 100 ); // "oops, global"


//JavaScript環(huán)境中內置的setTimeout()函數(shù)實現(xiàn)和下面的偽代碼類似
function setTimeout(fn,delay) {
    // 等待delay毫秒
    fn(); // <-- 調用位置！
}
    • 顯示綁定，通過call()和apply()函數(shù)實現(xiàn)，它們的第一個參數(shù)是一個對象，是給this準備的，接著在調用函數(shù)時將其綁定到this。因為你可以直接指定this的綁定對象，因此我們稱之為顯式綁定。 
      function foo() { 
    console.log( this.a );
}

var obj = { 
    a:2
};
//顯示指定foo函數(shù)中的this并執(zhí)行該函數(shù)
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函數(shù)的this綁定到obj,返回一個新的foo函數(shù)實例bar

var b = bar( 3 ); // 2 3 
console.log( b ); // 5


//第三方庫的許多函數(shù)，以及JavaScript語言和宿主環(huán)境中許多新的內置函數(shù)，都提供了一個可選的參數(shù)，
//通常被稱為“上下文”（context），其作用和bind(..)一樣，確保你的回調函數(shù)使用指定的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
//這些函數(shù)實際上就是通過call(..)或者apply(..)實現(xiàn)了顯式綁定，這樣你可以少寫一些代碼。
    • new 綁定 
      function foo(a) { 
    this.a = a;
} 

var bar = new foo(2);
//new foo(2)執(zhí)行時 foo的this指向new新建的對象foo
//若不用new直接執(zhí)行foo()，其this指向全局作用域，同默認規(guī)則 

console.log( bar.a ); // 2

// 使用new來調用函數(shù)，或者說發(fā)生構造函數(shù)調用時，會自動執(zhí)行下面的操作
//1. 創(chuàng)建（或者說構造）一個全新的對象。
//2. 這個新對象會被執(zhí)行[[Prototype]]連接。
//3. 這個新對象會綁定到函數(shù)調用的this。
//4. 如果函數(shù)沒有返回其他對象，那么new表達式中的函數(shù)調用會自動返回這個新對象。

//new foo(2)創(chuàng)建一個全新的foo對象，this指向的就是foo對象，返回foo
  • 胖箭頭=>，箭頭函數(shù)不使用this的四種標準規(guī)則，而是根據(jù)外層（函數(shù)或者全局）作用域來決定this。箭頭函數(shù)的綁定無法被修改。 
    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' 參數(shù)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(..)方法來實現(xiàn)淺復制，方法的第一個參數(shù)是目標對象，之后還可以跟一個或多個源對象。

    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)，意外的創(chuàng)建了全局變量.
foo();

    • 閉包，閉包會引用到父級函數(shù)中的變量，如果閉包未釋放，就會導致內存泄漏。如下代碼是 inner 直接掛在了 root 上，從而導致內存泄漏（bigData 不會釋放）。

      function out() {
  const bigData = new Buffer(100);
  inner = function () {
    void bigData;
  }
}

    • 未銷毀的定時器和全局函數(shù)，如下代碼：如果后續(xù) renderer 元素被移除, 整個定時器實際上沒有任何作用. 但如果你沒有回收定時器, 整個定時器依然有效, 不但定時器無法被內存回收, 定時器函數(shù)中的依賴也無法回收. 在這個案例中的 serverData 也無法被回收.

      var serverData = loadData();
setInterval(function() {
    var renderer = document.getElementById('renderer');
    if(renderer) {
        renderer.innerHTML = JSON.stringify(serverData);
    }
}, 5000); // 每 5 秒調用一次

    • 事件監(jiān)聽

  • Js中的內存管理，參考https://zhuanlan.zhihu.com/p/30552148
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 第一章 編譯原理 js是一門編譯語言 傳統(tǒng)編譯語言流程： 分詞/詞法分析：把字符串分解成有意義的代碼塊 解析/語法...
    冥冥2017閱讀 643評論 0贊 0
  • 一、理解js作用域 1、作用域：作用域是一套規(guī)則，用于確定在何處以及如何查找變量（標字符）。2、LHS查詢：查找的...
    懷念不能閱讀 505評論 0贊 1
  • 工廠模式類似于現(xiàn)實生活中的工廠可以產生大量相似的商品，去做同樣的事情，實現(xiàn)同樣的效果;這時候需要使用工廠模式。簡單...
    舟漁行舟閱讀 8,116評論 2贊 17
  • 深入響應式 追蹤變化： 把普通js對象傳給Vue實例的data選項，Vue將使用Object.defineProp...
    冥冥2017閱讀 4,953評論 6贊 16
  • 個人入門學習用筆記、不過多作為參考依據(jù)。如有錯誤歡迎斧正 目錄 簡書好像不支持錨點、復制搜索(反正也是寫給我自己看...
    kirito_song閱讀 2,648評論 1贊 37

友情鏈接更多精彩內容