JavaScript作用域编写提升的方法是什么
本篇内容主要讲解“JavaScript作用域编写提升的方法是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript作用域编写提升的方法是什么”吧!
创新互联建站长期为上千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为潮州企业提供专业的成都做网站、成都网站设计,潮州网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。
提升什么?
把变量与函数的声明移到编写所处作用域的最上面,叫作提升。
如下代码:
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作用域编写提升的方法是什么”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
文章标题:JavaScript作用域编写提升的方法是什么
分享链接:http://ybzwz.com/article/gishhi.html