Javascript执行上下文、this、作用域
前置:重要事情说三遍:执行上下文和作用域不一样!不一样!不一样!
1、执行上下文和作用域之间最大的区别是:
执行上下文在运行时确定,随时可能改变;作用域在定义时确定,永远不会改变。
2、每个执行上下文都有三个重要的属性,变量对象(Variable object,VO),作用域链(Scope chain)和this,当然还有一些附加的属性。
实例、
var a=1;//全局作用域
function fn1(){
var a=2; //fn1作用域
}
this.a=1;//全局执行上下文
function fn1(){
this.a=2; //fn1执行上下文
}
var obj=new fn1();
一、执行上下文
综述:每次当控制器转到可执行代码的时候,就会进入一个执行上下文。执行上下文可以理解为当前代码的执行环境,它会形成一个作用域。JavaScript中的运行环境大概包括三种情况。
1、全局环境:JavaScript代码运行起来会首先进入该环境
2、函数环境:当函数被调用执行时,会进入当前函数中执行代码
3、eval
在一个JavaScript程序中,必定会产生多个执行上下文,JavaScript引擎会以堆栈的方式来处理它们。栈底永远都是全局上下文,而栈顶就是当前正在执行的上下文。
当代码在执行过程中,遇到以上三种情况,都会生成一个执行上下文,放入栈中,而处于栈顶的上下文执行完毕之后,就会自动出栈。
(1)变量对象VO和活动对象AO
变量对象VO是与执行上下文相关的特殊对象,用来存储上下文的函数声明,函数形参和变量。在global全局上下文中,变量对象也是全局对象自身;在函数执行上下文中,VO是不能直接访问的,此时由活动对象(activation object,缩写为AO)扮演VO的角色。
变量对象VO存储上下文中声明的以下内容
{
}
二、this
this代表了当前对象的一个引用。
1、this指代全局
var name ="global this";
functionglobalTest() {
console.log(this.name);
}
globalTest();//global this
2、this指代构造函数
var name ="global name";
function showName() { //构造函数
this.name ="showName function";
}
var obj =new showName();
console.log(obj.name); //showName
functionconsole.log(name); //global name
3、指向某个对象
如果函数作为对象的方法调用,this指向的是这个上级对象,即调用方法的对象
function showName() { //普通函数
console.log(this.name);
}
var obj = {};
obj.name ="ooo";
obj.show = showName;
obj.show(); //ooo
4、apply/call调用时的this
apply和call都是为了改变函数体内部的this指向。
call(thisObj,Object) ;apply(thisObj,[argArray])
var value ="Global value";
functionFunA() {
this.value ="AAA";
}
functionFunB() {
console.log(this.value);
}
FunB(); //Global value 因为是在全局中调用的FunB(),this.value指向全局的value FunB.call(window); //Global value,this指向window对象,因此this.value指向全局的value FunB.call(new FunA()); //AAA, this指向参数new FunA(),即FunA对象 FunB.apply(window); //Global value FunB.apply(new FunA());//AAA
三、作用域
首先,js只有函数作用域(function-based),没有块级作用域,也就是只有函数会有自己的作用域,其他都没有。
接着,作用域分为全局作用域与局部作用域。
全局作用域中的对象可以在代码的任何地方访问,一般来说,下面情况的对象会在全局作用域中:
最外层函数和在最外层函数外面定义的变量
没有通过关键字"var"声明的变量
浏览器中,window对象的属性
局部作用域又被称为函数作用域(Function scope),所有的变量和函数只能在作用域内部使用。
参考:https://www.cnblogs.com/nanchen/p/6055016.html
https://www.cnblogs.com/lsgxeva/p/7975669.html
https://www.jianshu.com/p/edb2be5866eb
https://blog.csdn.net/github_34514750/article/details/52901781