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.pswp.cn/web/45392.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/45392.shtml
英文地址,請注明出處:http://en.pswp.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;…