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.mzph.cn/web/45392.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MFC之对话框--重绘元文件

文章目录 实现示例展示需要绘制的窗口/位置控件位置更新下一次示例粗细滑动部分更新 重绘元文件(窗口变化内容消失)方法一:使用元文件方法二:兼容设备方法三:使用自定义类存储绘图数据除画笔外功能处理画笔功能处理 保…

springmvc1

以前的servlet程序: springmvc 不同的处理器:不同的方法或者处理类 所有的请求都会经过dispathcherservlet的doservice方法: mvc原理: 前端控制器:jsp或者什么东西

Python字符串基础与高级操作

在Python中,字符串是不可变的数据类型,用于存储一系列的字符。它们可以被创建、访问、操作和格式化,但一旦创建,其内容就不能改变。下面是一篇关于Python字符串技术的详细讲解,包括创建、访问、更新、转义、运算符、格…

Phpstudy 2018 之xhcms搭建

1、由于直接访问根目录无法进入网站 2、所以采用搭建网站,第一使用系统服务模式、选择php-5.4.45Apache模式 3、网站域名为本地ip地址或者127.0.0.1、端口8085 4、在navicat创建名字为xjcms的数据库,并导入sql数据库文件 5、浏览器输入127.0.0.1:8085直接…

中风伤寒、感冒、六经辨证笔记

目录 基础传经的原因传经的过程及速度传经的危害感冒时体痛头痛的原因根据头痛的位置辨经 太阳病太阳中风外风内热 表虚感冒颗粒(桂枝葛根汤) 少阳病辨病总结伤寒论原文半表半里太阳为开,阳明为阖,少阳为枢胆的作用帮助肠胃消化、…

deepstream读取mp4文件及不同类型视频输入bug解决

在deepstream中使用mp4文件,与rtsp类似,使用uridecodebin即可,(可见官方test.py文件) def create_source_bin(index, uri):print("Creating source bin")# Create a source GstBin to abstract this bins c…

定投投什么?

定投可以选择的品种有银行理财和基金 银行理财目前有的品种有期限限制,不是那么公开的特点。如果说你想通过定投积累一笔低风险的,用于应急或者短期内要用的钱,可以选择定投现金类银行理财。 基金是最适合定投的产品, 基金分为…

【自然语言处理】面向新冠肺炎的社会计算应用

面向新冠肺炎的社会计算应用 1 任务目标 1.1 案例简介 新冠肺炎疫情牵动着我们每一个人的心,在这个案例中,我们将尝试用社会计算的方法对疫情相关的新闻和谣言进行分析,助力疫情信息研究。本次作业为开放性作业,我们提供了疫情…

C++ STL stable_sort用法

一&#xff1a;功能 对区间内元素进行排序&#xff0c;保证相等元素的顺序&#xff08;稳定排序&#xff09; 二&#xff1a;用法 #include <iostream>struct Record {std::string label;int rank; };int main() {std::vector<Record> data {{"q", 1},…

代码随想录第五十一天 | 300.最长递增子序列 , 674. 最长连续递增序列 , 718. 最长重复子数组

300.最长递增子序列 看完想法&#xff1a;在dp递推公式那里没有太看得懂。首先dp【i】的状态肯定是由前面的dp【0】到dp【i-1】推出的&#xff0c;但是dp【0】到dp【i-1】可以推出dp【i】有个前提就是(nums【i】 > nums【0到i-1任意一个】),例如nums【1】 2, nums【3】 5…

Tomcat下载安装配置教程(零基础超详细)

「作者简介」&#xff1a;冬奥会网络安全中国代表队&#xff0c;CSDN Top100&#xff0c;就职奇安信多年&#xff0c;以实战工作为基础著作 《网络安全自学教程》&#xff0c;适合基础薄弱的同学系统化的学习网络安全&#xff0c;用最短的时间掌握最核心的技术。 Tomcat 1、下载…

外包干了1个月,技术明显退步。。。

有一种打工人的羡慕&#xff0c;叫做“大厂”。 真是年少不知大厂香&#xff0c;错把青春插稻秧。 但是&#xff0c;在深圳有一群比大厂员工更庞大的群体&#xff0c;他们顶着大厂的“名”&#xff0c;做着大厂的工作&#xff0c;还可以享受大厂的伙食&#xff0c;却没有大厂…

【轻松拿捏 】Java-static关键字(面试)

Java-static关键字 1. 定义和基本概念 回答要点&#xff1a; 示例回答&#xff1a; 2. static 变量 回答要点&#xff1a; 示例回答&#xff1a; 代码示例&#xff1a; 3. static方法 回答要点&#xff1a; 示例回答&#xff1a; 代码示例&#xff1a; 4. static 代…

Modbus协议简介与Python实现

Modbus协议是工业自动化和控制系统中广泛使用的通信协议。自1979年由Modicon(现为施耐德电气的一部分)引入以来,它已经成为一种标准的通信协议,用于连接电子设备和传感器。Modbus协议基于主从架构,支持多种物理层和传输模式,如串行通信(RS-232/RS-485)和以太网。 1. Mo…

10个使用Numba CUDA进行编程的例子

以下是10个使用Numba CUDA进行编程的例子&#xff0c;这些例子涵盖了基本的向量加法、矩阵乘法以及其他一些常见操作&#xff1a; 向量加法 from numba import cuda import numpy as np cuda.jit def vector_add(a, b, c):i cuda.grid(1)if i < len(a):c[i] a[i] b[i] …

STM32智能交通监测系统教程

目录 引言环境准备智能交通监测系统基础代码实现&#xff1a;实现智能交通监测系统 4.1 数据采集模块 4.2 数据处理与控制模块 4.3 通信与网络系统实现 4.4 用户界面与数据可视化应用场景&#xff1a;交通监测与管理问题解决方案与优化收尾与总结 1. 引言 智能交通监测系统通…

Linux--线程池(包含日志的解释)

线程系列&#xff1a; Linux–线程的认识(一) Linux–线程的分离、线程库的地址关系的理解、线程的简单封装&#xff08;二&#xff09; 线程的互斥&#xff1a;临界资源只能在同一时间被一个线程使用 生产消费模型 信号量 线程池 线程池&#xff08;Thread Pool&#xff09;是…

Qt 统计图编程

学习目标&#xff1a;Qt 折线图&#xff0c;柱形图和扇形统计图编程 学习基础 Qt QChart 曲线图表操作-CSDN博客 学习内容 Qt中绘制三种常见的图表非常方便, 主要步骤如下: 1. 折线图: - 使用QLineSeries定义折线数据,添加多个坐标点 - 使用QValueAxis创建X轴和Y轴 - 将…

dockerfile配置和yml配置

dockerfile docker build 使用dockerfile自动构建镜像文件 FROM python:3.9WORKDIR /appCOPY requirements.txt. RUN pip install -r requirements.txtCOPY..CMD ["python", "main.py"]docker build dockerifle自动构建拉取python3.9镜像&#xff0c;并执…

拷贝文件的一些操作

利用fputc 、fgetc实现文件的拷贝 int main(int argc, const char *argv[]) {FILE* rfpfopen(argv[1],"r");FILE* wfpfopen(argv[2],"w");if(rfpNULL || wfpNULL){perror("fopen");return 1;}while(1){char resfgetc(rfp);if(feof(rfp)1){break;…