变量提升与函数提升

发布时间:2021-01-07 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了变量提升与函数提升前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

变量提升

var声明的变量会提升到函数或全局作用域顶部

简单例子

// 全局作用域变量提升例子
console.log(b)  // undefined
var b = 4

// 提升之后是这样
var b;
console.log(b) // 所以 b 没有值
b = 4
// 函数作用域中变量提升
var b = 5
function test() {
    console.log(b)  // undefined
    var b = 4
}

// 变量提升之后 
var b = 5
function test() {
    var b
    console.log(b)  // 所以这里变量b 没有赋值 undefined
    b = 4
}

函数提升

函数写法:函数表达式、函数声明、Function构造函数(这种不推荐).其中函数表达式不会函数提升函数声明会函数提升。

// 在这例子中 var b 声明的变量会提升,匿名函数不会.
var b = function() {
    //...
}
// 提升之后
var b ;
b = function(){}

我们都知道程序在执行时是从上往下执行的,而这里test()在定义之前就调用了为什么不报错?

// 在编译阶段所有的函数声明都会被提升到顶部.所以这里可以在定义之前使用函数
test()
function test() {
    console.log('ss')
}
// 提升之后
function test() {
    console.log('ss')
}
test()

实例一

num 值为多少?

var foo = function(x,y) {
	return x - y;
};
function foo(x,y) {
	return x + y;
}
var num = foo(1,2);  // -1

根据函数提升原理可得提升之后

// 函数提升之后代码
function foo(x,y) {
	return x + y;
}
var foo = function(x,y) {  // 在这里 foo 函数被重写了
	return x - y;
};
var num = foo(1,2);  // -1

实例二

yz的最终结果为: ?

var m = 1,j = (k = 0);
function add(n) {
	return (n = n + 1);
}
y = add(m);
function add(n) {
	return (n = n + 3);
}
z = add(m);

这例子也是一样的函数提升,只要把提升之后的代码贴出来就能知道结果了

// 函数提升之后 如下:
function add(n) {
	return (n = n + 1);
}
function add(n) { // js中没有函数重载,这只是覆盖了上面定义的add函数
	return (n = n + 3); // 相加完之后赋值给n 然后返回n
}
var m = 1,j = (k = 0);  // k 是一个非定义变量,在严格模式下是错误的.
y = add(m);  // 4
z = add(m);  // 4

实例三

控制台打印结果是什么?

var b = 5;
(function test(b) {
	console.log(b);
    var b = 10;
})(b);
console.log(b);

这里涉及了变量提升和参数与函数内部变量重复声明2个知识点

// 变量提升之后
var b = 5;
(function test(b) {
    var b; // 这里是无效的,参数名与内部变量声明重复的情况下,重复声明是无效的.
	console.log(b); // 5
    b = 10;
})(b);   // 参数传递
console.log(b); // 5

实例四

这题为实例三变种类型,主要考察引用类型

var b = {
	x: 5
};
(function test(b) {
	console.log(b.x); // 5
    var b = { x: 10 };
    console.log(b.x) // 10
})(b);
console.log(b.x);  // 5

引用类型传递的是指针,指针指向了变量存储地址.这例子里,2个b变量都指向了同一个地址,所以第一次输出5,然后下面修改了函数内部变量b的指向,它指向了一个新的存储地址,这里输出的是10.全局变量b的指向并没有变,所以这里输出的依然是5

个人博客地址 : https://www.zhuamimi.cn
文章地址 : https://www.zhuamimi.cn/archives/201

总结


以上是前端之家为你收集整理的变量提升与函数提升全部内容,希望文章能够帮你解决变量提升与函数提升所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。