js作用域/this取值问题

1、函数的作用域链在定义函数时就确定了,所以当函数中没有定义变量时,在定义函数的地方寻找上一级作用域中寻找。

2、作用域中,涉及到Js代码的编译和执行过程,在未调用时,进行js代码的编译,即创建每个执行环境中的变量对象或活动对象(因为只有在全局环境下才能直接访问变量对象读取变量,所以在函数作用域下使用活动对象来代替变量对象)。

变量对象主要包含了:函数声明的提升(函数表达式不会进行提升,例如作为赋值表达式一部分的函数,或者没有函数名的函数,或()内的函数),变量声明(值为undefined),函数声明赋值(封装为函数的定义),this的赋值。

活动对象则不仅包含变量对象中包含的部分,它还包含了函数的形参,即arguments。

所以创建VO/AO的过程如下:

  • 首先扫描代码,查找函数声明,将函数名放入其中,值为其定义,后面如果遇到同名函数,那么就覆盖其对应的值,如果遇到同名变量就不做处理,继续扫描
  • 然后扫描变量(包含函数形参),如果变量名没有出现在VO/AO中,则添加进去,值为undefined,如果有同名函数或变量都不再做处理,继续扫描。

在按顺序执行Js代码时,会对同名变量进行赋值。

eg:

function fn(a){
  alert(a);//第一句
  var a=2;
  function a(){alert("blue")}
  alert(a);//第二句
  var a=4;
  function a(){alert("red")}
  alert(a);//第三句
}

fn(1);

上述代码中为a的有两个函数声明,一个形参变量,两个定义变量。

所以初始AO中的a为第二个函数声明,则第一句,其作用域中的a为function a(){alert("red")}

执行var a=2;时,就将变量值改变为2,而function a(){alert("blue")}在定义阶段就被覆盖了,所以忽略,那么第二句时,a为2

执行var a=4时,就将变量值改为4,所以第三句时,a为4.

上述代码也可以理解为以下情况:

function a(){
  alert("blue");
}
function a(){
  alert("red");
}
alert(a);
var a=1;
var a=2;
alert(a);
var a=4;
alert(a);

3、函数中的this值:

  • 函数作为构造函数,并用new来创建实例时,this为创建的实例,且构造函数中的原型链中的this也是创建的实例
  • 函数作为对象的属性,并且以对象的属性进行调用时,this为该对象
  • 函数作为对象的属性,但是调用时是将其赋值给一个变量,然后再执行,那么就是作为普通函数,this值为window对象
  • 函数作为普通函数(即不作为构造函数),然后在全局环境下进行调用时,this指的时window
  • 使用apply,call进行作用域变换时,this指的为传入的参数。

典型案例:

var length=10;
function fn(){
  alert(this.length);
}
var obj={
  length:5,
  method:function(f){
    alert(this.length);//这里匿名函数作为对象的属性被调用,所以this为obj,所以为5
    f();                       //这里等于fn()作为普通函数被调用,所以this为window,所以为10
    arguments[0]();  //这里arguments为类数组,它的属性名为下标,可以理解为是一个以数字为属性名的对象,那么arguments[0]中的this就指向arguments,而arguments本身具有length属性,表示参数的个数,所以为1
  }
};
obj.method(fn);

猜你喜欢

转载自blog.csdn.net/qingliufu/article/details/80003439