【7】JavaScript 函数高级——作用域与作用域链

2019-06-27 admin

一、作用域

作用域个数 = n(定义的函数个数) + 1(全局作用域) (1)理解

  • 就是一块"地盘", 一个代码段所在的区域。
  • 它是静态的(相对于上下文对象), 在编写代码时就确定了。

(2)分类

(3)作用

clipboard.png

二、作用域与执行上下文

(1)区别1

  • 全局作用域之外,每个函数都会创建自己的作用域,作用域在函数定义时就已经确定了。而不是在函数调用时。
  • 全局执行上下文环境是在全局作用域确定之后, js代码马上执行之前创建。
  • 函数执行上下文环境是在调用函数时, 函数体代码执行之前创建。

(2)区别2

  • 作用域是静态的, 只要函数定义好了就一直存在, 且不会再变化。
  • 上下文环境是动态的, 调用函数时创建, 函数调用结束时上下文环境就会被释放。

(3)联系

  • 上下文环境(对象)是从属于所在的作用域。
  • 全局上下文环境==>全局作用域
  • 函数上下文环境==>对应的函数作用域

clipboard.png

三、作用域链

(1)理解

  • 多个上下级关系的作用域形成的链, 它的方向是从下向上的(从内到外)
  • 查找变量时就是沿着作用域链来查找的。

(2)查找一个变量的查找规则

  • 1)在当前作用域下的执行上下文中查找对应的属性, 如果有直接返回, 否则进入2)。
  • 2)在上一级作用域的执行上下文中查找对应的属性, 如果有直接返回, 否则进入3)。
  • 3)再次执行2)的相同操作, 直到全局作用域, 如果还找不到就抛出找不到的异常。
var a = 2;
function fn1() {
    var b = 3;
    function fn2() {
        var c = 4;
        console.log(c);
        console.log(b);
        console.log(a);
        console.log(d);
    }
    fn2();
}
fn1();

clipboard.png

四、作用域_面试题

面试题1

var x = 10;
function fn() {
  console.log(x);
}
function show(f) {
  var x = 20;
  f();
}
show(fn); // 结果 10
// 由于fn()的作用域中没有找到属性x,则会去fn()的上一级作用域也就是全局作用域中找,找到x=10,因此打印10.

面试题2

var fn = function () {
  console.log(fn)
}
fn()

var obj = {
  fn2: function () {
    console.log(fn2)
  }
}
obj.fn2()

clipboard.png

上面第一个会正常打印出fn()

第二个,调用时是obj.fn2(),而obj.fn2() = function(){console.log(fn2)}

所以相当于window调用function(){console.log(window.fn2)},而window中没有fn2属性,所以会报错。

将代码改变:

var fn = function () {
  console.log(fn)
}
fn()

var obj = {
  fn2: function () {
    // console.log(fn2)
    console.log(this.fn2)
  }
}
obj.fn2()

clipboard.png obj.fn2()调用时this的指向为obj,所以相当于function(){console.log(obj.fn2)}obj中有fn2属性,所以能成功执行。

[转载]原文链接:https://segmentfault.com/a/1190000019601318

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-68347.html

文章标题:【7】JavaScript 函数高级——作用域与作用域链

相关文章
JavaScript常用特效chm下载
下载地址:JavaScript常用特效chm下载 对了,如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
javascript是什么意思
avaScript是Netscape开发的一个对象脚本语言,它使用在世界各地数以百万计的网页和服务器应用程序上。 网景的JavaScript是ecma - 262版的标准脚本语言,和公布的标准只有轻微的差异。 与广为流行的错误理解相反,Ja...
2015-11-12
canvas图片绘制跨域问题解决方案Tainted canvases may not be exported
图片跨域问题的一般解决方法 当使用canvas绘制网络图片的时候,经常会出现“Tainted canvases may not be exported”报错,上网搜一下解决方案,应该给的都是给img添加crossOrigin属性,尝试了一下...
2018-04-19
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
Node.js学习(1)----HTTP服务器与客户端
Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。http.Server 是一个基于事件的 HTTP 服务器,它的核心由 Node.js 下层 C++部分实现,而接口由 Jav...
2015-11-12
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
2015年3月国内浏览器市场份额概括,chrome占32.97
本报告数据,来源于百度统计所覆盖的超过150万的站点,而不是baidu.com的流量数据。 注:奇虎360浏览器份额在2010年10月至2011年3月,和2012年9月以来,两次大幅下降,是因为360浏览器去掉了原本的浏览器特征(User...
2015-11-12
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
回到顶部