javascript 变量的声明与提升

最新推荐文章于 2022-09-16 22:10:05 发布
最新推荐文章于 2022-09-16 22:10:05 发布
阅读量148 收藏
点赞数
分类专栏： Javascript 文章标签： javascript 声明 变量提升
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SJ1551/article/details/109363325
版权

变量声明

  • 不使用关键字（作用域链机制）
  • 使用 var, function 关键字声明变量
  • 使用 let, const 关键字声明变量

变量提升

  • 在栈内存（作用域）形成，JS代码自上而下执行之前，JS引擎首先会将所有使用 var / function 关键字的变量进行提前声明或定义
  • 浏览器中，var/function 声明的全局变量会与window的属性存在映射机制（会在变量提升阶段在window对象中创建相应的属性，在赋值的同时对window对象对应的属性进行赋值）
  • var 只声明未定义
  • function 声明 + 定义(变量赋值，值为代码字符串在堆中地址(指针))

条件判断下(或块级作用域内)的变量提升

  • 老版本（IE10及之前）：
    • 全局(或函数)作用域顶部： function 声明 + 定义 提升
  • 新版本（IE11及之后）：
    • 全局(或函数)作用域顶部： function 只有声明提升，也就是 function 和 var 一样了
    • 块级作用域顶部：function 声明 + 定义 提升

ES6变量重复检测机制

  • 在栈内存（作用域）形成，JS代码自上而下执行之前，JS引擎会对使用ES6语法(let, const)声明的变量进行变量重复检测（函数声明时也会报错，而不是延迟到函数执行时才报错）

ES6的变量声明方法解决了旧版本JS的暂时性死区问题

一、不使用关键字“操作”变量

1. 此时不应该叫变量声明，而应该叫变量的“操作”
2. 不使用关键字来“操作”的变量不是私有变量，会向它的上级作用域查找，看是否为上级作用域的变量，一直找到全局作用域的window对象上的属性。（这种查找机制称为作用域链机制）
3. 全局作用域下本质是操作 window 的属性

  • 例如 a = 10 本质是 window.a = 10 的简写
  • 例如 document.getElementById() 本质是 window.document.getElementById() 的简写
  • 其本质是属性，不是变量，无变量提升（区分与 var, function 声明的变量）
  • 注意这种情况会导致全局环境的污染（内存泄漏）

若查找到 window 的属性都未找到该变量，直接使用会报错

/* 栗子1 全局作用域中 */
console.log('a' in window);	// false 其本质是属性，不是变量，无变量提升（区分与 `var`, `function` 声明的变量）
a = 0;
window.a;					// 0

/* 栗子2 全局函数中 */
function func(){
	b = 1;
}
func();
console.log(window.b);		// 1

/* 栗子3 嵌套函数 */
function func1(){
	function func2(){
		c = 2;
	}
	func2();
}
func1();
console.log(window.c);		// 2

/* 栗子4 若查找到 window 的属性都未找到该变量，直接使用会报错 */
console.log(d);				// Uncaught ReferenceError: d is not defined
function func3(){
	console.log(d);
}
func3();					// Uncaught ReferenceError: d is not defined

二、var

  1. 没有块的概念（可以跨块访问，不能跨函数访问）
  2. 未初始化时默认为 undefined
  3. 变量提升
  4. 可重复定义（使用变量提升解释）
  5. 全局作用域下声明的变量会被挂载到window上（在变量提升阶段完成键的创建，也就是挂载也会提升）

注： 区分 var a = 10, b = 10 与 var a = b = 10

  • 变量提升

    var 声明的变量在js中会经历了两个阶段

    • 编译阶段进行变量声明提升
    • 执行阶段进行赋值

    下面举几个栗子

    /* 栗子1 */
console.log(value);
var value = 8;
console.log(value);

// js进行变量提升后实际的执行顺序是
var value;
console.log(value);
value = 8;
console.log(value);
// undefined 8

    /* 栗子2 */
console.log(v1);
var v1 = 100;
function foo() {
    console.log(v1);
    var v1 = 200;
    console.log(v1);
}
foo();
console.log(v1);

// js进行变量提升后实际的执行顺序是
var v1;
console.log(v1);
v1 = 200;
function foo(){
	var v1;	// var 声明的变量不能跨函数，且函数内的变量会覆盖掉函数外层的同名变量
	console.log(v1);
	v1 = 200;
	console.log(v1);
}
foo();
console.log(v1);
// 打印结果：undefined undefined 200 100

  • 全局作用域下声明的变量会被挂载到window上（在变量提升阶段完成键的创建，也就是挂载也会提升）

    // window
console.log('a' in window);	// true	挂载会提升
var a = 10;
console.log(window.a);		// 10

  • 注： 区分 var a = 10, b = 10 与 var a = b = 10

    /*
var a = 10, b = 10	这里的 a, b 都是使用 var 声明的变量
var a = b = 10		这里的 a 是 var 声明的变量，b 没有使用 var 声明，本质是window上的属性
var a = b = 10 的本质其实是 { b = 10; var a = b; }
*/
function func(){
	var a1 = 10, b1 = 10;
	var a2 = b2 = 10;
}
func();
console.log(window.a1);		// undefined
console.log(window.b1);		// undefined
console.log(window.a2);		// undefined
console.log(window.b2);		// 10

三、function

  1. 没有块的概念（可以跨块访问，不能跨函数访问）
  2. 函数提升（function 会进行 声明+定义 提升）
  3. 可重复定义（重写）
  4. 全局作用域下声明的函数会被挂载到window上（在变量提升阶段完成键的创建，也就是挂载也会提升）
  5. 条件判断下(或块级作用域内)的变量提升
  6. js 函数不可重载

  • 函数提升

    函数声明有两种形式

    • 变量字面量式：var func = function() {}
    • 函数声明式： function func() {}

    • 变量字面量式

      与 var 的变量提升结果相同

      /* 变量字面量式 */
console.log(foo);
var foo = function(){
	console.log(1)
}
// undefined

    • 函数声明式

      会进行 声明、定义 提升，且不会被变量声明覆盖(因为已有变量不会被重复声明)，但会被变量赋值覆盖

      /* 函数声明式 栗子1  */
console.log(foo)
function foo(){
	console.log(1)
}
// ƒ foo(){console.log(1)}

      /* 函数声明式 栗子2 */
// 函数声明+函数定义 提升
console.log(foo)			// f foo(){ return 1 }
var foo
function foo(){ return 1 }	

// 不会被变量声明覆盖（因为已有变量不会被重复声明）
function bar(){ return 2 }	// 先声明定义
var bar						// 后声明同名变量
console.log(bar)			// f bar(){ return 2 } ，函数不会被变量声明覆盖

// 会被变量赋值覆盖
bar = 10
console.log(bar)			// 10 函数会被变量赋值覆盖

  • 全局作用域下声明的函数会被挂载到window上（在变量提升阶段完成键的创建，也就是挂载也会提升）

    // window
console.log('func' in window);	// true 挂载也会提升
function func(){ return 1 }
console.log(window.func);		// f func(){ return 1 }

  • 条件判断下(或块级作用域内)的变量提升

    /* 栗子1 */
func();
if(true){
	function func(){
		console.log(1)
	}
}
else{
	function func(){
		console.log(2)
	}
}
// IE11及以后: error: foo is not a function
// IE10及之前: 2

/* 栗子2 进阶 */
foo = function() {return true;}
bar = function() {return false;}
~function(){
	if(bar() && [] == ![]){
		foo = function() {return false;}
		function bar(){return true};
	}
}()
console.log(foo);
console.log(bar);
// IE11及以后: Uncaught TypeError: bar is not a function
// IE10及以前: f foo() {return false;}
// 			   f bar() {return false;}

/* 栗子3 块级作用域顶部 */
console.log('块级作用域外：', func2);
{
	console.log('块级作用域内顶部', func2);	// 
	function func2() {return true;}
}
// IE11及以后
// 块级作用域外：undefined
// 块级作用域内顶部：f func2() {return true;}
// IE10及以前
// 块级作用域外：f func2() {return true;}
// 块级作用域内顶部：f func2() {return true;}

  • js 函数不可重载

    重载：函数名相同，函数参数不同（Java中函数可以重载）
    重写：多用于类中的继承，重写父类的函数

      JS并没有重载，JS可以这样理解, 万物皆对象。var func = function() { alert(1) } 这里的 func 只是对 function() { alert(1) } 的引用。当你重写时，func = function() { alert(2) }，这时 func 的引用指向了 function() { alert(2) }，调用不到 alert(1) 了，所以JS只有重写。

      Java是强类型语言, 根据传入的参数类型,个数不同等可以找到不同的方法, 所以Java有重载;

四、let

  1. 有块的概念（不可跨块访问）
  2. 未初始化时默认为 undefined
  3. 无变量提升（所以不能在声明前使用，否则会报错）
  4. 不可重复定义（重复定义会报错）

  • 无变量提升（所以不能在声明前使用，否则会报错）

    /* 栗子1 */
a = 1;
let a;
// Uncaught ReferenceError: Cannot access 'a' before initialization

    /* 栗子2 */
function func(){
	a = 1;
	let a;
}
func();	// Uncaught ReferenceError: Cannot access 'a' before initialization

  • 不可重复定义（重复定义会报错(在所有代码执行前报错)）

    在栈内存（作用域）形成，JS代码自上而下执行之前，JS引擎会对使用ES6语法(let, const)声明的变量进行变量重复检测（函数声明时也会报错，而不是延迟到函数执行时才报错）

    /* 栗子1 */
let a = 10;
console.log(a);
let a;				// Uncaught SyntaxError: Identifier 'a' has already been declared

/* 栗子2 */
let b = 10;
console.log(b);
{
	let b;
	let b;			// Uncaught SyntaxError: Identifier 'b' has already been declared
}

/* 栗子3 函数声明时也会报错，而不是延迟到函数执行时才报错 */
let c = 10;
console.log(c);
function f(){
	let c = 10;
	let c;			// Uncaught SyntaxError: Identifier 'c' has already been declared
}

/* 栗子4 */
let can = 1;
console.log(can);	// 1
console.log(d);		// Uncaught SyntaxError: Identifier 'd' has already been declared
let d = 10;

五、const

  1. 有块的概念（不可跨块访问）
  2. 必须初始化，且初始化后其值不能修改
  3. 无变量提升（同 let，不能在声明前使用，否则会报错）
  4. 不可重复定义（重复定义会报错）

  • 必须初始化

    const a;	// Uncaught SyntaxError: Missing initializer in const declaration

  • 无变量提升（同 let，不能在声明前使用，否则会报错）

    /* 栗子1 */
console.warn(a);
const a = 1;
// Uncaught ReferenceError: Cannot access 'a' before initialization

    /* 栗子2 */
function func(){
	console.warn(a);
	const a = 1;
}
func();	// Uncaught ReferenceError: Cannot access 'a' before initialization
Novice-XiaoSong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js变量范围与声明提升
qq_61856312的博客
08-16 187
变量作用范围级声明
深入理解变量声明提升和函数声明提升
热门推荐
前端超人
03-05 2万+
变量声明提升 1、变量定义 可以使用var定义变量，变量如果没有赋值，那变量的初始值为undefined。 2、变量作用域 变量作用域指变量起作用的范围。变量分为全局变量和局部变量。全局变量在全局都拥有定义；而局部变量只能在函数内有效。 在函数体内，同名的局部变量或者参数的优先级会高于全局变量。也就是说，如果函数内存在和全局变量同名的局部变量或者参数，那么全局变量将会被局部变量覆...
js变量声明和变量提升
weixin_43886986的博客
03-01 94
变量有自己的作用域 超出作用域外可能会产生问题 紧记这个 就不会犯错 在全新的es6 语法中 新增的let 和const 和块级作用域 如果你提前在全局声明了var 在局部依旧可以什么一个同名的bar
JS变量（声明）提升和函数声明提升
csdssdn的博客
05-16 3168
目录 一、概念理解 1.变量声明提升 2.函数声明提升（又叫函数提升） 变量提升和函数提升的优先级 小结： 一、概念理解 变量提升：在当前作用于中，js代码自上而下执行之前，浏览器会把所有带var/function关键字进行提前声明或定义。带var的关键字只是提前声明一下，带function的关键字在变量提升阶段把定义和声明都完成了。 1.变量声明提升 通过 var 定义（声明）的变量，在定义语句之前就可以访问到 值：undefined,只是当时的值是undefined 2.函数.
变量声明和变量提升
靜哥哥的博客
05-31 3983
1.作用域 变量起作用的范围就是变量的作用域。在JavaScript中唯一能产生作用域的东西是函数。 1）块级作用域：使用代码块限定的作用域。JavaScript中没有块级作用域 2）词法作用域：在代码写好的那一刻，变量的作用域就已经确定了。和词法作用域相对的是动态作用域，JS中没有 使用规则： 函数允许访问函数外的变量 整个代码结构中只有函数可以限定作用域 作用域规则首先使用提升规...
JavaScript 中的作用域与变量声明提升
weixin_47450807的博客
02-09 622
一、简单阐述 变量提升其实就是我们在函数内部定义的变量，被提升到函数的首部，此时我们在变量任何地方都是可以访问到该变量的。 造成变量声明提升的原因：js引擎在执行代码前会先有一个代码解析的过程，在代码解析的过程中会创建一个对 象，该对象包含着一些在函数内部定义的变量，其值为undefined，还存在一些形参变量。该对象会放入该函数的 作用域链中的顶部。然后当执行代码时会给变脸进行赋值，以及执行函数的代码。当在执行过程中遇到的变量可以 沿着作用域链进行查找，直到找完全局作用域。 下面会对其具体的流程步骤进
JavaScript变量提升
最新发布
mhc20201554114的博客
09-16 1480
当栈内存的作用域形成时，js代码执行前浏览器将带有var关键字的变量提前声明（也就是在变量所属的作用域的顶部声明，虽然声明了，但是没有定义，在赋值前——也就是写着var XXX的地方之前，值为undefined），将带有function关键字的变量提前进行声明和定义（就是说带function的只要在这个作用域内写了，就可以用，哪怕调用这个函数的地方在他前面）。当js代码执行的时候，遇到创建函数的代码会直接跳过。
JavaScript变量声明和函数声明的提升
Congwei12138的博客
07-29 735
1、什么是声明提升 JavaScript在运行时解释器存在预解释的过程。这个过程会将函数声明和变量声明提升到当前作用域顶端。声明提升只提升声明，不会提升初始化过程。 2、变量声明 只有使用var声明的变量才会发生提升。 使用let，const创建的变量不会发生提升。 变量的赋值也不会发生提升。 没有使用var声明直接使用的伪全局对象，由于声明过程所以也不能提升。 num = 6; console.log(num); // 6 var num; //Hoisting ==> var num; /
JS面试题：变量声明的提升，javascript的变量声明提升
jiang7701037的博客
05-03 1752
变量声明（定义变量）提升：       在预编译阶段，编译器会把所有定义的变量全部提升到最顶部，即，把变量声明的语句会自动放置到开始。换句话说，经过预编译后，在任何函数里，一开始是全部的变量声明。//示例一： /* function func1(){ alert(v1); var v1; } //等价于(即预编译后)： function func1(){ var v1; alert(v1...
JavaScript变量声明详解
10-25
JavaScript变量声明是编程基础中的重要一环，理解变量声明对于编写有效的JS代码至关重要。本文将深入探讨JavaScript中的变量声明方式，以及与之相关的全局变量、局部变量、隐式全局变量和“hoisting”（悬置/置顶...
区别JavaScript函数声明与变量声明
10-18
在JavaScript中，函数声明（Function Declaration）和变量声明（Variable Declaration）之间存在显著的区别，这主要体现在它们的提升（Hoisting）行为、作用域以及执行时机等方面。理解这些差异对于编写可预测且无...
JavaScript进阶（一）变量声明提升实例分析
10-15
JavaScript中的变量声明提升（Hoisting）是编程时需要理解的关键概念。它涉及到JavaScript引擎在代码执行之前如何处理变量和函数的声明。在JavaScript中，`var`、`let`（ES6引入）和`const`（同样在ES6中引入）...
最通俗易懂的javascript变量提升详解
10-19
理解变量提升对于编写有效的JavaScript代码至关重要，因为它可以避免意外的行为，尤其是在使用`var`关键字进行变量声明时。在ES6引入的块级作用域（通过`let`和`const`关键字）中，变量提升的规则有所不同，不再有...
JavaScript的变量声明提升问题浅析(Hoisting)
10-21
大家应该都只奥javascript的变量声明具有hoisting机制，JavaScript引擎在执行的时候，会把...网上关于JavaScript的变量声明提升问题的文章有很多，这篇文章将再次谈谈关于这方面的问题，有需要的朋友们可以参考借鉴。
javascript 箭头函数获取参数列表
Novice-XiaoSong的博客
10-31 2308
箭头函数中无法使用 arguments 获取函数参数。 可以使用ES6的解构语法来代替。 let func = (...args) => { console.log('函数的参数是：', args); } func(1, 2, 3); // 函数的参数是： [1, 2, 3]
javascript 判断函数是否作为构造函数
Novice-XiaoSong的博客
10-31 2296
构造函数中 this 指向 new 创建的实例。所以可以通过在函数内判断 this 是否为当前函数的实例进而判断当前函数是否作为构造函数。 function F(){ if(this instanceof F){ console.log('我现在是作为构造函数') } else { console.log('我现在是普通函数') } } F(); // 我现在是普通函数 new F(); // 我现在是作为构造函数 ...
javascript 暂时性死区
Novice-XiaoSong的博客
12-13 1102
暂时性死区：ES6之前JS的一个BUG（美其名曰暂时性死区)。在使用 typeof 等运算符操作一个未声明的变量时，不会报错，该变量的值以 undefined 作处理 ES6：ES6的变量声明方法(let, const, class…)解决了暂时性死区问题，会进行显式报错。 ES6之前的暂时性死区 console.log(typeof a); // undefined （no error） ES6之后的变量声明 console.log(typeof a); // Uncaught Refe..
javascript window.isNaN vs. Number.isNaN
Novice-XiaoSong的博客
11-18 955
一、window.isNaN window.isNaN(1) // false window.isNaN('1') // false window.isNaN(true) // false window.isNaN(null) // false 注意 window.isNaN(Symbol()) // TypeError: Cannot convert a Symbol value to a number window.isNaN(undefined) // true window.isNaN('
手写 实现bind()
Novice-XiaoSong的博客
10-31 816
逐步实现js的bind方法 一. 无参数版 bind ES6之前 Function.prototype.myBind = function(_context){ // _context检测 _context = _context? _context: window; let that = this; // 按要求返回闭包(函数) return function(){ // 函数挂入_context内 _context.__fn = that; // 函数调用 let res.

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值