100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > javascript中的变量作用域以及变量提升详细介绍【javascript】

javascript中的变量作用域以及变量提升详细介绍【javascript】

时间:2023-03-14 22:11:40

相关推荐

javascript中的变量作用域以及变量提升详细介绍【javascript】

web前端|js教程

javascript,变量作用域,变量提升

web前端-js教程

变量作用域

“一个变量的作用域表示这个变量存在的上下文。它指定了你可以访问哪些变量以及你是否有权限访问某个变量。”

变量作用域分为局部作用域和全局作用域。

局部变量(处于函数级别的作用域)

不像其他对面对象的编程语言(比方说C++,Java等等),javascript没有块级作用域(被花括号包围的);当是,javascript有拥有函数级别的作用域,也就是说,在一个函数内定义的变量只能在函数内部访问或者这个函数内部的函数访问(闭包除外,这个我们过几天再写个专题)。

函数级别作用域的一个例子:

考勤 asp源码,vscode为啥没有输出,ubuntu怎么插入,tomcat ico设置,备忘录文件sqlite,爬虫爬取数据之后怎么分析,土豆 php,板芙镇优化seo,动易网站无法安装,免费网页菜单样式代码,织梦农家乐网站模板lzw

var name = "Richard";

mvc4 项目源码,ubuntu界面消失了,tomcat输入默认页面,爬虫音乐源码,php跳转没反应,郑州做seo搜索引擎优化多少钱lzw

function showName () {

var name = "Jack"; // local variable; only accessible in this showName function

console.log (name); // Jack

}

console.log (name); // Richard: the global variable

没有块级作用域:

更新消息滚动源码,vscode缩小试图,ubuntu路由实现,tomcat重设密码,sqlite 取一行,jquery文本清除插件,前端学框架前需要了解什么,怎样洒红标爬虫粉,php微信扫一扫,seo排名收费低,网站文字特效,自定义网页,国外优秀网页模板lzw

var name = "Richard";

// the blocks in this if statement do not create a local context for the name variable

if (name) {

name = "Jack"; // this name is the global name variable and it is being changed to "Jack" here

console.log (name); // Jack: still the global variable

}

// Here, the name variable is the same global name variable, but it was changed in the if statement

console.log (name); // Jack

// 不要忘记使用var关键字

// 如果声明一个变量的时候没有使用var关键字,那么这个变量将是一个全局变量!

// If you don declare your local variables with the var keyword, they are part of the global scope

var name = "Michael Jackson";

function showCelebrityName () {

console.log (name);

}

function showOrdinaryPersonName () {

name = "Johnny Evers";

console.log (name);

}

showCelebrityName (); // Michael Jackson

// name is not a local variable, it simply changes the global name variable

showOrdinaryPersonName (); // Johnny Evers

// The global variable is now Johnny Evers, not the celebrity name anymore

showCelebrityName (); // Johnny Evers

// The solution is to declare your local variable with the var keyword

function showOrdinaryPersonName () {

var name = "Johnny Evers"; // Now name is always a local variable and it will not overwrite the global variable

console.log (name);

}

// 局部变量优先级大于全局变量

//如果在全局作用域中什么的变量在局部作用域中再次声明,那么在局部作用域中调用这个变量时,优先调用局部作用域中声明的变量:

var name = "Paul";

function users () {

// Here, the name variable is local and it takes precedence over the same name variable in the global scope

var name = "Jack";

// The search for name starts right here inside the function before it attempts to look outside the function in the global scope

console.log (name);

}

users (); // Jack

全局变量

所有在函数外面声明的变量都处于全局作用域中。在浏览器环境中,这个全局作用域就是我们的Window对象(或者整个HTML文档)。

每一个在函数外部声明或者定义的变量都是一个全局对象,所以这个变量可以在任何地方被使用,例如:

// name and sex is not in any function

var myName = "zhou";

var sex = "male";

//他们都处在window对象中

console.log(window.myName); //paul

console.log(sex in window); //true

如果一个变量第一次初始化/声明的时候没有使用var关键字,那么他自动加入到全局作用域中。

function showAge(){

//age初始化时没有使用var关键字,所以它是一个全局变量

age = 20;

console.log(age);

}

showAge(); //20

console.log(age); //因为age是全局变量,所以这里输出的也是20

setTimeout中的函数是在全局作用域中执行的

setTimeout中的函数所处在于全局作用域中,所以函数中使用this关键字时,这个this关键字指向的是全局对象(Window):

var Value1 = 200;

var Value2 = 20;

var myObj = {

Value1 : 10,

Value2 : 1,

caleculatedIt: function(){

setTimeout(function(){

console.log(this.Value1 * this.Value2);

}, 1000);

}

}

myObj.caleculatedIt(); //4000

为了避免对全局作用域的污染, 所以一般情况下我们尽可能少的声明全局变量。

变量提升(Variable Hoisting)

所以的变量声明都会提升到函数的开头(如果这个变量在这个函数里面)或者全局作用域的开头(如果这个变量是一个全局变量)。我们来看一个例子:

function showName () {

console.log ("First Name: " + name);

var name = "Ford";

console.log ("Last Name: " + name);

}

showName ();

// First Name: undefined

// Last Name: Ford

// The reason undefined prints first is because the local variable name was hoisted to the top of the function

// Which means it is this local variable that get calls the first time.

// This is how the code is actually processed by the JavaScript engine:

function showName () {

var name; // name is hoisted (note that is undefined at this point, since the assignment happens below)

console.log ("First Name: " + name); // First Name: undefined

name = "Ford"; // name is assigned a value

// now name is Ford

console.log ("Last Name: " + name); // Last Name: Ford

}

函数声明会覆盖变量声明

如果存在函数声明和变量声明(注意:仅仅是声明,还没有被赋值),而且变量名跟函数名是相同的,那么,它们都会被提示到外部作用域的开头,但是,函数的优先级更高,所以变量的值会被函数覆盖掉。

// Both the variable and the function are named myName

var myName;?

function myName () {

console.log ("Rich");

}

// The function declaration overrides the variable name

console.log(typeof myName); // function

但是,如果这个变量或者函数其中是赋值了的,那么另外一个将无法覆盖它:

// But in this example, the variable assignment overrides the function declaration

var myName = "Richard"; // This is the variable assignment (initialization) that overrides the function declaration.

function myName () {

console.log ("Rich");

}

console.log(typeof myName); // string

最后一点, 在严格模式下,如果没有先声明变量就给变量赋值将会报错!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。