1. 首页

【进阶10期】JavaScript深入之重新认识箭头函数的this

上篇文章详细的分析了各种this的情况,看过之后对this的概念就很清晰了,没看过的去看看。

我们知道this绑定规则一共有5种情况:

  • 1、默认绑定(严格/非严格模式)
  • 2、隐式绑定
  • 3、显式绑定
  • 4、new绑定
  • 5、箭头函数绑定

其实大部分情况下可以用一句话来概括,this总是指向调用该函数的对象

但是对于箭头函数并不是这样,是根据外层(函数或者全局)作用域(词法作用域)来决定this。

对于箭头函数的this总结如下:

  1. 箭头函数不绑定this,箭头函数中的this相当于普通变量。
  2. 箭头函数的this寻值行为与普通变量相同,在作用域中逐级寻找。
  3. 箭头函数的this无法通过bind,call,apply来直接修改(可以间接修改)。
  4. 改变作用域中this的指向可以改变箭头函数的this。
  5. eg. function closure(){()=>{//code }},在此例中,我们通过改变封包环境closure.bind(another)(),来改变箭头函数this的指向。

题目1

/**
 * 非严格模式
 */

var name = 'window'

var person1 = {
  name: 'person1',
  show1: function () {
    console.log(this.name)
  },
  show2: () =console.log(this.name),
  show3: function () {
    return function () {
      console.log(this.name)
    }
  },
  show4: function () {
    return () =console.log(this.name)
  }
}
var person2 = { name: 'person2' }

person1.show1()
person1.show1.call(person2)

person1.show2()
person1.show2.call(person2)

person1.show3()()
person1.show3().call(person2)
person1.show3.call(person2)()

person1.show4()('JavaScriptc中文网 – 前端进阶资源分享 www.javascriptc.com')
person1.show4().call(person2)
person1.show4.call(person2)()

正确答案如下:

person1.show1() // person1,隐式绑定,this指向调用者 person1 
person1.show1.call(person2) // person2,显式绑定,this指向 person2

person1.show2() // window,箭头函数绑定,this指向外层作用域,即全局作用域
person1.show2.call(person2) // window,箭头函数绑定,this指向外层作用域,即全局作用域

person1.show3()() // window,默认绑定,这是一个高阶函数,调用者是window
                // 类似于var func = person1.show3() 执行func()
person1.show3().call(person2) // person2,显式绑定,this指向 person2
person1.show3.call(person2)() // window,默认绑定,调用者是window

person1.show4()() // person1,箭头函数绑定,this指向外层作用域,即person1函数作用域
person1.show4().call(person2) // person1,箭头函数绑定,
                            // this指向外层作用域,即person1函数作用域
person1.show4.call(person2)() // person2

最后一个person1.show4.call(person2)()有点复杂,我们来一层一层的剥开。

  • 1、首先是var func1 = person1.show4.call(person2),这是显式绑定,调用者是person2show4函数指向的是person2
  • 2、然后是func1(),箭头函数绑定,this指向外层作用域,即person2函数作用域

首先要说明的是,箭头函数绑定中,this指向外层作用域,并不一定是第一层,也不一定是第二层。

因为没有自身的this,所以只能根据作用域链往上层查找,直到找到一个绑定了this的函数作用域,并指向调用该普通函数的对象。

题目2

这次通过构造函数来创建一个对象,并执行相同的4个show方法。

/**
 * 非严格模式
 JavaScriptc中文网 – 前端进阶资源分享 www.javascriptc.com
 */

var name = 'window'

function Person (name) {
  this.name = name;
  this.show1 = function () {
    console.log(this.name)
  }
  this.show2 = () =console.log(this.name)
  this.show3 = function () {
    return function () {
      console.log(this.name)
    }
  }
  this.show4 = function () {
    return () =console.log(this.name)
  }
}

var personA = new Person('personA')
var personB = new Person('personB')

personA.show1()
personA.show1.call(personB)

personA.show2()
personA.show2.call(personB)

personA.show3()()
personA.show3().call(personB)
personA.show3.call(personB)()

personA.show4()()
personA.show4().call(personB)
personA.show4.call(personB)()

正确答案如下:

personA.show1() // personA,隐式绑定,调用者是 personA
personA.show1.call(personB) // personB,显式绑定,调用者是 personB

personA.show2() // personA,首先personA是new绑定,产生了新的构造函数作用域,
              // 然后是箭头函数绑定,this指向外层作用域,即personA函数作用域
personA.show2.call(personB) // personA,同上

personA.show3()() // window,默认绑定,调用者是window
personA.show3().call(personB) // personB,显式绑定,调用者是personB
personA.show3.call(personB)() // window,默认绑定,调用者是window

personA.show4()() // personA,箭头函数绑定,this指向外层作用域,即personA函数作用域
personA.show4().call(personB) // personA,箭头函数绑定,call并没有改变外层作用域,
                            // this指向外层作用域,即personA函数作用域
personA.show4.call(personB)() // personB,解析同题目1,最后是箭头函数绑定,
                            // this指向外层作用域,即改变后的person2函数作用域
                            //JavaScriptc中文网 – 前端进阶资源分享 www.javascriptc.com

题目一和题目二的区别在于题目二使用了new操作符。

使用 new 操作符调用构造函数,实际上会经历一下4个步骤:

  1. 创建一个新对象;
  2. 将构造函数的作用域赋给新对象(因此this就指向了这个新对象);
  3. 执行构造函数中的代码(为这个新对象添加属性);
  4. 返回新对象。

上期思考题解

依次给出console.log输出的数值。

var num = 1;
var myObject = {
    num: 2,
    add: function() {
        this.num = 3;
        (function() {
            console.log(this.num);
            this.num = 4;
        })();
        console.log(this.num);
    },
    sub: function() {
        console.log(this.num)
    }//JavaScriptc中文网 – 前端进阶资源分享 www.javascriptc.com
}
myObject.add();
console.log(myObject.num);
console.log(num);
var sub = myObject.sub;
sub();

答案有两种情况,分为严格模式和非严格模式。

  • 严格模式下,报错。TypeError: Cannot read property 'num' of undefined
  • 非严格模式下,输出:1、3、3、4、4

解答过程:

var num = 1;
var myObject = {
    num: 2,
    add: function() {
        this.num = 3; // 隐式绑定 修改 myObject.num = 3
        (function() {
            console.log(this.num); // 默认绑定 输出 1
            this.num = 4; // 默认绑定 修改 window.num = 4
        })();
        console.log(this.num); // 隐式绑定 输出 3
    },
    sub: function() {
        console.log(this.num) // 因为丢失了隐式绑定的myObject,所以使用默认绑定 输出 4
    }
}
myObject.add(); // 1 3
console.log(myObject.num); // 3
console.log(num); // 4,JavaScriptc中文网 – 前端进阶资源分享 www.javascriptc.com
var sub = myObject.sub;//  丢失了隐式绑定的myObject
sub(); // 4

内容来自评论区:【进阶3-1期】JavaScript深入之史上最全–5种this绑定全面解析

本期思考题

分别给出console.log输出的内容。

var obj = {
    say: function () {
        function _say() {
            console.log(this);
        }
        console.log(obj);
        return _say.bind(obj);
    }()
}
obj.say()

参考

JS中文网 – 前端进阶资源分享
从这两套题,重新认识JS的this、作用域、闭包、对象

往期目录:

  1. JS深入之理解JavaScript 中的执行上下文和执行栈
  2. JS深入之执行上下文栈和变量对象
  3. JS深入之执行上下文栈和变量对象
  4. JS深入之带你走进内存机制
  5. JS深入之4类常见内存泄漏及如何避免
  6. JS深入浅出图解作用域链和闭包
  7. JS深入之从作用域链理解闭包
  8. JS深入之闭包面试题解
  9. JS深入5种this绑定全面解析

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文来源于网络,其版权属原作者所有,如有侵权,请与小编联系,谢谢!

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:【进阶10期】JavaScript深入之重新认识箭头函数的this

链接:https://www.javascriptc.com/447.html

原文链接:https://github.com/yygmind/blog/issues/21

« 【进阶11期】深度解析 call 和 apply 原理、使用场景及实现
【进阶9期】JavaScript深入之5种this绑定全面解析(史上最全)»
Flutter 中文教程资源

相关推荐

QR code