this是什么?为什么要改变this?怎么改变 this 指向?

目录

this 是什么?

箭头函数中的 this

为什么要改变 this 指向?

改变 this 指向的三种方法

call(无数个参数)

apply(两个参数)

bind(无数个参数)


this 是什么?

  1. 在对象方法中,this 指的是所有者对象(方法的拥有者)。
    var person = {firstName: "Jasmine",lastName: "Ge",id: 10108888,fullName: function(){return this.firstName + " " + this.lastName;}
    };
    console.log(person.fullName())  // Jasmine Ge
  2. 单独的情况下,this 指的是全局对象。
    // 在浏览器窗口中
    this
    // Window {window: Window, self: Window, document: document, name: '', location: Location, …}
  3. 在函数中,this 指的是全局对象。
    (function myFunction(){return this;
    })()
    // Window {window: Window, self: Window, document: document, name: '', location: Location, …}
  4. 在函数中,严格模式下,this 指的是 undefined。
    // js 严格模式不允许默认绑定,因此,在函数中使用时,在严格模式下,this 是未定义的undefined
    "use strict";
    (function myFunction(){return this;
    })()
    //undefined
  5. 在事件中,this 指的是接收事件的元素。
    <button onclick = "this.style.backgroundColor='skyblue'; console.log(this)">点击来帮我改变颜色!
    </button>

箭头函数中的 this

箭头函数中的 this 等同于上一层非箭头的函数的 this 值或全局对象(window 或 undefined)

解释: 在箭头函数中,this 的指向是由外层(函数或者全局)作用域来决定,如果往外层作用域查找 this 的指向,只要没有非箭头函数(普通函数)的包裹,就一直往外层查找,直到最外层的全局作用域。如果没有非箭头函数(普通函数)的包裹,即使包裹再多层对象 this 也是指向全局作用域的。

let name = 'obj'
let obj1 = {name: 'obj1',obj2: {name: 'obj2',obj3: {name: 'obj3',obj4: {name: 'obj4',fn: () => {console.log(this) // node环境中输出 {},浏览器中输出 window}}}}
}obj1.obj2.obj3.obj4.fn()
// Window {0: Window, 1: Window, window: Window, self: Window, document: document, name: 'obj', location: Location, …}

为什么要改变 this 指向?

项目中有如下类似例子,find 函数中的 this 指向调用它的 obj 对象;而在定时器 setTimeout 中调用 find(),this 是指向 window 对象的。但我们需要 find 函数中 的 this 指向 obj 对象,因此我们需要修改 this 的指向。

var position = "这是 windows 的 position";
let obj = {position: "这是 obj 的 position",find: function() {console.log(this.position)}
};
obj.find(); // 这是 obj 的 position,this指向obj对象
setTimeout(obj.find, 0); // 这是 windows 的 position,由于 setTimeout() 是异步操作,this 指向 window 对象

改变 this 指向的三种方法

共同点:第一个参数都为改变 this 的指针。若第一参数为 null / undefined,this 默认指向 window

call(无数个参数)
  • 没有参数的时候,指向window
  • 有一个参数的时候,指向当前参数
  • 有多个参数,this指向第一个参数,剩下的参数是参数列表
function fn(a, b, c){console.log(this, a + b + c); // this指向window
}
fn();
// Window {0: Window, 1: Window, 2: Window, 3: Window, window: Window, self: Window, document: document, name: '', location: Location, …} NaN
fn.call(document, 1, 2, 3); // call 之后 this 指向 document  
//输出 #document 6   1,2,3是实参 结果相加为6
apply(两个参数)
  • 没有参数的时候,指向window
  • 有一个参数的时候,指向当前参数
  • 有多个参数,this指向第一个参数,剩下的参数是数组
function fn(a, b, c){console.log(this, a+b+c); 
}
fn();
// Window {0: Window, 1: Window, 2: Window, 3: Window, window: Window, self: Window, document: document, name: '', location: Location, …} NaN
fn.apply(document, [1, 2, 3]); // apply之后 this 指向 document  
// #document 6
bind(无数个参数)
  • 没有参数的时候,指向 window
  • 有一个参数的时候,指向当前参数
  • 返回值为一个新的函数
  • 使用的时候需要手动调用下返回 的新函数(不会自动执行)
function fn(a, b, c){console.log(this, a+b+c);
}
fn()
// Window {0: Window, 1: Window, 2: Window, 3: Window, window: Window, self: Window, document: document, name: '', location: Location, …} NaN
let ff = fn.bind('小明', 1, 2, 3); 
// 手动调用一下
ff()
// String {'小明'} 6

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/749235.shtml

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

相关文章

提升口才表达能力的重要性与途径

提升口才表达能力的重要性与途径 口才表达能力&#xff0c;即一个人通过口头语言准确、流畅、生动地传达思想、情感和观点的能力&#xff0c;是现代社会中不可或缺的一项基本技能。无论是在职场沟通、人际交往还是公共场合发言&#xff0c;优秀的口才表达能力都能为我们带来诸…

力扣hot100:416.分割等和子集(组合/动态规划/STL问题)

组合数问题 我们思考一下&#xff0c;如果要把数组分割成两个子集&#xff0c;并且两个子集的元素和相等&#xff0c;是否等价于在数组中寻找若干个数使之和等于所有数的一半&#xff1f;是的&#xff01; 因此我们可以想到&#xff0c;两种方式&#xff1a; ①回溯的方式找到t…

vanna:基于RAG的text2sql框架

文章目录 vanna简介及使用vanna的原理vanna的源码理解总结参考资料 vanna简介及使用 vanna是一个开源的利用了RAG的SQL生成python框架&#xff0c;在2024年3月已经有了5.8k的star数。 Vanna is an MIT-licensed open-source Python RAG (Retrieval-Augmented Generation) fram…

探讨大世界游戏的制作流程及技术——大场景制作技术概况篇

接上文&#xff0c;我们接下来了解一下大世界场景制作技术有哪些&#xff0c;本篇旨在给大家过一遍目前业界的做法&#xff0c;能让大家有一个宏观的知识蓝图。实际上&#xff0c;针对不同的游戏类型和美术风格&#xff0c;制作技术在细节上有着非常大的不同&#xff0c;业界目…

逗号运算符

在C语言中&#xff0c;逗号运算符,用于分隔表达式&#xff0c;并按顺序计算每个表达式&#xff0c;最终返回最后一个表达式的值。逗号运算符的语法如下&#xff1a; expression1, expression2它的行为是先计算expression1&#xff0c;然后计算expression2&#xff0c;最后返回e…

Meson编译工具安装及使用Meson编译DPDK

一、Meson编译工具安装 1&#xff09;安装python3的环境 yum install -y python3 python3 -m ensurepip --upgrade 2&#xff09;安装meson pip3 install --user meson --default-timeout10000 export PATH$PATH:$HOME/.local/bin使得环境变量一直有效&#xff0c;可编辑 /etc/…

HarmonyOS NEXT应用开发—自定义视图实现Tab效果

介绍 本示例介绍使用Text、List等组件&#xff0c;添加点击事件onclick,动画&#xff0c;animationTo实现自定义Tab效果。 效果预览图 使用说明 点击页签进行切换&#xff0c;选中态页签字体放大加粗&#xff0c;颜色由灰变黑&#xff0c;起到强调作用&#xff0c;同时&…

手撕算法-队列实现栈And栈实现队列

手撕算法-队列实现栈And栈实现队列 两个栈实现队列两个队列实现栈包含min函数的栈 两个栈实现队列 分析&#xff1a;转换数据方向&#xff0c;第一个栈写&#xff0c;第二个栈读。 代码&#xff1a; import java.util.*; import java.util.Stack;public class Solution {Sta…

2789. 合并后数组中的最大元素

2789. 合并后数组中的最大元素 题目链接&#xff1a;2789. 合并后数组中的最大元素 代码如下&#xff1a; //贪心&#xff0b;倒叙数组 //参考leetcode官方题解 class Solution { public:long long maxArrayValue(vector<int>& nums) {long long sumnums[nums.size…

PyCharm中如何使用不同的虚拟环境

1. 简介 有些项目用老的运行环境&#xff0c;而有些项目用新的运行环境&#xff0c;那么我们在运行这些代码&#xff08;比如跑对比实验的时候&#xff09;如何进行切换呢&#xff0c;这时候就可以使用虚拟环境啦 2. 虚拟环境的创建 首先启动Anaconda Prompt 并在其中执行如…

ubuntu 开发软件安装

jdk tar -zxvf jdk-8u311-linux-x64.tar.gz jdk1.8.0_311/-- /etc/profile export JAVA_HOME=/opt/java/jdk1.8.0_311 export JRE_HOME=${JAVA_HOME}/jre export CLASSPATH=.:${JAVA_HOME}/lib:${JRE_HOME}/lib export PATH

调皮的String及多种玩法(下部)

&#x1f468;‍&#x1f4bb;作者简介&#xff1a;&#x1f468;&#x1f3fb;‍&#x1f393;告别&#xff0c;今天 &#x1f4d4;高质量专栏 &#xff1a;☕java趣味之旅 欢迎&#x1f64f;点赞&#x1f5e3;️评论&#x1f4e5;收藏&#x1f493;关注 &#x1f496;衷心的希…

LeetCode 面试经典150题 26.删除有序数组中的重复项

题目&#xff1a; 给你一个 非严格递增排列 的数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 nums 中唯一元素的个数。 考虑 nums 的唯一元素的数量…

C# SM2加解密 ——国密SM2算法

SM2 是国家密码管理局组织制定并提出的椭圆曲线密码算法标准。 本文使用第三方密码库 BouncyCastle 实现 SM2 加解密&#xff0c;使用 NuGet 安装即可&#xff0c;包名&#xff1a;Portable.BouncyCastle&#xff0c;目前最新版本为&#xff1a;1.9.0。 using Org.BouncyCastl…

相机sd卡照片删除后数据恢复,相机sd卡中的照片被删除后如何恢复数据

当我们使用相机拍摄照片时&#xff0c;有时会不小心删除了一些重要的照片。这可能是因为误操作、SD卡故障或者其他原因。无论是珍贵的照片、还是重要的工作文件&#xff0c;被删除后&#xff0c;我们往往会感到焦虑和失望。相机sd卡中的照片被删除后如何恢复数据&#xff1f;幸…

Java项目:54 springboot工资信息管理系统453

作者主页&#xff1a;源码空间codegym 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文中获取源码 项目介绍 本系统的使用角色可以被分为用户和管理员&#xff0c; 用户具有注册、查看信息、留言信息等功能&#xff0c; 管理员具有修改用户信息&#…

洛谷P1097 [NOIP2007 提高组] 统计数字

#先看题目 题目描述 某次科研调查时得到了 n 个自然数&#xff0c;每个数均不超过 1.5109。已知不相同的数不超过 个&#xff0c;现在需要统计这些自然数各自出现的次数&#xff0c;并按照自然数从小到大的顺序输出统计结果。 输入格式 共 n1 行。 第一行是整数 n&#x…

24年三月周末总结

工作 我在工作上有一个毛病&#xff0c;就是不能很好的控制精力和情绪&#xff0c;我需要学习精力管理和情绪管理。 目前工作不会有什么起色&#xff0c;计划今年7月份&#xff08;全栈工程师&#xff09;转移到成都。 精力管理 可以在B站查阅这个视频进行学习精力管理 学习…

函数返回二维数组

在C语言中&#xff0c;函数不能直接返回二维数组&#xff0c;因为数组名作为函数参数或返回值时&#xff0c;会退化为指向数组首元素的指针。此外&#xff0c;C语言不支持返回局部数组的引用&#xff0c;因为局部数组在函数返回后其内存会被释放。 1. 使用动态内存分配&#…

Kafka-SSL笔记整理

创建密钥仓库以及CA 创建密匙仓库,用户存储证书文件keytool -keystore server.keystore.jks -alias hello_kafka -validity 100000 -genkey创建CAopenssl req -new -x509 -keyout ca-key -out ca-cert -days 100000将生成的CA添加到客户端信任库keytool -keystore client.trus…