【JavaScript高级进阶】JavaScript变量/函数提升的细节总结

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81478248 // 测试1console.
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81478248
// 测试1

console.log('----------test1--------------');

console.log(global); // undefined

var global = 'hahaha';

console.log(global); // hahaha



function fn(){

console.log(a); // undefined

var a = 'aaa';

console.log(a); // aaa

}

// 如果一个变量没有定义的话就去输出,就会报出错误

//console.log(a); // error : undefined

fn();





// 代码执行思路解析

/*var global; // 变量提升,全局作用域范围内,此时只是声明,并没有赋值

console.log(global); // undefined

global = 'hahaha'; // 此时给变量赋值

console.log(global); // 输出已经赋值过的global变量



function fn(){

var a; // 变量提升为函数作用域范围内

console.log(a);

a = 'aaa';

console.log(a);

}

fn();*/





// 测试2 : 函数提升

console.log("------------------函数提升测试-----------------");

console.log(f1); // [Function: f1]

console.log(f2); // undefined



function f1(){ // 这块代码会自动函数提升,整个代码块提升到文件的最开始部分



}

var f2 = function(){



}

console.log(f2);




// 测试3

console.log("------------test3---------------");

// 第一步会先去执行f1()函数,执行完毕这个函数之后开始打印输出这个函数的返回值

console.log(f1()); // undefined 123456hahaha

function f1(){

console.log('aaa'); // aaa

return '123456hahaha';

}



console.log(f4); // var f4 undefined

var f4 = function(){

console.log('f4 executed!');

return 'f4 hahaha!';

}

console.log(f4, typeof f4); // 这里得到的实际上是一个函数





// 测试4

console.log('-------------test4------------');

console.log(aaa); // undefined

aaa = '987654321'; // 987654321

console.log(aaa);

var aaa = '123456789';

console.log(aaa); // 123456789

var aaa = '789';

console.log(aaa); // 789




// 测试5

console.log('--------------test5----------------');

var a = '12346789';

(function(){

// 这里的a默认是回去寻找全局作用域里面的a变量

console.log(a); /// error : a is not defined

a = '113579';

var b = 'bbb';

console.log(a);

})();





// 测试6

// 在方法外边不加上一个var是不能来定义变量的

//01. 都加var,在方法内则是局部变量,在方法外则是全局变量。

//02. 在方法内,加var为局部变量,不加var则是全局变量(在执行当前方法之后)

//console.log(bianliang); // error : is not defined

console.log('-----------------test6-----------------');

function test(){

//console.log(shuchubianliang); // error : is not defined

}

test();



var aaaa = 'I\'m a in all'

function test1 () {

// 相当于是var a, 然后输出a的值,当然是undefined

console.log(aaaa)

//console.log(window.a)



var a = 'I\'m a in test1'

console.log(a)

}



test1()




// JavaScript会把作用域里的所有变量和函数提到函数的顶部声明

// JavaScript会使用undefined缺省值创建变量a

console.log(aaaaaaa); // error

var aaaaaaa = '11';





console.log('------------test7-------------');

//思考题: 请问下面的结果是什么? 为什么? 写下你的答案

show();

var a = true;

if( a ){

function show(){

console.log( 1 );

}

}else {

function show(){

console.log( 2 );

}

}




//函数声明, 形如:

function show(){

console.log( '函数声明方式' );

} // 会被提升为全局



//函数表达式, 形如:

var show = function(){

console.log( '表达式方式' );

} // 不会被提升为全局的

 

相关文章
|
5月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
249 19
|
7月前
|
JavaScript
JS实现多条件搜索函数
JS封装的多条件搜索
|
8月前
|
JavaScript 前端开发 开发者
JavaScript基础——JavaScript变量名称命名规范
JavaScript变量命名规范是编写高质量代码的重要部分。通过遵循基本规则、使用常见命名约定并应用最佳实践,可以提高代码的可读性和可维护性。希望本文能帮助开发者在日常编程中更好地理解和应用JavaScript变量命名规范,从而编写出更清晰、更可靠的代码。
528 11
|
9月前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
210 32
|
10月前
|
JavaScript 前端开发 容器
盘点JavaScript中所有声明变量的方式及特性
本文详细介绍了JavaScript中变量定义的多种方式,包括传统的`var`、`let`和`const`,以及通过`this`、`window`、`top`等对象定义变量的方法。每种方式都有其独特的语法和特性,并附有代码示例说明。推荐使用`let`和`const`以避免作用域和提升问题,谨慎使用`window`和`top`定义全局变量,不建议使用隐式全局变量。掌握这些定义方式有助于编写更健壮的JS代码。
253 11
|
8月前
|
JavaScript 前端开发 Java
详解js柯里化原理及用法,探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
柯里化是一种强大的函数式编程技术,它通过将函数分解为单参数形式,实现了灵活性与可复用性的统一。无论是参数复用、延迟执行,还是函数组合,柯里化都为现代编程提供了极大的便利。 从 Redux 的选择器优化到复杂的数据流处理,再到深度嵌套的函数优化,柯里化在实际开发中展现出了非凡的价值。如果你希望编写更简洁、更优雅的代码,柯里化无疑是一个值得深入学习和实践的工具。从简单的实现到复杂的应用,希望这篇博客能为你揭开柯里化的奥秘,助力你的开发之旅! 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
449 12
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
204 11
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值?
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化,根据不同的应用场景和需求,可以选择合适的方法来实现CSS变量的动态修改,从而提高页面的灵活性和用户体验。
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。

热门文章

最新文章

下一篇
oss云网关配置