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);  // “中国

实际项目中能用到的地方很多哦~后端接口问题的锅，我前端靓仔才不背！！！