美文网首页
js关于作用域链以及闭包的理解

js关于作用域链以及闭包的理解

作者: a4316976150e | 来源:发表于2017-02-20 23:54 被阅读0次

js的作用域链是由当前执行环境下的变量对象以及上层的执行环境下的变量对象组成,它保证了当前执行环境对符合访问它的权限的函数以及变量的访问顺序

例子

以上为例子的话,他们的执行上下文相继被创建,而他们的变量对象可以这么来表示;

VO(全局){

arguments:.....

function:test()

var :....

}

VO(test){

arguments:....

function:add()

var:a

}

VO(add){

arguments:...

function:...

var:a

}

而add的作用域链,则同时包含了这三个变量对象。所以add的执行上下文中的作用域链可以这么表示:

add{

VO:  //变量对象

scopeChain: [VO(add),VO(test),VO(global)], // 作用域链

this   //this指向

}

从他们的关系可以用一个数组来表示

而数组的末端就是全局变量对象

所以作用域链可以用一个单方向的通道来表示,以它自己为最前端为起点,最末端为重点,

所以作用域链是由一系列变量对象组成的一个单方面的一个通道,这样我们就可以在这个单方面的通道里面访问上一层的函数和变量。

闭包的意思

当函数可以记住并且访问当前作用域(全局作用域除外),即使这个函数是在当前作用域之外执行。

假设一个例子,一个函数🅱️在函数🅰️里面定义并且访问了函数🅰️里面的变量,那么B九四闭包。

通过闭包,我们可以在其他执行上下文当中,访问到函数的内部变量。如下例子

我们通过函数bar访问到了函数foo中的变量。

this

this的查找

this的查找是很多人迷茫的一点,也似乎有很多人抱有this不稳定这样的看法,实在令人无语。this的查找可以说是3种对象查找中最为简单的,因为其实this对象的确定根本没有一个“查找”的过程。

首先,this对象只会在一个函数中需要确定,如果是在全局域下,this永远为Global对象,在浏览器中通常就是window对象。而在javascript中,函数的调用一共有4种方式:

Function Invocation Pattern

诸如`foo()`的调用形式被称为Function Invocation Pattern,是函数最直接的使用形式,注意这里的foo是作为单独的变量出现,而不是属性。

在这种模式下,foo函数体中的this永远为Global对象,在浏览器中就是window对象。

Method Invocation Pattern

诸如`foo.bar()`的调用形式被称为Method Invocation Pattern,注意其特点是被调用的函数作为一个对象的属性出现,必然会有“.”或者“[]”这样的关键符号。

在这种模式下,bar函数体中的this永远为“.”或“[”前的那个对象,如上例中就一定是foo对象。

Constructor Pattern

`new foo()`这种形式的调用被称为Constructor Pattern,其关键字`new`就很能说明问题,非常容易识别。

在这种模式下,foo函数内部的this永远是new foo()返回的对象。

Apply Pattern

`foo.call(thisObject)`和`foo.apply(thisObject)`的形式被称为Apply Pattern,使用了内置的`call`和`apply`函数。

在这种模式下,`call`和`apply`的第一个参数就是foo函数体内的this,如果thisObject是`null`或`undefined`,那么会变成Global对象。

应用以上4种方式,确定一个函数是使用什么样的Pattern进行调用的,就能很容易确定this是什么。

另外,this是永远不会延作用域链或原原型链出现一个“查找”的过程的,只会在函数调用时就完全确认。 

相关文章

  • JavaScript 函数闭包(colsure)

    理解闭包,你首先必须理解JS的变量作用域,JavaScript作用域和作用域链。 ES6之前,变量的作用域分为全局...

  • 闭包

    一、理解闭包前js基础1、作用域链(作用域、作用域链中有说)。2、js的内存回收机制。一个函数在执行开始的时候,会...

  • js函数中的this

    前两篇文章“执行环境和作用域”和“js中的闭包”,我对谈了执行环境、作用域、作用域链和闭包的理解。但当牵涉到对象中...

  • JS博客

    JS构造函数及new运算符 JS原型对象和原型链 函数作用域和作用域链 干货分享:让你分分钟学会JS闭包 深入理解...

  • 《Web前端开发之JavaScript精英课堂》(六)

    对 作用域、作用域链、执行上下文对象(GO | AO)、闭包 的个人理解: JS分为全局和局部作用域,都属于词法作...

  • js关于作用域链以及闭包的理解

    js的作用域链是由当前执行环境下的变量对象以及上层的执行环境下的变量对象组成,它保证了当前执行环境对符合访问它的权...

  • JS 闭包(Closure)

    参考阮一峰老师的JS 闭包 理解闭包前需要理解变量作用域、变量提升 JS作用域 那如何让它依次打印,12345呢;...

  • js 闭包

    一、js 作用域 讲闭包首先就要理解 js 的作用域。再 ES5 中,js 有两种作用域,全局作用域和函数作用域(...

  • 函数、作用域链与闭包

    闭包是js中一个极为NB的武器,但也不折不扣的成了初学者的难点。因为学好闭包就要学好作用域,正确理解作用域链,然而...

  • JS基础知识:变量对象、作用域链和闭包

    JS基础知识:变量对象、作用域链和闭包 前言:这段时间一直在消化作用域链和闭包的相关知识。之前看《JS高程》和一些...

网友评论

      本文标题:js关于作用域链以及闭包的理解

      本文链接:https://www.haomeiwen.com/subject/psmewttx.html