温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

JavaScript作用域编写提升的方法是什么

发布时间:2021-11-06 14:05:04 来源:亿速云 阅读:139 作者:iii 栏目:web开发

本篇内容主要讲解“JavaScript作用域编写提升的方法是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript作用域编写提升的方法是什么”吧!

提升什么?

把变量与函数的声明移到编写所处作用域的最上面,叫作提升。

如下代码:

console.log(name); // undefined
var name = 'Rewa Fang';
console.log(name); // Rewa Fang

第一次打印name时,输出undefined而不是抛出异常ReferenceError。 正是因为变量name声明被提升了。 但只提升声明,赋值不会提升;所以输出undefined。 第二次打印时,name已经被赋值为Rewa Fang

提升后的代码:

var name;
console.log(name); // undefined
name = 'Rewa Fang';
console.log(name); // Rewa Fang

代码改成下面这种写法也是可正常执行的:

name = 'Rewa Fang';
console.log(name); // Rewa Fang 
var name;

var name; 会被提升到最上面。

这是因为编译器在编译阶段会找到代码中所有的声明,并绑定在对应的作用域中。而赋值和其它逻辑代码会留在原地;等待执行。 比如: var a = 1; 会被编译器看作两个部分声明var a;和赋值a = 1; ,那么声明会提升到作用域最上面,赋值则在原地等执行。

包含函数声明也会提升。

函数声明提升
sayHi(); // Hello!
function sayHi(){
    console.log('Hello!');
}

函数sayHi()可以正常执行;因为函数声明的部分被提升了。提升为:

function sayHi(){
    console.log('Hello!');
}
sayHi(); // Hello!

函数内部的变量和函数也会提升至函数最上面:

var name = 'Lebron James';
sayHi(); // Hello! Rewa Fang
function sayHi(){
    name = 'Rewa Fang';
    console.log('Hello! '+name);
    var name;
}

函数内的name会提升至函数创建的作用域最上面,所以函数内部不会引用到外部name。 内部的name遮蔽了外部变量name。

提升后:

function sayHi(){
    var name;
    name = 'Rewa Fang';
    console.log('Hello! '+name);
}
var name;
name = 'Lebron James';
sayHi(); // Hello! Rewa Fang

提升后有一个变化,就是函数声明会优先于变量提升。

比如:

console.log(sayHi);
var sayHi = 'Lebron James';
function sayHi(){
    console.log('Hello! ');
}

结果会输出:ƒ sayHi(){console.log('Hello! ');} node环境下输出:[Function: sayHi]

why ?

为什么需要提升?

有以下原因:

  • 优化性能; 编译器在代码运行前进行编译会预先处理变量和函数的声明,统一管理作用域。保持代码由上而下的顺序变量在引用之前声明。 不过代码的顺序是可以人为控制的,像Java不需要提升开发者可以有效地管理好变量的声明。 所以这可能并不是最重要的提升原因,也可能是个历史遗留问题。

  • 函数间的相互调用; 如下代码,如果函数b没有提升; 函数a中调用就会抛出异常;提升就可以让函数式编程变得更灵活。

     function a (){
        var a = 1;
         return b(a);
     }
     function b(num){
        return num * 2;
     }

PS: ES6中 let const 不会被提升

到此,相信大家对“JavaScript作用域编写提升的方法是什么”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI