在javascript中关于变量与函数的提升

一、简介

在javascript中声明变量与函数的执行步骤:

1、先预解析变量或函数声明代码,会把用var声明的变量或者函数声明的代码块进行提升操作

2、然后再进行执行操作

关于变量声明提升:用var声明的变量提升,其只是变量提升了,而没有进行赋值的提升

二、关于变量与函数提升的注意点

1、变量提升的代码演示

var a = 10;
console.log(a);//10
console.log(b);// undefined
var b = 20;
console.log(b);//20

/*变量提升演示*/
var a; // 变量提升  只提升不赋值
var b;// 变量提升  只提升不赋值
a = 10; // 赋值操作
console.log(a);// 10
console.log(b);// 由于b还没有赋值,所以 undefined
b = 20; // 赋值操作
console.log(b);// 20

2、两函数名相同的情况下,后面的函数声明会覆盖前面的函数声明

var a = 10;
var b = 20;
 function funcName() {
     console.log(a);
 }

function funcName(){
     console.log(b);
 }
 funcName();// 20

/*变量与函数提升演示*/
    var a;
    var b;
    function funcName(){//后面的覆盖了前面的函数声明
        console.log(b);
    }
    a = 10;
    b = 20;
    funcName(); // 20

3、变量名与函数名相同的情况下,只会提升函数声明,而不提升变量声明

var a = 10;
 function funcName() {
     console.log(a);
 }
funcName();// 10
var funcName = '字符串';
 console.log(funcName);// 字符串
funcName();// Uncaught TypeError:funcName is not a function

/*变量与函数提升演示*/
var a;
function funcName() {
    console.log(a);
}
a = 10;
funcName();// 10
var funcName = '字符串';// 与函数同名变量声明忽略提升
console.log(funcName);//  字符串
//由于重新给funcName赋值,funcName是一个字符串了,而不是函数,无法调用
console.log(typeof funcName);// string
funcName();// Uncaught TypeError:funcName is not a function

4、用函数表达式声明函数时,函数声明提升,只会提升变量,而不是整个函数提升

say()//Uncaught TypeError: say is not a function
var say = function() {
    console.log('hello');
};

/*函数声明演示*/
var say;// 函数表达式声明函数,只提升变量
say();// Uncaught TypeError: say is not a function
say = function () {
    console.log('hello');
};

5、变量与函数的提升是分作用域的

function sayHello() {
    console.log('hello');// hello
    function sayHi() {
       console.log(a); // 10
       console.log(b); // undefined
    }
    sayHi();
    var b = 10;
}
var a = 10;
sayHello();
console.log(b);// Uncaught ReferenceError: b is not defined

/*函数与变量提升演示*/
function sayHello() {
    function sayHi() {
        console.log(a); // 10 a是全局变量,函数内部可以访问
        console.log(b); // undefined
    }
    var b;
    console.log('hello');// hello
    sayHi();//调用时b还没有赋值,所以undefined
    b = 10;
}
var a;
a = 10;
sayHello();// 函数调用
// b 是局部变量,函数之外无法访问
console.log(b);// Uncaught ReferenceError: b is not defined

三、关于函数提升与变量提升的测试题

第一题

function show() {
    var a = 123;
    console.log(a); //?
}
show();
console.log(a); //?

第二题

var str = "string";
show();
function show() {
    console.log(str); //?
    var str = "字符串";
    console.log(str); //?
}

第三题

if("a" in window){
    var a = 10;
}
console.log(a); // ?

第四题

function show(){
    if("a" in window){
        var a = 10;
    }
    console.log(a); // ?
}
show();

第五题

var a = 1;
function show() {
    if(!a)
    {
        var a = 10;
    }
    console.log(a); //?
}
show();

第六题

function Foo() {
    getName = function(){ alert(1); };
    return this;
}
Foo.getName = function() { alert(2); };
Foo.prototype.getName = function(){ alert(3); };
var getName = function() { alert(4); };
function getName(){ alert(5); }

Foo.getName(); // ?
getName(); // ?
Foo().getName(); // ?
getName(); // ?
new Foo.getName(); // ?
new Foo().getName(); // ?
new new Foo().getName(); // ?

四、 答案

第一题

function show() {
    var a = 123;
    console.log(a); //123
}
show();
console.log(a); //Uncaught ReferenceError: a is not defined(未定义)
/*变量提升演示*/
function show() {
    var a;
    a = 123;
    console.log(a); //123
}
show();
console.log(a); //Uncaught ReferenceError: a is not defined(未定义)

第二题

var str = "string";
show();
function show() {
    console.log(str); //undefined
    var str = "字符串";
    console.log(str); //字符串
}
/*变量提升演示*/
var str;
function show() {
    var str;
    console.log(str); //undefined
    str = "字符串";
    console.log(str); //字符串
}
str = "string";
show();

第三题

if("a" in window){
    var a = 10;
}
console.log(a); // 10
/*变量提升演示*/
var a;// 全局变量
if("a" in window){ // true
    a = 10;
}
console.log(a); // 10

第四题

function show(){
    if("a" in window){
        var a = 10;
    }
    console.log(a); // undefined
}
show();
/*变量提升演示*/
function show(){
    var a;// 局部变量 不是全局变量
    if("a" in window){// false
        a = 10;
    }
    console.log(a); // undefined
}
show();

第五题

var a = 1;
    function show() {
        if(!a)
        {
            var a = 10;
        }
        console.log(a); // 10
    }
    show();
    
    /*变量提升演示*/
var a;
function show() {
    var a;
    if(!a)// Blooean(undefined) == false  !a == true
    {
        a = 10;
    }
    console.log(a); // 10
}
a = 1;
show();

第六题

function Foo() {
    getName = function(){ alert(1); };
    return this;
}
Foo.getName = function() { alert(2); };
Foo.prototype.getName = function(){ alert(3); };
var getName = function() { alert(4); };
function getName(){ alert(5); }

Foo.getName(); // 2
getName(); // 4
Foo().getName(); // 1
getName(); // 1
new Foo.getName(); // 2
new Foo().getName(); // 3
new new Foo().getName(); // 3

/*函数与变量提升演示*/
function Foo() {
    getName = function(){ alert(1); };//
    return this;
}
var getName;
//function getName(){ alert(5); }//被 getName = function() { alert(4); };覆盖
Foo.getName = function() { alert(2); };//构造函数的静态方法
Foo.prototype.getName = function(){ alert(3); };// 原型方法
getName = function() { alert(4); };

Foo.getName(); // ? 2  构造函数调用自己的静态方法
//getName = function(){ alert(1); }; 覆盖 getName = function() { alert(4); };
getName(); // ? 4 window.getName();  5已经被4覆盖
Foo().getName(); // ? 1 Foo()中this指向window,方法调用把getName = function() { alert(4); };用getName = function(){ alert(1); };覆盖
getName(); // ? 1 window.getName() 就是调用getName = function(){ alert(1); };
new Foo.getName(); // ? 2 Foo.getName() 构造函数调用自己的静态方法   new 2 == 2
new Foo().getName(); // ? 3 (new Foo()).getName() 对象调用原型方法
new new Foo().getName(); // ? 3  new 3 == 3

五、源码链接

https://github.com/350469960/OS/blob/master/javascript/promotion.md

在javascript中关于变量与函数的提升的更多相关文章

  1. JavaScript 中对变量和函数声明提前的演示样例

    如题所看到的,看以下的演示样例(能够使用Chrome浏览器,然后F12/或者右键,审查元素.调出开发人员工具,进入控制台console输入)(使用技巧: 控制台输入时Shift+Enter能够中途代码 ...

  2. 关于Javascript中声明变量、函数的笔记

    一.概念 1.变量声明 在JavaScript中,变量一般通过var关键字(隐式声明,let关键字声明除外)进行声明,如下通过var关键字声明a,b,c三个变量(并给其中的a赋值): var a=1, ...

  3. JavaScript 中对变量和函数声明的“提前”

    变量声明“被提前” JavaScript 的语法和 C .Java.C# 类似,统称为 C 类语法.有过 C 或 Java 编程经验的同学应该对“先声明.后使用”的规则很熟悉,如果使用未经声明的变量或 ...

  4. (转)JavaScript 中对变量和函数声明的“提前(hoist)”

    变量声明“被提前” JavaScript 的语法和 C .Java.C# 类似,统称为 C 类语法.有过 C 或 Java 编程经验的同学应该对“先声明.后使用”的规则很熟悉,如果使用未经声明的变量或 ...

  5. JavaScript 中对变量和函数声明的“提前(hoist)”

    hoist vt.升起,提起; vi.被举起或抬高; n.起重机,升降机; 升起; <俚>推,托,举; 这篇文章不讲英语,但是对于某些英语单词找不到很好的翻译,一上来就列出“hoist”这 ...

  6. 关于javascript中变量及函数的提升

    javascript中变量以及函数的提升,在我们平时的项目中其实还是挺常用的,尤其是大型项目中,不知不觉就会顺手添加一些变量,而有时候自己的不小心就会酿成一些不必要错误,趁有时间整理一下自己对于js中 ...

  7. JavaScript 中的变量命名方法

    三种命名方法 在程序语言中,通常使用的变量命名方法有三种:骆驼命名法(CamelCase),帕斯卡命名法(PascalCase)和匈牙利命名法. 依靠单词的大小写拼写复合词的做法,叫做"骆驼 ...

  8. [转]Javascript中的自执行函数表达式

    [转]Javascript中的自执行函数表达式 本文转载自:http://www.ghugo.com/javascript-auto-run-function/ 以下是正文: Posted on 20 ...

  9. 深入理解javascript中的立即执行函数(function(){…})()

    投稿:junjie 字体:[增加 减小] 类型:转载 时间:2014-06-12 我要评论 这篇文章主要介绍了深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是 ...

随机推荐

  1. Incompatible pointer types assigning to 'id<>' from 'Class'错误

    实例变量在类方法中被使用 原因:静态方法访问了非静态变量属性(.h中声明的那些属性),就是类方法访问了成员变量

  2. UDP网络程序模型设计

    UDP网络程序设计 1. UDP网络编程模型程序初始化 1.1服务器使用的函数 创建socket----->socket 绑定地址-------->bind 接受数据--------> ...

  3. Windows显示不了磁盘

    ps:当我的磁盘插电脑上却显示不了磁盘信息.终于最后将我的200G资料,搞没了,也不能恢复了..刚刚磁盘显示了,为了让更多人能不走弯路,我结合了网络能让磁盘显示的几个经验,也便大家方便参考...   ...

  4. leetcode-位运算

    位运算可以大大减小算法空间复杂度,提高效率,很巧妙! 先说一下位运算的简单用法 1. 按位与 & 用途:清零,取一个数中的某些指定位,保留一个数中的某些指定位 2. 按位或 | 用途:将一个数 ...

  5. SQL Select结果增加自增自段(网转)

    http://www.cnblogs.com/haver/archive/2011/07/14/2106349.html/* 方法一*/ SELECT 序号= (SELECT COUNT(客户编号) ...

  6. 常用SQL DDL语句

    常用SQL DDL语句 DDL-数据库定义语言:直接提交的.CREATE:用于创建数据库对象.DECLARE:除了是创建只在过程中使用的临时表外,DECLARE语句和CREATE语句非常相似.唯一可以 ...

  7. 如何使用Grunt(好文)

    Grunt 是什么? Grunt 基于Node.js之上,是一个以任务处理为基础的命令行工具,可以减少优化开发版本为发布版本所需的人力和时间,从而加速开发流程.它的工作原理是把这 些工作整合为不同的任 ...

  8. Angular - - 脏值检查及其相关

    今天突然就想写写$digest和$apply,这些都是脏值检查的主体内容. 先以普通js来做一个简单的监控例子吧: var div = ducoment.getElementById("my ...

  9. mysql5.5慢日志设置和查询

    mysql> showvariables like '%version%'; +-------------------------+---------------------+ | Variab ...

  10. jQuery replaceWith replaceAll end的用法

    jQuery replaceWith replaceAll end的用法 <%@ page language="java" import="java.util.*& ...