JavaScript中的函數

coolpail 發布于2019-08-26 11:39 / 1634人閱讀

摘要：然后最后一步就是從父作用域鏈中將該特殊對象刪除，整個過程的偽代碼如下注意這里，該屬性不能刪除，只讀。

起因是我在逛sf的時候看到了一個人的提問：

為什么將函數c賦值給變量b，在函數體里面，給c賦值，為什么會失敗？也就是這代碼執行時為什么c打印出來的不是3

var  b = function c () {
    a=1, b=2, c=3;
    console.log(a);
    console.log(b);
    console.log(c);
}
b();

把上面這段代碼在控制臺中運行一下，得出的結果是：

1
2 
f c(){ ... }

看到其他的回答中有一個說c被聲明成了全局變量，我當時是比較懷疑的，因為這種具名函數表達式是可以用函數名調用自身的，c會是函數本身的引用，所以我把console.log(c)改成了console.log(window.c)：

var b = function c() {
    a=1, b=2, c=3;
    console.log(a);
    console.log(b);
    console.log(window.c);
}
b();

再執行，輸出的結果是: 1 2 undefined，很明顯，c并沒有聲明到全局，所以說c=3這個語句只是靜默失敗了。在非嚴格模式下，JavaScript代碼的很多行為都會靜默失敗，但在嚴格模式下就會暴露問題所在，然后我給這個函數加上"use strict"再運行一下：

var b = function c() {
    "use strict";
    var a=1, b=2;
    c=3;
    console.log(a);
    console.log(b);
    console.log(window.c);
}
b();

果然報錯:Uncaught TypeError: Assignment to constant variable.，說明這個c是不可變的，至于為什么不可變，就屬于JavaScript函數本身的特點了。然后我在網上搜索了一些資料，在ECMA-262-3 in detail. Chapter 5. Functions.找到了一點相關內容，文中提到了具名函數表達式(NFE)的一些特點，比如如下的例子：

(function foo(bar) {
  
  if (bar) {
    return;
  }
  
  foo(true); // "foo" name is available
  
})();
  
// but from the outside, correctly, is not
  
foo(); // "foo" is not defined

其中一個特點是foo這個名字在函數內部可用，這個特點由NFE的工作方式決定：
當解釋器在執行遇到具名函數表達式時，在創建函數表達式之前，它會創建一個特殊的輔助對象，并且加載當前的作用域鏈上。然后創建函數表達式本身，在該階段函數獲得[[Scope]]屬性，即創建函數的上下文作用域鏈，然后函數表達式的name會作為唯一(unique)的屬性添加到特殊對象上，屬性的值就是函數表達式的引用。然后最后一步就是從父作用域鏈中將該特殊對象刪除，整個過程的偽代碼如下：

specialObject = {};
  
Scope = specialObject + Scope;
  
foo = new FunctionExpression;
foo.[[Scope]] = Scope;
specialObject.foo = foo; // {DontDelete}, {ReadOnly} 注意這里，該屬性不能刪除，只讀。
  
delete Scope[0]; // remove specialObject from the front of scope chain

對NFE工作原理理解過后，就很容易理解NFE的特性和文章開頭的問題了。

結尾廣告部分

網易考拉招聘高級前端開發工程師，坐標杭州濱江網易大廈，有興趣的請戳我了解&投遞簡歷

GPU云服務器云服務器 javascript中的函數 javascript中的 php中的變量函數 java中的根號函數

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

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

JavaScript深入淺出

摘要：理解的函數基礎要搞好深入淺出原型使用原型模型，雖然這經常被當作缺點提及，但是只要善于運用，其實基于原型的繼承模型比傳統的類繼承還要強大。中文指南基本操作指南二繼續熟悉的幾對方法，包括，，。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。怎樣使用 this 因為本人屬于偽前端，因此文中只看懂了 8 成左右，希望能夠給大家帶來幫助....（據說是阿里的前端妹子寫的） this 的值到底...

blair 2019-08-21 18:26 評論0 收藏0
JS程序

摘要：設計模式是以面向對象編程為基礎的，的面向對象編程和傳統的的面向對象編程有些差別，這讓我一開始接觸的時候感到十分痛苦，但是這只能靠自己慢慢積累慢慢思考。想繼續了解設計模式必須要先搞懂面向對象編程，否則只會讓你自己更痛苦。 JavaScript 中的構造函數學習總結。知識只有分享才有存在的意義。是時候替換你的 for 循環大法了~ 《小分享》JavaScript中數組的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 評論0 收藏0
學習React之前你需要知道的的JavaScript基礎知識

摘要：和類在開始時遇到類組件，只是需要有關類的基礎。畢竟，中的條件呈現僅再次顯示大多數是而不是特定的任何內容。在我的研討會期間，更多的材料是關于JavaScript而不是React。其中大部分歸結為JavaScript ES6以及功能和語法，但也包括三元運算符，語言中的簡寫版本，此對象，JavaScript內置函數（map，reduce，filter）或更常識性的概念，如：可組合性，可重用...

bitkylin 2019-08-02 11:01 評論0 收藏0
JavaScript中的面向對象（object-oriented）編程

摘要：對象在中，除了數字字符串布爾值這幾個簡單類型外，其他的都是對象。那么在函數對象中，這兩個屬性的有什么區別呢表示該函數對象的原型表示使用來執行該函數時這種函數一般成為構造函數，后面會講解，新創建的對象的原型。這時的函數通常稱為構造函數。。本文原發于我的個人博客，經多次修改后發到sf上。本文仍在不斷修改中，最新版請訪問個人博客。最近工作一直在用nodejs做開發，有了nodejs，...

JerryZou 2019-08-21 10:26 評論0 收藏0
深入理解JavaScript，這一篇就夠了

摘要：也就是說，所有的函數和構造函數都是由生成，包括本身。如果只考慮構造函數和及其關聯的原型對象，在不解決懸念的情況下，圖形是這樣的可以看到，每一個構造函數和它關聯的原型對象構成一個環，而且每一個構造函數的屬性無所指。前言　　JavaScript 是我接觸到的第二門編程語言，第一門是 C 語言。然后才是 C++、Java 還有其它一些什么。所以我對 JavaScript 是非常有感情的，畢...

villainhr 2019-08-26 17:04 評論0 收藏0