avaScript深入系列第七篇，結合之前所講的四篇文章，以權威指南的demo為例，具體講解當函數執行的時候，執行上下文棧、變量對象、作用域鏈是如何變化的。

前言

在《JavaScript深入之執行上下文棧》中講到，當 JavaScript 代碼執行一段可執行代碼(executable code)時，會創建對應的執行上下文(execution context)。

對于每個執行上下文，都有三個重要屬性：

• 變量對象(Variable object，VO)
• 作用域鏈(Scope chain)
• this

然后分別在《JavaScript深入之變量對象》、《JavaScript深入之作用域鏈》、《JavaScript深入之從ECMAScript規范解讀this》中講解了這三個屬性。

閱讀本文前，如果對以上的概念不是很清楚，希望先閱讀這些文章。

因為，這一篇，我們會結合著所有內容，講講執行上下文的具體處理過程。

思考題

在《JavaScript深入之詞法作用域和動態作用域》中，提出這樣一道思考題：

var scope="global scope";
function checkscope(){
    var scope="local scope";
    function f(){
        return scope;
    }
    return f();
}
checkscope();

var scope="global scope";
function checkscope(){
    var scope="local scope";
    function f(){
        return scope;
    }
    return f;
}
checkscope()();

兩段代碼都會打印'local scope'。雖然兩段代碼執行的結果一樣，但是兩段代碼究竟有哪些不同呢？

緊接著就在下一篇《JavaScript深入之執行上下文棧》中，講到了兩者的區別在于執行上下文棧的變化不一樣，然而，如果是這樣籠統的回答，依然顯得不夠詳細，本篇就會詳細的解析執行上下文棧和執行上下文的具體變化過程。

具體執行分析

我們分析第一段代碼：

var scope="global scope";
function checkscope(){
    var scope="local scope";
    function f(){
        return scope;
    }
    return f();
}
checkscope();

執行過程如下：

1.執行全局代碼，創建全局執行上下文，全局上下文被壓入執行上下文棧

    ECStack=[
        globalContext
    ];

2.全局上下文初始化

    globalContext={
        VO: [global, scope, checkscope],
        Scope: [globalContext.VO],
        this: globalContext.VO
    }

2.初始化的同時，checkscope 函數被創建，保存作用域鏈到函數的內部屬性[[scope]]

    checkscope.[[scope]]=[
      globalContext.VO
    ];

3.執行 checkscope 函數，創建 checkscope 函數執行上下文，checkscope 函數執行上下文被壓入執行上下文棧

    ECStack=[
        checkscopeContext,
        globalContext
    ];

4.checkscope 函數執行上下文初始化：

1. 復制函數 [[scope]] 屬性創建作用域鏈，
2. 用 arguments 創建活動對象，
3. 初始化活動對象，即加入形參、函數聲明、變量聲明，
4. 將活動對象壓入 checkscope 作用域鏈頂端。

同時 f 函數被創建，保存作用域鏈到 f 函數的內部屬性[[scope]]

    checkscopeContext={
        AO: {
            arguments: {
                length: 0
            },
            scope: undefined,
            f: reference to function f(){}
        },
        Scope: [AO, globalContext.VO],
        this: undefined
    }

5.執行 f 函數，創建 f 函數執行上下文，f 函數執行上下文被壓入執行上下文棧

    ECStack=[
        fContext,
        checkscopeContext,
        globalContext
    ];

6.f 函數執行上下文初始化, 以下跟第 4 步相同：

1. 復制函數 [[scope]] 屬性創建作用域鏈
2. 用 arguments 創建活動對象
3. 初始化活動對象，即加入形參、函數聲明、變量聲明
4. 將活動對象壓入 f 作用域鏈頂端

    fContext={
        AO: {
            arguments: {
                length: 0
            }
        },
        Scope: [AO, checkscopeContext.AO, globalContext.VO],
        this: undefined
    }

7.f 函數執行，沿著作用域鏈查找 scope 值，返回 scope 值

8.f 函數執行完畢，f 函數上下文從執行上下文棧中彈出

    ECStack=[
        checkscopeContext,
        globalContext
    ];

9.checkscope 函數執行完畢，checkscope 執行上下文從執行上下文棧中彈出

    ECStack=[
        globalContext
    ];

第二段代碼就留給大家去嘗試模擬它的執行過程。

var scope="global scope";
function checkscope(){
    var scope="local scope";
    function f(){
        return scope;
    }
    return f;
}
checkscope()();

不過，在下一篇《JavaScript深入之閉包》中也會提及這段代碼的執行過程。

---------轉自冴羽

言

這是我踏上搬磚之路那刻起，一路走來記下的點點滴滴coding技巧。驀然回首才發現已經不是一時半會可以看完的了，隨機選取部分進行分享給大家，希望能給你帶去收獲的喜悅。無論此時此刻你是多么的不可一世，但若干年后回首時依舊會覺得曾經的自己是多么的可笑與幼稚，但是正是這點滴的可笑與幼稚成就了最好的你吖。成長之路如此，技術之路亦是如此。

不積跬步，無以至千里；不積小流，無以成江海。點點滴滴終將成就最好的你！

花草叢中過，花香贈與君；君若顏開笑，留下贊與情。

通過此次Coding小技巧學習,不但可以讓你的代碼質量更上一層樓，而且可以讓你的coding速度直逼火箭！！！

Coding小技巧

數組的對象解構

使用對象解構將數組項賦值給變量：

const str="1997,kangkang,boy,23"
const {1:name,2:sex,0:age}=str.split(',')
console.log(name,sex,age) //kangkang boy 1997

注：本例中，2 為 split 之后的數組下標，sex 為指定的變量，值為 boy

創建純對象

創建一個對象打印出來是這樣的

const obj={}
console.log(obj)
console.log(obj.constructor)
console.log(obj.toString)
console.log(obj.hasOwnProperty)
復制代碼

創建一個 100% 的純對象，這個對象不會繼承Object的任何屬性和方法（比如 constructor，toString() 等）：

const obj=Object.create(null)
console.log(obj)//{}
console.log(obj.constructor)//undefined
console.log(obj.toString)//undefined
console.log(obj.hasOwnProperty)//undefined

你沒見過的valueOf

const obj={
    i:1,
    valueOf:function(){
        if(this.i===1){
            this.i ++
            return 1
        }else{
            return 2
        }
    }
}
if(obj==1&&obj==2){
    console.log(obj)
}

一個對象居然可以等于兩個值？？？ 猜一猜這個console.log(obj)會不會執行？最終的結果會是什么？（這個大概率會出現在面試題哦~）

給個總結，相信你已經得出答案：

清空和截短數組

下面有一個數組，現在我想截取前五個，如何操作

const arr=[1,2,3,4,5,6,7,8,9]

這時候可能你會想到slice()和splice()

slice()

返回一個索引和另一個索引之間的數據(不改變原數組),slice(start,end)有兩個參數(start必需,end選填),都是索引,返回值不包括end

const arr=[1,2,3,4,5,6,7,8,9]
const arr2=arr.slice(0,5)
console.log(arr2)//[1,2,3,4,5]

splice()

用來添加或者刪除數組的數據,只返回被刪除的數據,類型為數組(改變原數組)

const arr=[1,2,3,4,5,6,7,8,9]
arr.splice(5)
console.log(arr)//[1,2,3,4,5]

最簡單的清空和截短數組的方法就是改變 length 屬性

const arr=[1,2,3,4,5,6,7,8,9]
arr.length=5
console.log(arr)//[1,2,3,4,5]
arr.length=0//清空數組

對數組中的所有值求和

大家第一時間想到的可能是使用一個循環，但是那樣會很浪費。

var numbers=[3, 5, 7, 2];
var sum=numbers.reduce((x, y)=> x + y);
console.log(sum); // returns 17

條件短路

下面是常寫的代碼

if (hungry) {
    goToFridge();
}

我們可以進一步簡化代碼，同時使用變量和函數：

hungry && goToFridge()
復制代碼

對條件使用或（OR）邏輯

以前在函數開始時聲明變量，只是為了避免在出現意外錯誤時遇到 undefined。

function doSomething(arg1){
    arg1=arg1 || 32; // if it's not already set, arg1 will have 32 as a default value
}

逗號運算符

這個寫出來，同事肯定請教你。

let x=1;
x=(x++, x);
console.log(x);
// expected output: 2
x=(2, 3);
console.log(x);
// expected output: 3

擴展運算符

輕松移除數組中的重復項：

const removeDuplicate=arr=>[...new Set(arr)]
let result=removeDuplicate([42,42,'11','11',true,true,null,null])
console.log(result)//[42, "11", true, null]

使用擴展運算符可以快速扁平化二維數組：

const arr=[1,[2,3],[4,5]]
const flatArr=[].concat(...arr)
console.log(flatArr)//[1, 2, 3, 4, 5]

不幸的是，上面的技巧只能使用二維數組，但是使用遞歸，我們可以扁平化任意緯度數組：

function flattenArray(arr){
    const flatArr=[].concat(...arr)
    return flatArr.some(item=>Array.isArray(item))?flattenArray(flatArr):flatArr
}
const arr=[1,[2,3],[4,5,[6,7,[8,9]]]]
console.log(flattenArray(arr))//[1, 2, 3, 4, 5, 6, 7, 8, 9]

動態屬性名稱

const dynamic='flavour';
var item={
    name: 'Coke',
    [dynamic]: 'Cherry'
}
console.log(item); 
// { name: "Coke", flavour: "Cherry" }

對象轉換為數組

//注意對象必須是以下格式的才可以通過此方式轉化為數組
//獲取的DOM集合，以及函數的arguments也可以通過此方式轉化為數組
var obj={
    0: 'qian',
    1: 'long',
    2: 'chu',
    3: 'tian',
    length: 4
}
var objArr=Array.prototype.slice.call(obj);
// var objArr=[].slice.call(obj);
// var objArr=Array.prototype.slice.apply(obj);
console.log(objArr)

獲取數組中最大或者最小值

function maxAndMin(arr){
    return {
       max:Math.max.apply(null,arr.join(',').split(',')),
       min:Math.min.apply(null,arr.join(',').split(','))
    }
}

判斷兩個數組是否相同

/**
 * 判斷數組是否相同
 * @param {Array} array1
 * @param {Array} array2
 */
export function scalarArrayEquals(array1, array2) {
  return array1.length===array2.length && array1.every(function(v, i) { return v===array2[i]})
}

徹底屏蔽鼠標右鍵

oncontextmenu=”window.event.returnValue=false”
< table border oncontextmenu=return(false)>< td>no< /table> 可用于 Table

取消選取、防止復制

< body onselectstart=”return false”>

JS不允許粘貼

onpaste=”return false

JS防止復制

oncopy=”return false;” oncut=”return false;

禁用輸入法

< input style=”ime-mode:disabled”>

防止被人 frame

if (top.location !=self.location)top.location=self.location;

網頁禁用另存為

< no>< iframe src=*.html>< /iframe>< /no>

前端不背鍋小妙招

javaScript空值合并操作符（??）

只有當左側為null和undefined時，才會返回右側的數

• 空值合并操作符（??）是一個邏輯操作符，當左側的操作數為 null 或者 undefined 時，返回其右側操作數，否則返回左側操作數。
• 與邏輯或操作符（||）不同，邏輯或操作符會在左側操作數為假值時返回右側操作數。也就是說，如果使用 || 來為某些變量設置默認值，可能會遇到意料之外的行為。比如為假值（例如，'' 或 0）時。見下面的例子。

let str=null||undefined
let result=str??'你真好看'
console.log(result)//你真好看

const nullValue=null;
const emptyText=""; // 空字符串，是一個假值，Boolean("")===false
const someNumber=42;

const valA=nullValue ?? "valA 的默認值";
const valB=emptyText ?? "valB 的默認值";
const valC=someNumber ?? 0;

console.log(valA); // "valA 的默認值"
console.log(valB); // ""（空字符串雖然是假值，但不是 null 或者 undefined）
console.log(valC); // 42

javaScript可選鏈操作符( ?. )

　可選鏈操作符( ?. )允許讀取位于連接對象鏈深處的屬性的值，而不必明確驗證鏈中的每個引用是否有效。?. 操作符的功能類似于 . 鏈式操作符，不同之處在于，在引用為空(nullish ) (null 或者 undefined) 的情況下不會引起錯誤，該表達式短路返回值

const demo={
    name: 'Alice',
    cat: {
        name: 'Dinah'
    }
};
console.log(dog.dog); //正常輸出會直接報錯
console.log(demo.someNonExistentMethod());

使用可選鏈操作符( ?. )瀏覽器不會出現報錯！

const demo={
    name: 'Alice',
    cat: {
        name: 'Dinah'
    }
};
console.log(demo.dog?.name); 
// expected output: undefined
console.log(demo.what?.());
// expected output: undefined

函數調用：

let result=someOne.customMethod?.();

如果希望允許 someOne 也為 null 或者 undefined ，那么你需要像這樣寫 someOne?.customMethod?.()

可選鏈與表達式：

let nestedProp=obj?.['prop' + 'Name'];

可選鏈訪問數組：

let arrayItem=arr?.[42];

短路計算：

let potentiallyNullObj=null;
let x=0;
let prop=potentiallyNullObj?.[x++];

console.log(x); // x 將不會被遞增，依舊輸出 0

//當在表達式中使用可選鏈時，如果左操作數是 null 或 undefined，表達式將不會被計算

連用可選鏈操作：

let customer={
  name: "Carl",
  details: {
    age: 82,
    location: "Paradise Falls" // details 的 address 屬性未有定義
  }
};
let customerCity=customer.details?.address?.city;

// … 可選鏈也可以和函數調用一起使用
let duration=vacations.trip?.getTime?.();

空值合并操作符可以在使用可選鏈時設置一個默認值：

let customer={
  name: "Carl",
  details: { age: 82 }
};

let customerCity=customer?.city ?? "中國";
console.log(customerCity);  // “中國

實際項目中能用到的地方很多哦~后端接口問題的鍋，我前端靚仔才不背！！！