首页 > 其他分享 >谈谈JS中的this

谈谈JS中的this

时间:2023-03-09 12:13:27浏览次数:37  
标签:调用 obj 函数 指向 window JS 谈谈 fn

一、在js非严格模式、非箭头函数下,不看函数在哪里定义,不看是怎么定义,只看函数的调用方式

即想知道this指向,就要看this哪个函数,这个函数是怎么调用的

 

  1. 普通调用

调用方式:函数名()

他们的调用者都是 window, this指向是window,this指向了函数调用者

 

 

这个在在控制台打印 window,func这个函数是window调用的,this指向window, 

 

 

这个在在控制台打印 window而,首先执行fn1,fn1是window调用的,在fn1中有执行了fn2,fn2这个函数也是window调用,this指向window

 

 

 

这个在在控制台打印 window而,fn是由obj调用,fun是由window调用, this是在fun中打印,而this指向window

 

 

  1. 对象调用

调用方式:

对象.函数名()

函数调用者是 对象 this指向 对象 this指向了函数调用者

 

 

 

这个在在控制台打印 window而,fn是由obj调用,this指向obj

 

 

this是在fu函数内的obj对象的fn执行,对象obj的内的fn是由obj这个对象调用,控制台打印结果是obj,this指向了obj

 

 

  1. 事件处理函数

调用方式

事件源.on事件类型 = 事件处理函数 或者 事件源.addEventListener(事件类型, 事件处理函数)

事件源:在事件中,当前操作的那个元素就是事件源

当函数当作事件处理函数,那么函数内的this指向就只该事件源

 

当点击btn元素时候触发函数,然后执行函数,在控制台打印 btn这个元素,this这里指向btn

 

 

当点击btn元素时候触发函数,然后执行函数,在控制台打印 btn这个元素,this这里指向btn

 

 

这里obj.fn不知直接别调用,而是交给了事件,当成了事件处理函数,在控制台打印 btn这个元素,this这里指向btn

 

 

这里obj.fn不知直接别调用,而是交给了事件,当成了事件处理函数,在控制台打印 btn这个元素,this这里指向btn

 

  1. 定时器调用

调用方式

setTimeout(function () {}, 1000) 、 setInterval(function () {}, 1000)

函数被当做定时器处理函数使用, this 指向 widnow

 

 

函数直接交个定时器调用 控制台打印window ,this 指向 widnow

 

 

这里obj.fn不知直接别调用,而是交给了定时器, 控制台打印window ,this 指向 widnow

 

  1. 构造函数调用

调用方式

new 函数名()

只要和 new 关键字调用了, 并且没有返回值或者返回值不是对象,this 指向实例对象

 

 

Fn函数和关键字new在一起,控制台打印Fn{},这里的 this指向了Fn函数的实例对象f

 

 

obj.fn也是因为和关键字new在一起,这里的this指向obj.fn函数的实例对象x

 

 

二、严格模式全局函数 this指向undefined

严格模式下,全局函数没有 this,是个 undefiend

 

 

 

 

三、箭头函数内没有自己的 this,箭头函数内的 this 就是外部作用域的 this

fn是箭头函数,没有自己的this,他的this是其外部作用域的 this,所以这里this指向了window

 

 

这里交给事件的函数是箭头函数,他的this是其外部作用域的 this,所以这里this指向了window

 

 

fun是箭头函数,他的this指向他外部作用域即fn函数,而fn是由obj调用的,所以this指向了obj

 

 

总结:
  一、在js非严格模式、非箭头函数下
1、普通调用,对象调用this指向了函数调用者
2、事件处理函数this指向就只该事件源
3、定时器调用this指向widnow
4、构造函数调用并且没有返回值或者返回值不是对象,this 指向实例对象

  二、严格模式全局函数 this指向undefined
  三、箭头函数内没有自己的 this,箭头函数内的 this 就是外部作用域的 this
         

 

标签:调用,obj,函数,指向,window,JS,谈谈,fn
From: https://www.cnblogs.com/gerrytong/p/17197900.html

相关文章

  • js去重
    1.使用ES6的Set去重//Set是ES6中新增的数据类型,它可以帮助我们快速去重。将数组转化为Set之后,再转化回数组即可。```javascriptconstarr=[1,2,3,1,2,3];co......
  • utils&js - 判断数据类型
    utils&js-判断数据类型/***判断文件**如果你需要类型判断,请不要再使用Object.prototype.toString.call()方法*直接调用我们下方封装好的is函数即可*我......
  • js文字转语音
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content......
  • node.js版本管理器——NVM
    在日常工作中,需同时开发好几个前端项目的时候,可能不同项目使用的node的版本也不一样,而一台电脑只能安装和同时使用一个版本的node,这个时候我们需要借助NVM来管理node的版本......
  • 【转载】node服务开发和服务器部署(node.js+koa2+pm2+nginx)教程
    我为什么要写这篇文章昨天晚上有个小哥发维信给我,问我怎么部署一个node服务,有没有相关教程,我有点震惊,就问他有哪些不懂,他说几乎都不懂。我想他应该也是找过相关教程了......
  • 浏览器控制台引入css和js
    varimport_css=document.createElement('link');import_css.setAttribute("rel","stylesheet");import_css.setAttribute("href",'https://cdn.bootcdn.net/ajax/lib......
  • 基于JSP+javaBean的留言板--改进(附源码)
    一、系统的主要功能和特点系统主要实现了以JSP和JavaBean为基础的留言板。主要包括登录、登陆检查、增加留言、查看全部留言信息、查看指定留言信息等功能实现了数据的读......
  • Rocky Linux 9 安装 Node.js
    一、概要1.环境(1)RockyLinux9.1(2)Node.js16.0二、安装1.准备(1)更新仓库sudodnfupdate-y(2)安装NPM依赖的构建工具sudoyumgroupinstall'Deve......
  • 遍历JSONObject、JSONArray (适用任意复杂结构类型)
    https://blog.csdn.net/xiangshui021/article/details/120059652?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7......
  • JS系列--【千分位处理和还原】
    1.千分位转化文件utils/common.jsconsttoThousands=function(value,num=0){if(value==null){return}if(value>0){value......