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的作用域的更多相关文章

  1. 前端基础之JavaScript_(1)_ECMAScript

    一.JavaScript概述 JavaScript的历史 992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase. ...

  2. 前端基础之JavaScript_(5)_DOM对象总结

    DOM 定义了访问和操作HTML文档的标准方法 访问(查找标签) //---- 直接查找 document.getElementById(“idname”) document.getElementsB ...

  3. 前端基础之JavaScript_(3)_DOM对象

    JavaScript之DOM对象 HTML  DOM HTML  Document Object Model(文档对象模型) HTML DOM 定义了访问和操作HTML文档的标准方法 HTML DOM ...

  4. 前端基础之JavaScript_(2)_BOM对象

    BOM对象 window对象 所有浏览器都支持 window 对象.概念上讲.一个html文档对应一个window对象.功能上讲: 控制浏览器窗口的.使用上讲: window对象不需要创建对象,直接使 ...

  5. 前端基础面试题(JS部分)

    1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...

  6. 前端基础进阶(五):全方位解读this

    https://segmentfault.com/a/1190000012646488  https://yangbo5207.github.io/wutongluo/ 说明:此处只是记录阅读前端基础 ...

  7. 前端基础之JavaScript day51

    前端基础之JavaScript   JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中) ...

  8. 进击的Python【第十四章】:Web前端基础之Javascript

    进击的Python[第十四章]:Web前端基础之Javascript 一.javascript是什么 JavaScript 是一种轻量级的编程语言. JavaScript 是可插入 HTML 页面的编 ...

  9. BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js

    BAT 前端开发面经 —— 吐血总结   目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...

随机推荐

  1. Python内置函数之ascii()

    ascii()返回一个字符串对象. ascii()的参数只能有一个. 如果参数中有非ascii字符,会用 \u,\U,\x 来替代. ascii()和Python2中repr()等效 下面看看例子: ...

  2. c++ 如何使用第三方的library

    感谢以下参考资料: 关于如何使用第三方的库: http://stackoverflow.com/questions/21942545/how-to-install-third-party-librar ...

  3. MFC invalidate和RedrawWindow区别

    Invalidate()函数是强制系统进行重画,但是不一定就马上进行重画.因为Invalidate()只是通知系统,此时的窗口已经变为无效.强制系统调用WM_PAINT,而这个消息只是Post就是将该 ...

  4. 百度UEditor -- ZeroClipboard is not defined

    项目中一直在使用UEditor,风平浪静. 近期该项目引入了Requirejs,结果发现在有富文本编辑器的页面都会在控制台报出如下异常: Uncaught ReferenceError: ZeroCl ...

  5. Vim使用技巧(3) -- 可视化模式技巧 【持续更新】

    快捷键 Esc / Ctrl + [ / v //切换到普通模式 o //切换高亮选区的光标活动端 y //将光标选中的内容复制到寄存器中 u //将光标选中的字母全部改成小写字母 U //将光标选中 ...

  6. Python 双向链表 快速排序

    1.创建链表: from random import randint class DLinkedNode(object): def __init__(self, data=None, pre=None ...

  7. CGAffineTransform函数旋转操作

    本文转载至  http://blog.sina.com.cn/s/blog_923fdd9b0101ahyx.html   首先获取UITableView的CGAffineTransform函数:CG ...

  8. HTML学习笔记——标准网页设计+使用CSS、Javascript

    一.标准网页设计 1.标准网页概述: 标准网页设计要遵循,内容与表现相分离.   内容 + 表现 = 页面  ---  即 :XHTML + CSS = PAGE 内容与变现相分离,也就是内容使用HT ...

  9. 关于webpack打包js和css

    废话不多说,直接贴出代码,大家瞅瞅:其中要引用css的话是要用css-loader.用了之后再webpack.config.js里面配置相应的代码,并且在相应的js文件里面引用即可啦,不知道有哪位大神 ...

  10. FW 配置一个私有的Docker仓库

    思维 66 3月1日 发布 建分支 0 分支 收藏 0 收藏 我们在本地开发时,如果内网能部署一台Docker服务器,无疑会极大的方便镜像的分享发布,有些私有镜像就是可以直接放到内网服务器上,省去了不 ...