前端基础之JavaScript_(4)_js的作用域
js作用域
作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期。在JavaScript中,变量的作用域有全局作用域和局部作用域两种。
js的作用域
1. 全局作用域(Global Scope)
在代码中任何地方都能访问到的对象拥有全局作用域,一般来说一下几种情形拥有全局作用域:
(1)最外层函数和在最外层函数外面定义的变量拥有全局作用域
var name="yuan"; function foo(){
var age=23;
function inner(){
console.log(age);
} inner();
} console.log(name); // yuan
console.log(age); // Uncaught ReferenceError: age is not defined
foo(); // 23
inner(); // Uncaught ReferenceError: inner is not defined
(2)所有末定义直接赋值的变量自动声明为拥有全局作用域,例如:
var name="yuan"; function foo(){
age=23; var sex="male"
}
foo();
console.log(age); // 23
console.log(sex); // sex is not defined
变量age拥有全局作用域,而sex在函数外部无法访问到。
(3)所有window对象的属性拥有全局作用域
一般情况下,window对象的内置属性都都拥有全局作用域,例如window.alert()、window.location、window.top等等。
2. 局部作用域(Local Scope)
和全局作用域相反,局部作用域一般只在固定的代码片段内可访问到,最常见的例如函数内部,所有在一些地方也会看到有人把这种作用域成为函数作用域.
如示例1中的age与inner都只有局部作用域。(js中if、for没有自己的作用域)
作用域链(Scope Chain)
在JavaScript中,函数也是对象,实际上,JavaScript里一切都是对象。函数对象和其它对象一样,拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]],由ECMA-262标准第三版定义,该内部属性包含了函数被创建的作用域中对象的集合,这个集合被称为函数的作用域链,它决定了哪些数据能被函数访问。
示例演示
//-----**********************例1********************************* var s=;
function f(){
console.log(s);
var s=; // if s=12
console.log(s)
}
f();
>>:
undefine
12 //-----**********************例2********************************* var s=;
function foo(){
console.log(s);
var s=;
console.log(s);
function s(){console.log("ok")}// 函数的定义或声明是在词法分析时完成的,执行时已不再有任何操作 console.log(s);
} foo(); >>:
function s(){console.log("ok")}
5
5
//-----***********************例3******************************** function bar(age) { console.log(age);
var age = ;
var sex= 'male';
console.log(age);
function age() {
alert()
};
console.log(age);
return ;
} result=bar();
>>:
function age() {
alert(123)
}
99
99
//-----********************************************************
结果分析
当一个函数创建后,它的作用域链会被创建此函数的作用域中可访问的数据对象填充。在函数bar创建时,它的作用域链中会填入一个全局对象,该全局对象包含了所有全局变量,如下图所示:
解析到函数调用时,即bar(5),会生成一个active object的对象,该对象包含了函数的所有局部变量、命名参数、参数集合以及this,然后此对象会被推入作用域链的前端,当运行期上下文被销毁,活动对象也随之销毁。新的作用域链如下图所示:
过程解析:
function bar(age) { console.log(age);
var age = 99;
var sex="male";
console.log(age);
function age(){
alert(123);
} ;
console.log(age);
return 100;
} result=bar(5); 一 词法分析过程(涉及参数,局部变量声明,函数声明表达式):
1-1 、分析参数,有一个参数,形成一个 AO.age=undefine;
1-2 、接收参数 AO.age=5;
1-3 、分析变量声明,有一个 var age, 发现 AO 上面有一个 AO.age ,则不做任何处理
1-4 、分析变量声明,有一个 var sex,形成一个 AO.sex=undefine;
1-5 、分析函数声明,有一个 function age(){} 声明, 则把原有的 age 覆盖成 AO.age=function(){};
二 执行过程:
2-1 、执行第一个 console.log(age) 时,当前的 AO.age 是一个函数,所以输出的一个函数
2-2 、这句 var age=99; 是对不 AO.age 的属性赋值, AO.age=99 ,所以在第二个输出的age是 99;
2-3 、同理第三个输出的是 99, 因为中间没有改变 age 值的语句了。 注意:执行阶段:
function age(){
alert(123)
} ; 不进行任何操作,将执行语句复制给age这部操作是在词法分析时,即运行前完成的。
function func(){
//this, 代指window
} window.func() function Func(){
this.name='alex'; // this,代指obj
} obj = new Func();
console.log(obj.name); function Func(){
this.name='alex'; // this,代指obj
this.show = function(){
console.log(this);
}
} obj = new Func();
obj.show() userInfo = {
name:'alex',
age: ,
show:function(){
console.log(this)
}
} userInfo.show() ##### 结论:函数被 对象.函数 执行,那么函数中的this就是该对象 ##### userInfo = {
name:'alex',
age: ,
show:function(){
console.log(this); #userinfo
(function(){
console.log(this); # window
})()
}
} userInfo.show() function Func(){
this.name='alex'; // this,代指obj
this.show = function(){
console.log(this); # obj
(function(){
console.log(this); # window
})()
}
} obj = new Func();
obj.show() userInfo = {
name:'alex',
age: ,
show:function(){
console.log(this); #userinfo
var that = this;
(function(){
console.log(that); # userinfo
})()
}
} userInfo.show()
js作用域面试题
前端基础之JavaScript_(4)_js的作用域的更多相关文章
- 前端基础之JavaScript_(1)_ECMAScript
一.JavaScript概述 JavaScript的历史 992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase. ...
- 前端基础之JavaScript_(5)_DOM对象总结
DOM 定义了访问和操作HTML文档的标准方法 访问(查找标签) //---- 直接查找 document.getElementById(“idname”) document.getElementsB ...
- 前端基础之JavaScript_(3)_DOM对象
JavaScript之DOM对象 HTML DOM HTML Document Object Model(文档对象模型) HTML DOM 定义了访问和操作HTML文档的标准方法 HTML DOM ...
- 前端基础之JavaScript_(2)_BOM对象
BOM对象 window对象 所有浏览器都支持 window 对象.概念上讲.一个html文档对应一个window对象.功能上讲: 控制浏览器窗口的.使用上讲: window对象不需要创建对象,直接使 ...
- 前端基础面试题(JS部分)
1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...
- 前端基础进阶(五):全方位解读this
https://segmentfault.com/a/1190000012646488 https://yangbo5207.github.io/wutongluo/ 说明:此处只是记录阅读前端基础 ...
- 前端基础之JavaScript day51
前端基础之JavaScript JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中) ...
- 进击的Python【第十四章】:Web前端基础之Javascript
进击的Python[第十四章]:Web前端基础之Javascript 一.javascript是什么 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编 ...
- BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js
BAT 前端开发面经 —— 吐血总结 目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...
随机推荐
- Python内置函数之ascii()
ascii()返回一个字符串对象. ascii()的参数只能有一个. 如果参数中有非ascii字符,会用 \u,\U,\x 来替代. ascii()和Python2中repr()等效 下面看看例子: ...
- c++ 如何使用第三方的library
感谢以下参考资料: 关于如何使用第三方的库: http://stackoverflow.com/questions/21942545/how-to-install-third-party-librar ...
- MFC invalidate和RedrawWindow区别
Invalidate()函数是强制系统进行重画,但是不一定就马上进行重画.因为Invalidate()只是通知系统,此时的窗口已经变为无效.强制系统调用WM_PAINT,而这个消息只是Post就是将该 ...
- 百度UEditor -- ZeroClipboard is not defined
项目中一直在使用UEditor,风平浪静. 近期该项目引入了Requirejs,结果发现在有富文本编辑器的页面都会在控制台报出如下异常: Uncaught ReferenceError: ZeroCl ...
- Vim使用技巧(3) -- 可视化模式技巧 【持续更新】
快捷键 Esc / Ctrl + [ / v //切换到普通模式 o //切换高亮选区的光标活动端 y //将光标选中的内容复制到寄存器中 u //将光标选中的字母全部改成小写字母 U //将光标选中 ...
- Python 双向链表 快速排序
1.创建链表: from random import randint class DLinkedNode(object): def __init__(self, data=None, pre=None ...
- CGAffineTransform函数旋转操作
本文转载至 http://blog.sina.com.cn/s/blog_923fdd9b0101ahyx.html 首先获取UITableView的CGAffineTransform函数:CG ...
- HTML学习笔记——标准网页设计+使用CSS、Javascript
一.标准网页设计 1.标准网页概述: 标准网页设计要遵循,内容与表现相分离. 内容 + 表现 = 页面 --- 即 :XHTML + CSS = PAGE 内容与变现相分离,也就是内容使用HT ...
- 关于webpack打包js和css
废话不多说,直接贴出代码,大家瞅瞅:其中要引用css的话是要用css-loader.用了之后再webpack.config.js里面配置相应的代码,并且在相应的js文件里面引用即可啦,不知道有哪位大神 ...
- FW 配置一个私有的Docker仓库
思维 66 3月1日 发布 建分支 0 分支 收藏 0 收藏 我们在本地开发时,如果内网能部署一台Docker服务器,无疑会极大的方便镜像的分享发布,有些私有镜像就是可以直接放到内网服务器上,省去了不 ...