JavaScript高级特性-作用域的示例代码详情

来源：懂视网责编：小采时间：2020-11-27 20:24:09

JavaScript高级特性-作用域的示例代码详情

JavaScript高级特性-作用域的示例代码详情:作用域在javascript中分为全局作用域和局部作用域，而局部作用域其实指得就是函数作用域，javascript将函数作为作用域的最小范围。全局作用域 Global Scope在代码的任何地方都可以访问到的对象，比如window对象及window对象的属性，就拥有全局作用域。1

推荐度：

点击下载本文 文档为doc格式

导读JavaScript高级特性-作用域的示例代码详情:作用域在javascript中分为全局作用域和局部作用域，而局部作用域其实指得就是函数作用域，javascript将函数作为作用域的最小范围。全局作用域 Global Scope在代码的任何地方都可以访问到的对象，比如window对象及window对象的属性，就拥有全局作用域。1

作用域在javascript中分为全局作用域和局部作用域，而局部作用域其实指得就是函数作用域，javascript将函数作为作用域的最小范围。

全局作用域 Global Scope

在代码的任何地方都可以访问到的对象，比如window对象及window对象的属性，就拥有全局作用域。
1、在最外层定义的变量，默认都是window对象的属性；
2、未定义的变量默认都是全局的，默认也都是window对象的属性；这一条是经常犯的错误,但是新版浏览器已经修复了这个问题！
举例如下：

var firstName = "leo";
function changeName() {
 var secondName = "jut";
 fullName = "jutleo";
 function getName() {
 console.log(secondName);
 }
 getName();
}
console.log(firstName);
console.log(fullName);//报错
// console.log(secondName);//报错
changeName();
// getName();//报错

局部作用域/函数作用域(Local Scope/Function Scope)

在函数中定义一个变量时，这个变量只对当前函数可见,javascript会搜索当前函数的作用域，如果没有找到，则继续向上层搜索，直到在全局作用域也没有找到会返回undefined；

var version = "version_1";
var f1 = function() {
 console.log(version);//version_1
}
f1();

在f1函数中没有找到，继续往上查找

var version = "version_1";
var f2 = function() {
 var version = "version_2";
 console.log(version);//version_2
}
f2();

在f2函数中直接找到

var socpe = "scope_01";
var f3 = function() {
 console.log(scope); //undefined
 var scope = "scope_02";
}
f3();

这又是为什么呢？原来javascript在f3函数内搜索scope变量，并且找到了，这个时候外层的scope就被忽略了，但是执行到console.log(scope)时，scope还没有被初始化，所以返回undefined

var f4 = function() {
 var scope = "scope_02";
 (function(){
 var scope = "scope_03";
 (function(){
 console.log(scope); //scope_03
 })();
 })();
}
f4();

嵌套也是要遵循同样的规则的，先在函数内部查找，没有找到继续往上层找！

var x_scope = "leo";
var f5 = function() {
 console.log(x_scope); //leo
}
var f6 = function() {
 var x_scope = "jut";
 f5();
}
f6();

这又是为什么呢？原来javascript函数嵌套时，作用域是由嵌套关系决定的，调用的顺序忽略不记！

说了这么多，这个作用域如何使用呢？我们从以上例子可以看出，javascript在查找变量时，顺序往上找的这个链条就作用域链。在实际应用中变量的位置越深，读写的速度就越慢，直到找到全局作用域中。

看例子：

function setLabelBgColor(){
 document.getElementById("btn").onclick=function(){
 document.getElementById("label").style.backgroundColor="red";
 };
}

根据作用域链的查找逻辑，查找document变量必须遍历整个作用域链，直到最后在全局对象中才能找到，这个函数引用了两次。优化如下：

function setLabelBgColor(){
 var doc = document;
 doc.getElementById("btn").onclick=function(){
 doc.getElementById("label").style.backgroundColor="red";
 };
}

这个只是个例子，这么做并不会大幅提升性能哦！但是在实际使用中要避免全局变量被大量访问的情况。

(function(exports){
 //do some thing ...
})(window);

思考一下，为什么看到的库、框架都是这么开始的？

JavaScript高级特性-作用域的示例代码详情

推荐度：

点击下载本文 文档为doc格式

标签： js 代码实例

热门焦点

JavaScript高级特性-作用域的示例代码详情

JavaScript高级特性-作用域的示例代码详情

全局作用域 Global Scope

局部作用域/函数作用域(Local Scope/Function Scope)

JavaScript高级特性-作用域的示例代码详情

最新推荐

猜你喜欢

热门推荐