第十四章 this关键字介绍和使用

news2024/11/27 1:28:43

文章目录

  • 一、this是哪里
  • 二、常见的this指向
      • 2.1 默认绑定
      • 2.2 隐式绑定
      • 2.3 显示绑定
      • 2.4 构造函数绑定
  • 三、函数的方法
  • 四、练习:
  • 相关文章:

一、this是哪里

  • this在英文中的含义是【这】。那么【这】是【哪】?
  • this关键字一般存在于函数中,表示一个指针,指向了当前函数的执行对象。也叫当前函数的**【执行】上下文。**
  • 注意**【执行】**这两个字,如果函数没有执行,那么this是没有内容的,只有当函数执行时,this才被绑定了内容。
  • 总结一句话:谁【执行】了**this**所在的函数,**this**就是谁。
    image.png

二、常见的this指向

2.1 默认绑定

  • 当一个没有明确隶属对象的函数,被直接调用时。该函数内部的this指向window。
function fn(){
  console.log(this.a);
}
var a = 10;
fn();    //10
// 这里的this指全局对象window
  • 当然要注意,在ES5的严格模式下,没有明确隶属对象的函数在默认执行时,其内部的this指向undefined

2.2 隐式绑定

  • 所谓隐式绑定,就是将没有明确隶属对象的函数,归属到某个对象,通过该对象执行函数。
    此时函数内部的this指向该对象。
function fn(){
    console.log(this.a);
}

var obj = {
    a:10,
    fn:fn
}
obj.fn();    // 10
// 这里的this指obj
  • 隐式绑定会遇到隐式丢失的情况:
    1. 当对象的方法被变量引用时,如果该变量没有从属对象,通过该变量执行函数,那么this会丢失,捕获到window。
    2. 当对象的方法,作为回调函数,传入另一个函数内执行时,this会丢失,捕获到window。
function fn(){
    console.log(this.a);
}
var a = 20;

var obj = {
    a:10,
    fn:fn
}
obj.fn();    // 10

// 隐式丢失:虽然 f 是 obj.fn 的引用,但是 f 的执行,并没有归属对象
var f = obj.fn;
f();    // 20
setTimeout(obj.fn, 100);    // 20
  • 隐式丢失是可以被修复的,这就要使用下一种绑定方式:显示绑定

2.3 显示绑定

  • 所谓显示绑定,就是使用函数的方法,如:callapplybind等,可以强制改变this的指向。
  • call方法举例:
function fn(){
    console.log(this.a);
}
var a = 20;

var obj = {
    a:10
};

fn.call(obj);    // 10
// 这里的this指obj
  • 可以利用显示绑定的方式,修复隐式丢失问题:
function fn(){
    console.log(this.a);
}
var a = 20;

var obj = {
    a:10
};

// 隐式丢失被解决
fn.call(obj);    // 10

setTimeout(fn.bind(obj), 100);    // 10
  • 注意:通过修复隐式绑定,我们发现,显示绑定 的优先级要高于 隐式绑定。

2.4 构造函数绑定

  • 构造函数绑定,又叫new绑定,主要用于面向对象编程。
  • 这里还需要掌握new关键字的原理:
    1. 创建一个新对象
    2. 将函数中的this指向这个新对象
    3. 将这个新对象的__proto__指向函数的prototype
    4. 检查函数中是否主动返回对象,如果没有,则返回前三步处理好的对象
function fn(){
    this.a = 10;
}

var f = new fn();

console.log(f.a);    // 10
// 这里的this指创建出来的对象f
  • 其实,只需要记住,凡是被new执行的函数,默认情况下,其内部的this都被new强行指向new出来的对象,也叫实例。

三、函数的方法

  1. 语法:fn.方法名()
  2. 方法名:callapplybind
  3. 区别
    • 共同点:使用第一个参数,修改this的指向
    • call:可以支持从第二个参数向后,无数个参数,都会传入原函数作为参数
      • 返回值以原函数的返回值为主
    • apply:只支持两个参数,且第二个参数必须为数组,数组会自动解析,将解析出的数据,都会传入原函数作为参数
      • 返回值以原函数的返回值为主
    • bind:可以支持从第二个参数向后,无数个参数,都会传入原函数作为参数。
      • 返回值是一个改变了this指向的新函数

四、练习:

  1. 事件委托封装
  2. 下拉菜单
  3. 点击添加表格信息
  4. 自定义事件

相关文章:

call和apply的使用-基础篇
call和apply的使用-扩展篇
彻底搞懂javascript中的this的指向

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

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

相关文章

vue3 img图片怎么渲染

在 Vue3 中加载图片&#xff08;img&#xff09;src地址时&#xff0c;出现无法加载问题。网上很多都建议使用 require 加载相对路径&#xff0c;如下&#xff1a; <img :src"require(../assets/img/icon.jpg)"/>但是按照这种方式加载又会报错如下&#xff1a;…

简单易懂的PyTorch线性层解析:神经网络的构建基石

目录 torch.nn子模块Linear Layers详解 nn.Identity Identity 类描述 Identity 类的功能和作用 Identity 类的参数 形状 示例代码 nn.Linear Linear 类描述 Linear 类的功能和作用 Linear 类的参数 形状 变量 示例代码 nn.Bilinear Bilinear 类的功能和作用 B…

Open CV 图像处理基础:(一)Open CV 在windows环境初始化和 Java 动态库加载方式介绍

Open CV 在windows环境初始化和 Java 动态库加载方式介绍 Open CV是一个开源的计算机视觉和机器学习软件库&#xff0c;它提供了一系列的工具和程序库&#xff0c;让用户能够进行复杂的图像处理和计算机视觉任务。在Java中使用OpenCV涉及到环境初始化和动态库加载。以下是一些…

什么是消费增值?如何做到增值?

在当今的商业世界&#xff0c;消费观念正在经历一场深刻的变革。传统的消费模式中&#xff0c;消费者购买商品后&#xff0c;交易即结束&#xff0c;消费者与商品的关系仅停留在使用层面。然而&#xff0c;随着消费增值模式的出现&#xff0c;这一观念正在被颠覆。这一模式将消…

蓝牙网关在物联网领域三大应用

蓝牙网关在物联网的应用主要包括物联网室内定位、物联网数据采集、物联网连接控制三大应用领域&#xff0c;以下对三大应用领域做详细解释。 一、物联网蓝牙室内定位 蓝牙网关在室内定位的应用包括人员定位和资产设备定位两大方向。 1、人员定位 蓝牙网关安装于室内的特定地…

Fragstats景观格局指数计算入门教程

土地利用以及景观格局是当前全球环境变化研究的重要组成部分及核心内容&#xff0c;其对区域的可持续发展以及区域土地管理有非常重要的意义。通过对土地利用时空变化规律进行分析可以更好的了解土地利用变化的过程和机制&#xff0c;并且通过调整人类社会经济活动&#xff0c;…

【AI视野·今日NLP 自然语言处理论文速览 第七十一期】Fri, 5 Jan 2024

AI视野今日CS.NLP 自然语言处理论文速览 Fri, 5 Jan 2024 Totally 28 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers LLaMA Pro: Progressive LLaMA with Block Expansion Authors Chengyue Wu, Yukang Gan, Yixiao Ge, Zeyu Lu, …

安科瑞智慧型动态无功补偿的工业应用——安科瑞赵嘉敏

摘要&#xff1a;低压配电系统的无功补偿是电能质量治理的重要环节。在传统无功补偿中&#xff0c;响应速度较慢&#xff0c;补偿电流呈阶梯式&#xff0c;存在过补或欠补的现象&#xff0c;有时未必能到达理想的效果。为了解决这一问题&#xff0c;人们提出了一种无功补偿综合…

明基、书客、松下护眼台灯怎么样?三款热门台灯真实测评

近年来学生近视的现象越来越严重了&#xff0c;而且近视的年龄也越来越小了&#xff0c;不少还没开始上小学的孩子&#xff0c;就已经戴上了厚厚的近视眼镜。而那些高年级的学生更是近视的重灾区&#xff0c;不仅需要高强度的学习和长时间用眼&#xff0c;而且每晚都需要学习到…

cuttag和chip-seq的区别?

Cut&Tag&#xff08;Cleavage Under Targets and Tagmentation&#xff09;和ChIP-Seq&#xff08;Chromatin Immunoprecipitation Sequencing&#xff09;都是用于研究蛋白质与DNA相互作用的生物技术。它们在技术原理和应用方面有一些关键的区别。 1.ChIP-Seq测序 1.1 …

Linux 部署 AI 换脸

我使用的系统是 Ubuntu 20.04 文章实操主要分为以下几个部分 1、python 环境安装 2、下载 FaceFusion 上传服务器 3、创建 python 虚拟环境 4、下载 FaceFusion 依赖&#xff08;这里的命令执行时间会很长&#xff0c;够你睡午觉了&#xff09; 5、运行 FaceFusion 6、开…

基于SSM的基金投资交易管理网站的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

Java学习笔记(五)——时间相关类

文章目录 JDK7以前时间相关类Date 时间类阅读源码练习 SimpleDateFormat 格式化时间作用构造方法常用方法日期和时间模式练习 Calendar 日历获取Calendar对象的方法Calendar常用方法 JDK8新增时间相关类变化Date类ZoneId&#xff1a;时区Instant&#xff1a;时间戳ZoneDateTime…

ECharts 实现省份在对应地图的中心位置

使用 ECharts 下载的中国省市区的json文件不是居中的(如下图所示)&#xff0c;此时需要修改json文件中的 cp 地理位置&#xff0c;设置成每个省份的中心位置 {"type": "FeatureCollection","features":[{ "type": "Feature"…

C++ 手写堆 || 堆模版题:堆排序

输入一个长度为 n 的整数数列&#xff0c;从小到大输出前 m 小的数。 输入格式 第一行包含整数 n 和 m 。 第二行包含 n 个整数&#xff0c;表示整数数列。 输出格式 共一行&#xff0c;包含 m 个整数&#xff0c;表示整数数列中前 m 小的数。 数据范围 1≤m≤n≤105 &…

护眼灯色温多少合适?盘点合适色温的护眼台灯

有了孩子&#xff0c;就等于同时有了软肋和铠甲&#xff0c;也总是在自己的能力范围内&#xff0c;把最好的东西给他。当孩子开始学习知识后更是如此&#xff0c;能力范围内最好的教育资源、最好的学习环境&#xff0c;以及各种与之配套的学习用具。护眼台灯在这时候就安排上了…

热钱涌向线控底盘!XYZ全栈集成引领新风向

在车身、底盘部分&#xff0c;中央计算区域控制带动传统车控、底盘及动力控制ECU市场迎来新一轮技术升级和域融合窗口期。线控制动、转向及空气悬架&#xff0c;正在加速与智能驾驶融合并进一步提升驾乘体验。 12月13-15日&#xff0c;2023&#xff08;第七届&#xff09;高工…

插画新手必看!13个免费UI插画素材网站,轻松打造炫酷设计!

即时设计 作为一个专业的设计网站&#xff0c;即时设计在很多情况下也可以作为一个高质量的插图网站使用。它可以为用户提供近5万个设计材料和模板&#xff0c;其中插图占据了很大的空间&#xff0c;可以为用户的设计提供很多帮助。在搜索插图材料的同时&#xff0c;还可以获取…

强化学习7——价值迭代算法在强化学习中的应用

价值迭代算法 价值迭代算法相对于策略迭代更加直接&#xff0c;它直接根据以下公式来迭代更新。 V ∗ ( s ) max ⁡ a ∈ A { r ( s , a ) γ ∑ s ′ ∈ S P ( s ′ ∣ s , a ) V ∗ ( s ′ ) } V^*(s)\max_{a\in\mathcal{A}}\{r(s,a)\gamma\sum_{s\in\mathcal{S}}P(s|s,…

二叉树的深度和高度问题(算法村第八关白银挑战)

二叉树的最大深度 104. 二叉树的最大深度 - 力扣&#xff08;LeetCode&#xff09; 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null…