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

this指向

(1)在全局环境中的this——window
无论是否在严格模式下,在全局执行环境中(在任何函数体外部)this 都指向全局对象。

      "use strict"console.log(this); //windowconsole.log(this===window);//true

(2)在函数中的this——window
在函数内部,this的值取决于函数被调用的方式。   

     function f() {console.log(this); //windowconsole.log(this===window);//true}f()console.log(f()===window.f()); //true

因为定义的函数在全局作用域下定义的 

(3)函数在严格模式下——undefined

 function f() {"use strict"console.log(this); //undefinedconsole.log(this === window); //false}f()

上面的f是直接调用的指向undefined 

      function f() {"use strict"console.log(this); //windowconsole.log(this === window); //true}window.f()

有一些浏览器最初在支持严格模式时没有正确实现这个功能,于是它们错误地返回了window对象。

 (4)对象中的this——指向调用者

    let obj = {fn: function () {console.log(this);}}obj.fn() //指向obj这个对象


(5)栗子①

    function fun() {console.log(this.name);}let obj = {name: '思思',fn: fun}var name = "七七"obj.fn()  //思思fun()    //七七

obj.fn() 是obj 调用的所以去找obj里面的name 

fun是window调用的所以去找全局里面的this.name

(6)栗子②

    var obj1 = {name: '七七',f: function () {console.log('姓名:' + this.name);}}var obj2 = {name: '思思'}obj2.f = obj1.fobj1.f() //姓名:七七obj2.f() //姓名:思思

把obj1.赋值给obj2.f  obj2也有了f 方法 

(7)栗子③

      function foo() {console.log(this.a);}var obj2 = {a:2,fn:foo}var obj1={a:1,o1:obj2}obj1.o1.fn() //2

 obj1里面的o1是obj2  obj2里的fn是foo函数   在obj2里面调用的拿到obj2中的a

(8)事件绑定中的this 

 <button onclick="Hclick()">点击事件</button>
<script>function Hclick() {console.log(this);}
</script>

 由于还是在当前window环境下运行的还是指向window

  <button onclick="console.log(this)">点击事件</button>

运行在节点对象中 指向当前dom

(9)动态绑定

<button>动态绑定</button>
<script>let btn=  document.getElementsByTagName('button')[0].onclick=function(){console.log(this);    }
</script>

指向当前dom

(10)addEventlistenr——当前dom

     let btn = document.getElementsByTagName('button')[0].addEventListener('click',function () { console.log(this); })

指向当前dom <button>动态绑定</button>   

    let btn = document.getElementsByTagName('button')[0].addEventListener('click',()=>{console.log(this);})

换成箭头函数后 this指向当前作用域下的上级作用域的this    window 

(11)构造函数中的this——当前实例化对象

   function Pro() { this.x='1'this.y=function(){ console.log(this);}}var p = new Pro()p.y()

通过构造函数创建了一个新的实例对象  所以当前的this指向新的实例对象

(12)定时器中的this——window  

   setInterval(function () {console.log(this)  },1000)

this指向当前window

小扩展

       var MyClass = function () {this.name = 1;}var myClass = new MyClass();console.log('myClass:', myClass);

当有了返回值以后

        var MyClass = function () {this.name = 1;return {name: 2}}var myClass = new MyClass();console.log('myClass:', myClass);

会把return的内容放在构造函数中 
 

相关文章:

this指向

&#xff08;1&#xff09;在全局环境中的this——window 无论是否在严格模式下&#xff0c;在全局执行环境中&#xff08;在任何函数体外部&#xff09;this 都指向全局对象。 "use strict"console.log(this); //windowconsole.log(thiswindow);//true &#xff08…...

安卓小游戏:小板弹球

安卓小游戏&#xff1a;小板弹球 前言 这个是通过自定义View实现小游戏的第三篇&#xff0c;是小时候玩的那种五块钱的游戏机上的&#xff0c;和俄罗斯方块很像&#xff0c;小时候觉得很有意思&#xff0c;就模仿了一下。 需求 这里的逻辑就是板能把球弹起来&#xff0c;球…...

7、单行函数

文章目录1 函数的理解1.1 什么是函数1.2 不同DBMS函数的差异1.3 MySQL的内置函数及分类2 数值函数2.1 基本函数2.2 角度与弧度互换函数2.3 三角函数2.4 指数与对数2.5 进制间的转换3 字符串函数4 日期和时间函数4.1 获取日期、时间4.2 日期与时间戳的转换4.3 获取月份、星期、星…...

华为机试题:HJ56 完全数计算(python)

文章目录博主精品专栏导航知识点详解1、input()&#xff1a;获取控制台&#xff08;任意形式&#xff09;的输入。输出均为字符串类型。1.1、input() 与 list(input()) 的区别、及其相互转换方法2、print() &#xff1a;打印输出。3、整型int() &#xff1a;将指定进制&#xf…...

opencv——傅里叶变换、低通与高通滤波及直方图等操作

1、傅里叶变换a、傅里叶变换原理时域分析&#xff1a;以时间为参照进行分析。频域分析&#xff1a;相当于上帝视角一样&#xff0c;看事物层次更高&#xff0c;时域的运动在频域来看就是静止的。eg&#xff1a;投球——时域分析&#xff1a;第1分钟投了3分&#xff0c;第2分钟投…...

【NGINX入门指北】 进阶篇

nginx 进阶篇 文章目录nginx 进阶篇一、Nginx Proxy 服务器1、代理原理2、proxy代理3、proxy缓存一、Nginx Proxy 服务器 1、代理原理 正向代理 内网客户机通过代理访问互联网&#xff0c;通常要设置代理服务器地址和端口。 反向代理 外网用户通过代理访问内网服务器&…...

Python中关于@修饰符、yeild关键词、next()函数的基本功能简述

关于修饰符&#xff1a;其实就是将修饰符下面的函数当成参数传给它上面的函数。 def a(x):print(a)adef b():print(b) 其效果等价为&#xff1a; def a(x):print(a)def b():print(b)a(b())有个记忆诀窍&#xff0c;的下面哪个函数最近&#xff0c;谁就是儿子&#xff0c;谁就…...

结合Coverity扫描Spring Boot项目进行Path Manipulation漏洞修复

本篇介绍使用Coverity 扫描基于Spring Boot 项目中的Path Manipulation 漏洞, 进而解决风险,并且可以通过扫描。 什么样的代码会被扫描有路径操纵风险? 在Spring Boot 项目中, 实验了如下的场景: 1. Control 中 file path 作为参数传递的会被扫描,单纯服务方法不会 场…...

【FFMPEG源码分析】从ffplay源码摸清ffmpeg框架(一)

ffplay入口 ffmpeg\fftools\ffplay.c int main(int argc, char **argv) {/*******************start 动态库加载/网络初始化等**************/int flags;VideoState *is;init_dynload();av_log_set_flags(AV_LOG_SKIP_REPEATED);parse_loglevel(argc, argv, options);/* regis…...

C++蓝桥杯 基础练习,高精度加法,输入两个整数a和b,输出这两个整数的和。a和b都不超过100位。

C蓝桥杯 基础练习&#xff0c;高精度加法 问题描述 输入两个整数a和b&#xff0c;输出这两个整数的和。a和b都不超过100位。 算法描述 由于a和b都比较大&#xff0c;所以不能直接使用语言中的标准数据类型来存储。对于这种问题&#xff0c;一般使用数组来处理。   定义一…...

MySQL面试题:SQL语句的基本语法

MySQL目录一、数据库入门1. 数据管理技术的三个阶段2. 关系型数据库与非关系型数据库3. 四大非关系型数据库a. 基于列的数据库&#xff08;column-oriented&#xff09;b. 键值对存储&#xff08;Key-Value Stores&#xff09;c. 文档存储&#xff08;Document Stores&#xff…...

Fluid-数据编排能力原理解析

前言本文对Fluid基础功能-数据编排能力进行原理解析。其中涉及到Fluid架构和k8s csi driver相关知识。建议先了解相关概念&#xff0c;为了便于理解&#xff0c;本文使用JuiceFS作为后端runtime引擎。原理概述Fuild数据编排能力&#xff0c;主要是在云原生环境中&#xff0c;能…...

并发线程、锁、ThreadLocal

并发编程并发编程Java内存模型&#xff08;JMM&#xff09;并发编程核心问题—可见性、原子性、有序性volatile关键字原子性原子类CAS(Compare-And-Swap 比较并交换)ABA问题Java中的锁乐观锁和悲观锁可重入锁读写锁分段锁自旋锁共享锁/独占锁公平锁/非公平锁偏向锁/轻量级锁/重…...

CMMI-结项管理

结项管理&#xff08;ProjectClosing Management, PCM&#xff09;是指在项目开发工作结束后&#xff0c;对项目的有形资产和无形资产进行清算&#xff1b;对项目进行综合评估&#xff1b;总结经验教训等。结项管理过程域是SPP模型的重要组成部分。本规范阐述了结项管理的规程&…...

网络通信协议是什么?

网络通信基本模式 常见的通信模式有如下2种形式&#xff1a;Client-Server(CS) 、 Browser/Server(BS) 实现网络编程关键的三要素 IP地址&#xff1a;设备在网络中的地址&#xff0c;是唯一的标识。 端口&#xff1a;应用程序在设备中唯一的标识。 协议: 数据在网络中传输的…...

阶段5:Java分布式与微服务实战

目录 第33-34周 Spring Cloud电商实战 一、Eureka-server模块开发 1、引入依赖 2、配置文件 3、启动注解 一、Eureka-server模块开发 第33-34周 Spring Cloud电商实战 一、Eureka-server模块开发 1、引入依赖 父项目依赖&#xff1a;cloud-mall-practice springboot的…...

我的创作纪念日

目录 机缘 收获 日常 憧憬 机缘 其实本来从大一上学期后半段(2017)就开始谢谢零星的博客&#xff0c;只不过当时是自己用hexo搭建了一个小网站&#xff0c;还整了个域名&#xff1a;jiayoudangdang.top&#xff0c;虽然这个早就过期&#xff1b; 后来发现了CSDN&#xff…...

Qml学习——动态加载控件

最近在学习Qml&#xff0c;但对Qml的各种用法都不太熟悉&#xff0c;总是会搞忘&#xff0c;所以写几篇文章对学习过程中的遇到的东西做一个记录。 学习参考视频&#xff1a;https://www.bilibili.com/video/BV1Ay4y1W7xd?p1&vd_source0b527ff208c63f0b1150450fd7023fd8 目…...

设计模式之职责链模式

什么是职责链模式 职责链模式是避免请求发送者与接受者耦合在一起&#xff0c;让多个对象都可以接受到请求&#xff0c;从而将这些对象连接成一条链&#xff0c;并且沿着这条链传递请求&#xff0c;直到有对象处理为止。     职责链模式包含以下几个角色&#xff1a;    …...

MySQL入门篇-MySQL 8.0 延迟复制

备注:测试数据库版本为MySQL 8.0 这个blog我们来聊聊MySQL 延迟复制 概述 MySQL的复制一般都很快&#xff0c;虽然有时候因为 网络原因、大事务等原因造成延迟&#xff0c;但是这个无法人为控制。 生产中可能会存在主库误操作&#xff0c;导致数据被删除了&#xff0c;Oracl…...

KubeSphere 容器平台高可用:环境搭建与可视化操作指南

Linux_k8s篇 欢迎来到Linux的世界&#xff0c;看笔记好好学多敲多打&#xff0c;每个人都是大神&#xff01; 题目&#xff1a;KubeSphere 容器平台高可用&#xff1a;环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

Chromium 136 编译指南 Windows篇:depot_tools 配置与源码获取(二)

引言 工欲善其事&#xff0c;必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后&#xff0c;我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集&#xff0c;就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...

uniapp 实现腾讯云IM群文件上传下载功能

UniApp 集成腾讯云IM实现群文件上传下载功能全攻略 一、功能背景与技术选型 在团队协作场景中&#xff0c;群文件共享是核心需求之一。本文将介绍如何基于腾讯云IMCOS&#xff0c;在uniapp中实现&#xff1a; 群内文件上传/下载文件元数据管理下载进度追踪跨平台文件预览 二…...

密码学基础——SM4算法

博客主页&#xff1a;christine-rr-CSDN博客 ​​​​专栏主页&#xff1a;密码学 &#x1f4cc; 【今日更新】&#x1f4cc; 对称密码算法——SM4 目录 一、国密SM系列算法概述 二、SM4算法 2.1算法背景 2.2算法特点 2.3 基本部件 2.3.1 S盒 2.3.2 非线性变换 ​编辑…...