代码编织梦想

1.函数与变量重名

例1:


console.log(foo);

function foo(){}

var foo = "变量";

 

输出为:

function foo(){}
代码实际是:
function foo(){}

var foo;

console.log(foo);

foo = "变量";

为什么会这样呢?原因很简单与变量对象的创建过程有关。

全局上下文中的变量对象

全局上下文环境包括变量对象,作用域链,this指针三部分

理解全局上下文环境的变量对象之前先了解一下全局对象

全局对象明确的定义:

全局对象(Global object) 是在进入任何执行上下文之前就已经创建了的对象。这个对象只存在一份,它的属性在程序中任何地方都可以访问,全局对象的生命周期终止于程序退出那一刻。

全局对象初始创建阶段将Math、String、Date、parseInt作为自身属性,等属性初始化,同样也可以有额外创建的其它对象作为属性(其可以指向到全局对象自身)。例如,在DOM中,全局对象的window属性就可以引用全局对象自身(当然,并不是所有的具体实现都是这样):

global = {
    Math: <...>,
    String: <...>
    ...
    ...
    window: global //引用自身
}

当访问全局对象的属性时通常会忽略掉前缀,这是因为全局对象是不能通过名称直接访问的。不过我们依然可以通过全局上下文的this来访问全局对象,同样也可以递归引用自身。例如,DOM中的window。综上所述,代码可以简写为:

String(10); // 就是global.String(10);
  
// 带有前缀
window.a = 10; // === global.window.a = 10 === global.a = 10;
this.b = 20; // global.b = 20;

因此,全局上下文中的变量对象——就是全局对象自己:

 

全局变量对象的创建过程如下:

1.函数提升:找到这个将要执行的函数内的所有函数声明,储存在变量对象中,属性名就是函数名,属性值就是函数的引用(所在的内存地址)。如果有多个同名的函数声明,后出现的函数覆盖前面的属性值。

2.变量提升:找到这个将要执行的函数内的所有变量声明,储存在变量对象中,属性名就是变量名,属性值是undefined

 

从上面创建过程的顺序可以看出,函数提升优先级比变量提升要高,且不会被变量声明覆盖

所以第一个输出:function foo(){}

但是函数提升会被执行时的变量赋值覆盖。例如以下情况:

第二个输出:''变量''


console.log(foo);

function foo(){}

var foo = "变量";

console.log(foo);

输出:

function foo(){}

变量

2.函数形参与局部变量重名

例2:

function test(x){
    
    console.log(x);

    var x = 10;

    console.log(x);

}

test (40);

相当于:

function test(){

    var x = 40
    
    console.log(x);//40

    var x = 10;

    console.log(x);//10

}

test ();

输出: 

40

10

 

3.函数形参与内部函数重名

例3:

function test(x){

    console.log(x);

    function x() {};

}
test (40);

输出: 

ƒ x() {}

居然不是40???你把我的40弄那去了?王德发!很诡异是吧

 

想弄清楚这个,得了解:当一个函数被调用时发生了什么

第一步:

函数被调用

第二步:

执行引擎创建一个函数执行上下文环境。执行上下文环境包括变量对象,作用域链,this指针三部分。

在这里为了说明问题,我们只关心变量对象。

在函数执行上下文中,变量对象是不能直接访问的

它包含普通参数(formal parameters) 与特殊参数(Arguments)对象(具有索引属性的参数映射表)。

特殊参数(Arguments)对象是通过函数的arguments属性初始化的。即arguments属性的值是Arguments对象。

 

创建变量对象的过程是这样:

1.建立特殊参数(Arguments)对象:属性名是'0'、'1'、'2'.....,属性值就是函数调用时传入的实参。此外arguments.length是实际参数的个数此时函数的形参在函数中作为局部变量存在,且与arguments中的数据共享状态(这句话极为重要!)

2.函数提升:找到这个将要执行的函数内的所有函数声明,储存在变量对象中,属性名就是函数名,属性值就是函数的引用(所在的内存地址)。如果有多个同名的函数声明,后出现的函数覆盖前面的属性值。

3.变量提升:找到这个将要执行的函数内的所有变量声明,储存在变量对象中,属性名就是变量名,属性值是undefined

 

第三步:

先掌握一个概念:活动对象(activation object)

活动对象其实和变量对象是同一个东西在不同时期的两种叫法。函数还未开始执行(创建上下文的期间)时叫变量对象,函数开始执行以后就叫活动对象。

开始顺序执行函数体内的同步函数语句,此时变量对象切换为活动对象

形参赋值和函数声明赋值在第二步已经完成了。只剩下给第二步中的普通参数中声明过的变量进行赋值,即把undefined替换为真实值。

第四步:

函数执行完销毁(没有闭包情况下)

 

理解了上面过程再来看例题3

当test函数调用时,创建函数执行上下文,然后根据实参填充arguments对象,即:形参var x = arguments[0],然后根据函数内的函数声明将函数名x进行提升,此时会发现函数名和形参名发生了冲突,由于形参与arguments中的数据共享状态,所以接下来后提升的函数名x内存放的函数引用地址会将前面定义的形参名x指向的arguments[0]直接覆盖掉

在浏览器中打印arguments验证:

以上内容为本人整理,转载请注明出处!

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接: https://blog.csdn.net/weixin_45697314/article/details/108252846

初识JavaScript (十七)-爱代码爱编程

1 服务器收到请求信息之后的处理 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <fo

node.js 加载路由文件(node.js学习笔记)-爱代码爱编程

node.js 加载路由文件(node.js学习笔记) router.js(处理请求的路由文件)文件 //加载express var express = require('express') //使用express创建路由实例 var router = express.Router() //处理请求 router.get('/router', func

18. 一球从100米高度自由落下, 每次落地后反跳回原高度的一半; 在落下, 求它在第10次落地时, 共经过多少米? 第10次反弹多高?-爱代码爱编程

程序书算法精题–JS版 一球从100米高度自由落下, 每次落地后反跳回原高度的一半; 在落下, 求它在第10次落地时, 共经过多少米? 第10次反弹多高? 分析 第一次 – 落地:100, 反弹:100 × 0.5^1 第二次 – 100 × 0.5^1, 100 × 0.5^2 ,…, 第十次 – 100 × 0.5^9, 100 × 0.5

vue.js移动端touch事件左右滑动与uc浏览器冲突的解决办法,并解决滑动页面有垂直滚动条时无法滚动的问题-爱代码爱编程

主要在touchmove事件中阻止事件的默认行为,if(disX > disY) {e.preventDefault()}事件是关键。另外,如果子元素中不存在滚动条的话,是可以直接在touch事件后加 .prevent 的,而不用在touch事件处理方法中去阻止默认事件。 <div @touchstart="start($event,ke

批量下载文件组件-爱代码爱编程

ASP.NET批量下载文件的方法 这篇文章主要介绍了ASP.NET批量下载文件的方法,实例汇总了常见的asp.net实现批量下载的方法,具有一定的实用价值,需要的朋友可以参考下 本文实例讲述了ASP.NET批量下载文件的方法。分享给大家供大家参考。具体方法如下:   一、实现步骤 在用户操作界面,由用户选择需要下载的文件,系统根据所选文件,在服务

web前端第十三-爱代码爱编程

                                               算术运算符 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>