当前位置: 首页 > news >正文

this指向解析

先看题目:

第一题:

var name = 'window'
var person1 = {
    name: 'person1',
    show1: function () {
        console.log(this.name)
    },
    show2: () => console.log(th
    show3: function () {
        return function () {
            console.log(this.na
        }
    },
    show4: function () {
        return () => console.lo
    }
}
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()()
person1.show4().call(person2)
person1.show4.call(person2)()


第二题:
var name = 'window'
function Person(name) {
    this.name = name;
    this.show1 = function () {
        console.log(this.name)
    }
    this.show2 = () => console.
    this.show3 = function () {
        return function () {
            console.log(this.na
        }
    }
    this.show4 = function () {
        return () => console.lo
    }
}
var personA = new Person('perso
var personB = new Person('perso
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)()

普通函数和匿名函数的this指向及特性:

普通函数:this指向调用函数的对象;若为构造函数,那么指向实例对象;箭头函数都是匿名函数;

匿名函数:this指向外面最近一层函数的this,如果最外层没有函数,那么在浏览器环境下指向windows;匿名函数的this不能使用call()、bind()、apply()改变;

解析过程:(第一个题的第一个小题用1.1表示)

1.1:调用person1中的show1函数,为普通函数,this指向本对象的this,因此打印person1。

1.2:调用person1中的show1函数,并将this指向改成person2,因此打印person2。

1.3:调用person1中的show2函数,为箭头函数,this指向外面最近一层函数的this,外面最近一层没函数,所以指向windows,因此打印window。

1.4:调用person1中的show2函数,使用call修改this指向,但是this2为箭头函数,不可修改,所以依旧打印window。

1.5:调用person1中的show3函数,并再次调用返回函数,show3和返回函数都是普通函数,调用show3之后返回一个匿名函数,之后再调用返回的匿名函数,相当于直接调用匿名函数,因此直接打印window。

1.6:调用person1中的show3函数,使用call修改返回函数的this指向,并再次调用返回函数,所以打印person2。

1.7:调用person1中的show3函数,使用call修改show3的this指向,并再次调用返回函数,而返回函数的this指向和show3的this指向无关,所以依旧打印window。

1.8:调用person1中的show4函数,并再次调用返回函数,show4为普通函数,返回函数为箭头函数,箭头函数的this指向为外面最近一层普通函数的this,即show4的this,因此打印person1。

1.9:调用person1中的show4函数,使用call修改返回函数的this指向,并再次调用返回函数,箭头函数的this不可改变,所以依旧打印person1。

1.10:调用person1中的show4函数,使用call修改show4的this指向,并再次调用返回函数,返回函数的this指向外面最近一层的普通函数,因此打印person2。

2.1:调用构造函数personA中的show1函数,为普通函数,因此打印personA。

2.2:修改调用构造函数personA中的show1的this指向,并调用,show1为普通函数,因此打印personB。

2.3:调用构造函数personA中的show2函数,为箭头函数,指向外层最近的普通函数的this,在第一题中,person1只是一个对象,所以指向windows,但是在第二题中,personA为构造函数,show2指向的就是personA,所以依旧打印personA。

2.4:改变构造函数personA中的show2函数this指向,并调用,但是show2为箭头函数,this不可修改,所以依旧打印personA。

2.5:调用构造函数personA中的show3函数,并再次调用返回函数,调用show3之后得到一个匿名函数,再次调用匿名函数this指向windows,所以打印window。

2.6:调用构造函数personA中的show3函数,改变返回函数的this,并调用返回函数,调用show3之后得到一个匿名函数,再次调用匿名函数this指向被修改为personB,所以打印personB。

2.7 :改变构造函数personA中的show3函数的this指向,并再次调用返回函数,返回函数的this指向和show3的指向无关,所以依旧打印window。

2.8:调用构造函数personA中的show4函数,并再次调用返回函数,show4为普通函数,this指向personA,返回函数为箭头函数,this指向外面最近一层普通函数的this,打印personA。

2.9:调用构造函数personA中的show4函数,改变返回函数的this,并再次调用返回函数,箭头函数的this不可修改,所以依旧打印personA。

2.10:修改show4的this指向,并调用,再调用返回函数,返回函数的this指向外面一层普通函数的this,因此打印personB。

http://www.lryc.cn/news/400435.html

相关文章:

  • 学习小记-Nacos的服务注册与发现原理
  • 视频号矩阵系统源码,实现AI自动生成文案和自动回复私信评论,支持多个短视频平台
  • [Spring] SpringBoot基本配置与快速上手
  • tomcat的优化、动静分离
  • Python与自动化脚本编写
  • 树与二叉树
  • SpringBoot+Vue实现简单的文件上传(Excel篇)
  • 科研绘图系列:R语言金字塔图(pyramid plot)
  • Tomcat多实例
  • 前端Vue组件化实践:自定义加载组件的探索与应用
  • 半小时获得一张ESG入门证书【详细中英文笔记一】
  • 类形断言和和类型推导的区别是什么?
  • Spring-Spring、IoC、DI、注解开发
  • Facebook的未来蓝图:从元宇宙到虚拟现实的跨越
  • Redis6.2.1版本集群新加副本
  • 2.The DispatcherServlet
  • bug定位策略
  • 基于R语言的水文、水环境模型优化技术及快速率定方法与多模型案例
  • 内存函数(C语言)
  • 力扣 哈希表刷题回顾
  • Qt 统计图编程
  • SQL中的谓词与谓词下推
  • 浅聊授权-spring security和oauth2
  • 时间复杂度计算
  • React 18 + Babel 7 + Webpack 5 开发环境搭建
  • MongoDB Shard 集群 Docker 部署
  • MacOS 开发 — Packages 程序 macOS新版本 演示选项卡无法显示
  • Hive的分区表分桶表
  • PostgreSQL17索引优化之支持并行创建BRIN索引
  • 在Vue中,子组件向父组件传递数据