视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
javascript变量提升的详细介绍(代码示例)
2020-11-27 19:27:15 责编:小采
文档


本篇文章给大家带来的内容是关于javascript变量提升的详细介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

简介

“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面,但这么说并不准确。
实际上变量和函数声明在代码里的位置是不会动的,而是在编译阶段被放入内存中。

声明变量的方法

var、let、const
不用以上关键字直接赋值的变量会挂载与windows环境下;

let a=9
const a=1
var a=6
c=5

声明函数的方法

javascript中声明函数的方法有两种:函数声明式和函数表达式。

//函数声明
function say(){
 console.log('hello') 
}

//函数表达式
var say=function (){
 console.log('hello') 
}

提升的好处

JavaScript 在执行任何代码段之前,将函数声明放入内存中的优点之一是,这允许你可以在在声明该函数之前使用一个函数。

/*** 正确的方式:先声明函数,再调用函数 (最佳实践)*/
function catName(name) {
 console.log("我的猫名叫 " + name);
}
catName("Tigger");
/*以上代码的执行结果是: "我的猫名叫 Tigger"*/


/*** 不推荐的方式:先调用函数,再声明函数 */
catName("Chloe");
function catName(name) {
 console.log("我的猫名叫 " + name);
}
/*代码执行的结果是: "我的猫名叫 Chloe"*/

提升规则

var 声明的变量,提升时只声明,不赋值,默认为undefined;不用关键字直接赋值的变量不存在提升(demo1)

函数提升会连带函数体一起提升,不执行;(deom2)

预解析的顺序是从上到下;(demo4)

函数的优先级高于变量,函数声明提前到当前作用域最顶端;(deom3)

变量重名,提升时不会重复定义;在执行阶段后面赋值的会覆盖上面的赋值;(demo4)

函数重名,提升时后面的会覆盖前面;(demo5)

函数和变量重名,提升函数,不会重复定义,变量不会覆盖函数;在执行阶段后面赋值的会覆盖上面的赋值;(demo8)

用函数表达式声明函数,会按照声明变量规则进行提升;(deom6)

函数执行时,函数内部的变量声明和函数声明也按照以上规则进行提升;(deom7)

let、const不存在提升;(demo9、demo10)

/**demo1**/
console.log('a=',a) //a=undefined
console.log('b=',b) // Uncaught ReferenceError: b is not defined
var a=1
b=6


/**deom2**/
console.log('a=',a) // a=function a() {console.log("func a()")}
function a() {
console.log("func a()")
}

/**deom3**/
console.log('a=',a) // a=function a() {console.log("fun a")}
var a=3
var a=4

function a(){
console.log("fun a")
}
var a=5
var a=6
console.log("a=",a) // a=6



/**deom4**/
console.log('a=',a) // a=undefined
var a =2
console.log('a=',a) //
var a =3
var a =4
console.log('a=',a) // a=4
console.log('b=',b) //b= undefined
var b='b1'


/**deom5**/
console.log('a=',a) // a=function a() {console.log("a2")}
function a(){
console.log("a1")
}
function a(){
console.log("a2")
}
console.log('a=',a) // a=function a() {console.log("a2")}


/**deom6**/
console.log('a=',a) // a=undefined
var a=function(){console.log('a1')}
var a=3
var a=4
var a=5
console.log(a)
var a=function(){console.log('a2')}
console.log('a=',a) // a= ? (){console.log('a2')}


/**deom7**/
console.log('b=',b)
var a=3
function b(i){
 console.log('a=',a)
 var a=4
 function a(){
 console.log('fun a')
 }
 console.log('a=',a)
}
b()


/**demo8**/
console.log('a=',a) //a= function a(){ console.log('fun a')}
var a=2
function a(){
 console.log('fun a')
}
console.log('a=',a) // a=2
var a=3
var a=4
var a=5
console.log('a=',a) // a=5


/**demo9**/
console.log('a=',a) //Uncaught ReferenceError: a is not defined
let a=4


/****/
<!--demo10-->
console.log('b=',b) // Uncaught ReferenceError: b is not defined
const b=5

下载本文
显示全文
专题