js函數聲明提升與變量提升

Rindia 發布于2019-08-22 15:08 / 3222人閱讀

摘要：在編譯階段，函數聲明和變量聲明都會被先處理置于執行環境的頂部，且賦值會被留在原地，這個過程稱之為提升。另外函數聲明提升不會被變量聲明覆蓋，但會被變量賦值覆蓋。

看到相關的前端面試題，總結一下知識點，大神請飄過。
JS在編譯階段，函數聲明和變量聲明都會被先處理置于執行環境的頂部，且賦值會被留在原地，這個過程稱之為提升。
舉個簡單例子：

console.log(i);
var i = 1;
function fn () {
  console.log(2)
}

實際上代碼順序是這樣的：

 function fn () {
  console.log(2)
}
var i;
console.log(i);
i = 1;

一、變量提升

變量聲明在編譯階段被處理，而變量賦值則留在原地等待執行。

console.log(i);   // undefined
var i = 1;
console.log(i);   // 1

相當于：

var i;
console.log(i);   // 由于i只聲明未賦值，輸出undefined
i = 1;
console.log(i)    // i已賦值，輸出1

一道測試題

  var age = 10;
  function person () {
      age = 100;
      console.log(age);  // 100
      var age;
      console.log(age)  // 100
  }
  person();
  console.log(age);   // 10

二、函數提升

解析器在解析時對函數聲明與函數表達式有著不同的優先級，實際上編譯階段函數聲明會先于變量被提升，并使其在執行任何代碼之前可訪問，函數表達式實際上是變量聲明的一種，因此函數聲明提升優于函數表達式

console.log(fn(1));    // 1
function fn (a) {
    return a;
}

如上面的代碼，由于函數聲明被置于執行環境頂部，即使調用函數的代碼在聲明函數之前也可以正確訪問。再看函數表達式的例子：

console.log(fn(1));
var fn = function (a) {
    return a;
}

// 相當于

var fn;
console.log(fn(1));
fn = function (a) {
  return a;
}
// fn is not a function

上面的例子之所以報錯，是因為變量fn聲明后還未對函數引用。
另外函數聲明提升不會被變量聲明覆蓋，但會被變量賦值覆蓋。
變量未賦值的例子：

  function fn(){
    console.log(1);
  }
  var fn;
  console.log(fn);    // 由于后一個fn只聲明未負值，因此輸出的是函數fn

變量賦值的例子：

  function fn(){
    console.log(1);
  }
  var fn = function () {
      console.log(2)
  };
  fn();    // 2
  
  // 相當于
  
  function fn(){
    console.log(1);
  }
  var fn;
  fn = function () {
      console.log(2)
  };
  fn();    // 2（因為聲明的函數fn被后一個已引用函數的變量fn所覆蓋，因此輸出2）

再來點：

  fn();
  var fn = function () {
    console.log(1);
  }
  fn();
  function fn () {
    console.log(2);
  }
  var fn;
  fn();
  // 依次輸出2,1,1

云服務器 GPU云服務器 js變量聲明提升網速提升提升帶寬提升權限

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93196.html

js變量提升與函數提升的機制

摘要：所謂變量提升，提升就是為了事先聲明變量。變量提升之后，但其賦值還是留在原本的位置等運行到了之后動態賦值，而函數提升之后直接相當于在代碼里抽空了。搞明白這個例子也就搞懂了作用域中變量和函數是怎么提升的。問題 showImg(https://segmentfault.com/img/bVJ614?w=222&h=165); 在這個例子中它應該輸出什么？輸出的結果是6。 showImg(h...

fasss 2019-08-21 15:20 評論0 收藏0
ES6 變量作用域與提升：變量的生命周期詳解

摘要：不同的是函數體并不會再被提升至函數作用域頭部，而僅會被提升到塊級作用域頭部避免全局變量在計算機編程中，全局變量指的是在所有作用域中都能訪問的變量。 ES6 變量作用域與提升：變量的生命周期詳解從屬于筆者的現代 JavaScript 開發：語法基礎與實踐技巧系列文章。本文詳細討論了 JavaScript 中作用域、執行上下文、不同作用域下變量提升與函數提升的表現、頂層對象以及如何避免創建...

lmxdawn 2019-08-21 11:55 評論0 收藏0
5分鐘深入了解js變量提升

摘要：對于大多數開發者來說，變量提升可以說是一個非常常見的問題，但是可能很多人對其不是特別的了解。如果說擁有和一樣的變量提升效果的話，那么應該是輸出。而和它們的變量提升的效果是一樣的，也都存在著臨死性死區的概念。對于大多數js開發者來說，變量提升可以說是一個非常常見的問題，但是可能很多人對其不是特別的了解。所以在此，我想來講一講。先從一個簡單的例子來入門： a = 2; var a; ...

tinysun1234 2019-08-23 12:41 評論0 收藏0
JS變量生命周期:為什么 let 沒有被提升

摘要：請注意，就變量生命周期而言，聲明階段與變量聲明是不同的概念。提升在生命周期中無效的原因如上所述，提升是變量在作用域頂部的耦合聲明和初始化階段。然而，生命周期分離聲明和初始化階段。解耦消除了的提升期限。為了保證的可讀性，本文采用意譯而非直譯。提升是將變量或函數定義移動到作用域頭部的過程，通常是 var 聲明的變量和函數聲明function fun() {...}。當 ES6 引入l...

hoohack 2019-08-26 10:11 評論0 收藏0
JS變量生命周期:為什么 let 沒有被提升

摘要：請注意，就變量生命周期而言，聲明階段與變量聲明是不同的概念。提升在生命周期中無效的原因如上所述，提升是變量在作用域頂部的耦合聲明和初始化階段。然而，生命周期分離聲明和初始化階段。解耦消除了的提升期限。為了保證的可讀性，本文采用意譯而非直譯。提升是將變量或函數定義移動到作用域頭部的過程，通常是 var 聲明的變量和函數聲明function fun() {...}。當 ES6 引入l...

Steven 2019-08-16 18:37 評論0 收藏0