JavaScript中函数的变量提升问题
函数的大体分三种,一种是函数的声明,一种是函数表达式(又称为函数的字面量)
1.函数的声明 => function myFn(){};
2.函数的表达式 => var myFn = function() {};
3.函数对象方式 => var myFn = new Function('n1','n2','return n1 + n2 '); // tip: 参数必须加引号
以上:3和其他的两项用法差别较大,不作比较;主要介绍1与2的区别:
先看二个简单的例子:
var myFn = function () {
console.log('mm');
};
myFn(); //mm
var myFn = function () {
console.log('nn');
};
myFn(); //nn
在看下这个:
function myFn() {
console.log('mm');
};
myFn(); //nn
function myFn() {
console.log('nn');
};
myFn(); //nn
为什么会出现以上两种情况呢? 我们知道JavaScript的代码是一行一行执行的,但是在代码执行之前,浏览器会有一个预解析的过程,会把声明的变量,函数的表达式提升,然后再一行一行的执行代码;但是为什么两个打印的结果不一样呢? 因为第一个是变量的提升,函数本身并没有提升,而第二个函数表达式会整个提升,所以myFn()写在哪,结果都是一样的;
我们这个时候可能回想,如果他们在一起的时候,哪个先执行?
第一种情况:
var myFn = function () {
console.log('nn');
}
myFn(); // nn
function myFn() {
console.log('mm');
}
myFn(); // nn
第二种情况:
function myFn() {
console.log('mm');
}
myFn(); // mm
var myFn = function () {
console.log('nn');
}
myFn(); // nn
这里注意的一点是,变量的提升高于函数表达式;在第一种情况下,var = myFn 会提升最高的优先级,其次是函数的声明。
在第一种情况里,函数的声明会提升,然后会被函数表达式覆盖,所以会打印两次一样的;第二次该提升的会提升,代码会一步一的执行;
看一下,下面的一段的代码执行情况,检验一下:
myFn();
function myFn() {
console.log('mm');
}
myFn();
var myFn = function () {
console.log('nn');
}
这里可以很明显的看到结果 =>打印两次 // mm
下面我们在介绍一种,在函数内部的变量提升(先看一段代码)
function myFn(a) {
var a = 2;
console.log(b);
console.log(a);
var b = 0 ;
}
myFn(1); // undefined 2
在函数的内部,如果函数有参数的话,就相当于在函数内部声明了这个变量,如上面例子:先声明 var a;调用的时候传来参数,则 a =1 ,若果在函数内部把a在赋值,那么a就等于新赋值的值;而b是不是参数,但在函数内部定义了,由于变量的提升,会打印underfind,这是变量定义,但是没有赋值,只有在函数赋值后,才能打印该值;
JavaScript中函数的变量提升问题的更多相关文章
- Javascript中函数及变量定义的提升
<html> <head> <title>函数提升</title> <script language="javascript" ...
- JavaScript中的各种变量提升(Hoisting)
首先纠正下,文章标题里的 “变量提升” 名词是随大流叫法,“变量提升” 改为 “标识符提升” 更准确.因为变量一般指使用 var 声明的标识符,JS 里使用 function 声明的标识符也存在提升( ...
- javascript中函数声明、变量声明以及变量赋值之间的关系与影响
javascript中函数声明.变量声明以及变量赋值之间的关系与影响 函数声明.变量声明以及变量赋值之间有以下几点共识: 1.所有的全局变量都是window的属性 2.函数声明被提升到范围作用域的顶端 ...
- JavaScript中函数函数的定义与变量的声明<基础知识一>
1.JavaScript中函数的三种构造方式 a.function createFun(){ } b.var createFun=function (){ } c.var createFun=new ...
- JavaScript中函数是不能重载原因
以前有一次写JS插件的时候,由于后台写习惯了,妄想在JS中写重载函数,可惜不能成功,原因花了一点时间记了下来 首先要理解重载的含义:函数返回值不同或者形式参数个数不同但函数名相同的函数 JavasSc ...
- 了解Javascript中函数作为对象的魅力
前言 Javascript赋予了函数非常多的特性,其中最重要的特性之一就是将函数作为第一型的对象.那就意味着在javascript中函数可以有属性,可以有方法, 可以享有所有对象所拥有的特性.并且最重 ...
- Javascript中函数的四种调用方式
一.Javascript中函数的几个基本知识点: 1.函数的名字只是一个指向函数的指针,所以即使在不同的执行环境,即不同对象调用这个函数,这个函数指向的仍然是同一个函数. 2.函数中有两个特殊的内部属 ...
- JavaScript中函数的形参和实参的实现原理剖析
我们都知道JS里面参数的传递是可以不一样的,比如我们有一个函数: <script type="text/javascript"> function one(a,b,c) ...
- JavaScript 中函数节流和函数去抖的讲解
JavaScript 中函数节流和函数去抖的讲解 我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响,尤其是在做一些效果实现方面,或者逻辑中需要进行后端请求,更是会导致卡顿,效果失效等结果,所 ...
随机推荐
- 二、安装并配置Kubernetes Master节点
1. 安装配置Master节点上的Kubernetes服务 1.1 安装Master节点上的Kubernetes服务 yum -y install kubernetes 1.2 修改kube-apis ...
- hsweb 企业后台管理基础框架
hsweb 详细介绍 业务功能 现在: 权限管理: 权限资源-角色-用户. 配置管理: kv结构,自定义配置.可通过此功能配置数据字典. 脚本管理: 动态脚本,支持javascript,groovy, ...
- .net加密web.config文件
这篇文章我将介绍如何利用ASP.NET来加密和解密Web.config中连接字符串,之前只写了第二种方式,现在将两种方式都写出来,供大家参考.不管使用哪种方式我们在程序中都不需要写任何代码来解密连接字 ...
- bootstrap-treeview 加载默认选择第一个节点
configAppTree: function (oArrayData){ $('#appTree').treeview({ color: "#545454", expandIco ...
- The Beam Model:Stream & Tables翻译(上)
作者:周思华 欢迎访问网易云社区,了解更多网易技术产品运营经验. 本文尝试描述Beam模型和Stream & Table理论间的关系(前者描述于数据流模型论文.the-world-beyond ...
- Android Studio - No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android
错误提示: No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android 错 ...
- BZOJ 1305--[CQOI2009]dance跳舞(最大流)
1305: [CQOI2009]dance跳舞 Time Limit: 5 Sec Memory Limit: 162 MBSubmit: 4150 Solved: 1792[Submit][St ...
- FunDA(15)- 示范:任务并行运算 - user task parallel execution
FunDA的并行运算施用就是对用户自定义函数的并行运算.原理上就是把一个输入流截分成多个输入流并行地输入到一个自定义函数的多个运行实例.这些函数运行实例同时在各自不同的线程里同步运算直至耗尽所有输入. ...
- 【python入门】之教你编写自动获取金币脚本
本文作者:青衫磊落 最近看到个特别全面源码分享网站,刚好有个项目是一直想做但是没有头绪的,就想下载学习一下.注册账号后,发现还需要若干金币.后来发现可以通过每隔一定时间发心情状态来获得金币,就打算写一 ...
- iOS开发总结--三方平台开发之分享
1.前言 在公司参与了多个应用三方平台的开发,涉及微信.微博.QQ.Facebook.meetup等,总结一下一般的接入三方平台SDK方法. 2.接入三方SDK 任何应用要接入三方平台,都需要在该平台 ...