JS 作用链,箭头函数 this 取值

JS 作用链,箭头函数 this 取值

  通俗地讲,当声明一个函数时,局部作用域一级一级向上包起来,就是作用域链。

  1.当执行函数时,总是先从函数内部找寻局部变量。

  2.如果内部找不到(函数的局部作用域没有),则会向创建函数的作用域(声明函数的作用域)寻找,依次向上。

  比如在闭包中可以直接使用外部函数内定义的变量,这也是闭包的本质:闭包函数的定义基于外部函数的执行。

function outer(){
    let outerSay= ‘i am outer‘;
    function inner(){
        console.log(outerSay);
    }
    return inner;
}

outer()();

  运行结果:

JS 作用链,箭头函数 this 取值

  闭包函数访问到了外层函数定义的变量。也就是声明闭包函数时的外层作用域中的变量。

  以另一个例子作对比:

var name = "windowName";

function f1() {
    var name = "f1Name";
    console.log("f1 say : ",name);
    f0();
}


function f0() {
    console.log("f0 say :",name);
}

f1();

  运行结果:

JS 作用链,箭头函数 this 取值

  对于 f1 而言,在其内部声明了 name 变量,所以首先会找到函数内部定义的变量。而对 f0 而言,函数内部没有定义内部变量,需要从函数定义时的外层环境寻找,也就是全局变量 name 。而不是 f1 中定义的局部变量内部, f1 的环境是调用 f0 的外部环境,而不是声明 f0 的外部环境。

  相对于变量的取值取决于函数定义时的环境,this 的取值正相反,取决于函数运行时的上下文。this是使用call方法调用函数时传递的第一个参数,它可以在函数调用时修改,在函数没有调用的时候,this的值是无法确定。对于函数的调用:

const obj = {
    name: ‘Jerry‘,
    greet: function() {
        console.log(this.name)
    }
}
obj.greet()  //第一种调用方法
obj.greet.call(obj) //第二种调用方法

  对于函数的调用,第一种方式只是第二种方式的语法糖。函数在调用时需要传入调用对象。当使用第一种方法调用普通函数时,有以下规则:

  1. 一般方法中,this代指全局对象 window

  2. 作为对象方法调用,this代指当前对象

  3. 作为构造函数调用,this 指代new 出的对象()

  4. 调用方法的apply和call方法,可以改变函数的调用对象/作用域

  而对于箭头函数来说,箭头函数本身是没有 this 的,call 传入的第一个参数会被忽略。在严格模式下,this 为 undfined,否则为 window。箭头函数的 this 取决于执行上下文中的 this 。当作为闭包函数时,执行上下文中有外层函数的 this ,在箭头函数中使用 this 会直接使用外层函数的 this。闭包函数的定义取决于外部函数的执行。

  其他情况下箭头函数的 this 均指向 undfined(严格模式)或 window。

  对于普通函数来说,做为闭包函数时,其 this 指向的是 window 对象。因为其并没有被作为对象的方法调用,call 方法传入的第一个方法为 window 。

  可以说闭包函数的 this 是一个特例,其忽略了 call 中传入的第一个参数,不可人为指定 this,this 只会从执行上下文中去寻找。

  举个例子:

var name = ‘windowName‘;
var obj = {
    name: ‘outerName‘,
    inner0: function() { console.log(‘inner0 say : ‘, this.name); },
    inner1: () => { console.log(‘inner1 say : ‘, this.name) }
}
obj.inner0();
obj.inner1();

JS 作用链,箭头函数 this 取值

var name = ‘windowName‘;
var obj = {
    name: ‘outerName‘,
    inner0: function() {
        setTimeout(function() {
            console.log(‘inner0 say : ‘, this.name);
        }, 10)

    },
    inner1: function() {
        setTimeout(() => {
            console.log(‘inner1 say : ‘, this.name);
        }, 10)
    }
}
obj.inner0();
obj.inner1();

JS 作用链,箭头函数 this 取值

  

  

 

 

 

 

JS 作用链,箭头函数 this 取值

上一篇:ajax 请求接口 返回值 在前台循环


下一篇:js:浅拷贝和深拷贝