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

2017-02-20  本文已影响0人  a4316976150e

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是永远不会延作用域链或原原型链出现一个“查找”的过程的,只会在函数调用时就完全确认。 

上一篇 下一篇

猜你喜欢

热点阅读