js变量,函数提升

论坛 期权论坛 期权     
学前端ossjk   2019-7-8 00:35   2189   0


js变量,函数提升
一、变量提升
  在ES6之前,JavaScript没有块级作用域(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域。变量提升即将变量声明提升到它所在作用域的最开始的部分。上个简历的例子如:
  1. console.log(global);
复制代码
  1. // undefined
复制代码
  1. var
复制代码
  1. global =
复制代码
  1. 'global'
复制代码
  1. ;
复制代码
  1. console.log(global);
复制代码
  1. // global
复制代码
  1. function
复制代码
  1. fn () {
复制代码
  1.   console.log(a);
复制代码
  1. // undefined
复制代码
  1.   
复制代码
  1. var
复制代码
  1. a =
复制代码
  1. 'aaa'
复制代码
  1. ;
复制代码
  1.   console.log(a);
复制代码
  1. // aaa
复制代码
  1. }
复制代码
  1. fn();
复制代码
之所以会是以上的打印结果,是由于js的变量提升,实际上上面的代码是按照以下来执行的:
  1. var
复制代码
  1. global;
复制代码
  1. // 变量提升,全局作用域范围内,此时只是声明,并没有赋值
复制代码
  1. console.log(global);
复制代码
  1. // undefined
复制代码
  1. global =
复制代码
  1. 'global'
复制代码
  1. ;
复制代码
  1. // 此时才赋值
复制代码
  1. console.log(global);
复制代码
  1. // 打印出global
复制代码
  1. function
复制代码
  1. fn () {
复制代码
  1.   
复制代码
  1. var
复制代码
  1. a;
复制代码
  1. // 变量提升,函数作用域范围内
复制代码
  1.   console.log(a);
复制代码
  1.   a =
复制代码
  1. 'aaa'
复制代码
  1. ;
复制代码
  1.   console.log(a);
复制代码
  1. }
复制代码
  1. fn();
复制代码

二、函数提升
  js中创建函数有两种方式:函数声明式和函数字面量式。只有函数声明才存在函数提升!如:
  1. console.log(f1);
复制代码
  1. // function f1() {}   
复制代码
  1. console.log(f2);
复制代码
  1. // undefined  
复制代码
  1. function
复制代码
  1. f1() {}
复制代码
  1. var
复制代码
  1. f2 =
复制代码
  1. function
复制代码
  1. () {}
复制代码
只所以会有以上的打印结果,是由于js中的函数提升导致代码实际上是按照以下来执行的:
  1. function
复制代码
  1. f1() {}
复制代码
  1. // 函数提升,整个代码块提升到文件的最开始     console.log(f1);   
复制代码
  1. console.log(f2);   
复制代码
  1. var
复制代码
  1. f2 =
复制代码
  1. function
复制代码
  1. () {}
复制代码
结语:基本上就是这样,要熟练掌握的话可以多做些练习,test:
  1. console.log(f1());
复制代码
  1. console.log(f2);   
复制代码
  1. function
复制代码
  1. f1() {console.log(
复制代码
  1. 'aa'
复制代码
  1. )}
复制代码
  1. var
复制代码
  1. f2 =
复制代码
  1. function
复制代码
  1. () {}
复制代码

  1. (
复制代码
  1. function
复制代码
  1. () {
复制代码
  1.   console.log(a);
复制代码
  1.   a =
复制代码
  1. 'aaa'
复制代码
  1. ;
复制代码
  1.   
复制代码
  1. var
复制代码
  1. a =
复制代码
  1. 'bbb'
复制代码
  1. ;
复制代码
  1.   console.log(a);
复制代码
  1. })();
复制代码






分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:5
帖子:1
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP