前端基础(九)_this基本使用、this指向判断、改变this指向的方法
前言:
看这个例子:
例:给所有的div标签都添加点击事件,并打印当前节点的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LiuQing</title>
<style>
#box {
background-color: red;
}
</style>
</head>
<body>
<div class="Liuqing"> Liuqing1 </div>
<div class="Liuqing"> Liuqing2 </div>
<div class="Liuqing"> Liuqing3 </div>
<div class="Liuqing"> Liuqing4 </div>
<div class="Liuqing"> Liuqing5 </div>
<script>
var Liuqing = document.querySelectorAll('.Liuqing')
console.log(Liuqing, 'LiuqingLiuqing')
// 这里目前先使用 let 声明变量
for (let i = 0; i < Liuqing.length; i++) {
Liuqing[i].onclick = function () {
console.log(Liuqing[i], 'innerHTML')
}
}
</script>
</body>
</html>
这里点击了Liuqing1、Liuqing3、Liuqing5。
这个例子我们使用了let声明了变量i,来进行循环,现在我们可以不使用这个let,使用this。
首先我们看看还使用var声明i会出现什么问题:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LiuQing</title>
<style>
#box {
background-color: red;
}
</style>
</head>
<body>
<div class="Liuqing"> Liuqing1 </div>
<div class="Liuqing"> Liuqing2 </div>
<div class="Liuqing"> Liuqing3 </div>
<div class="Liuqing"> Liuqing4 </div>
<div class="Liuqing"> Liuqing5 </div>
<script>
var Liuqing = document.querySelectorAll('.Liuqing')
console.log(Liuqing, 'LiuqingLiuqing')
for (var i = 0; i < Liuqing.length; i++) {
Liuqing[i].onclick = function () {
console.log(Liuqing[i], 'innerHTML')
}
}
</script>
</body>
</html>
点击之后,会打印undefined,而不是Liuqing12345。
这是为什么呢???????
<script>
var Liuqing = document.querySelectorAll('.Liuqing')
console.log(Liuqing, 'LiuqingLiuqing')
for (var i = 0; i < Liuqing.length; i++) {
Liuqing[i].onclick = function () {
console.log(Liuqing[i], 'innerHTML')
console.log(i, 'iiiiiiiii')
}
}
</script>
打印一下i的值:
发现都是5 what ??? ???
解释:
在点击事件里面打印 i 的值,发现 i 的值一直是 5,但是就 5 个 li,下标从 0 开始到不了 5,所以会报错,那是因为,点击事件只有点击的时候触发,在这之前循环给 li 加点击事件,i 到 5的时候条件不成立,结束循环,所以那时候的 i 就已经到 5。则不能在循环事件的函数中再使用 i。
一、this基本使用
1、this一般在函数中使用,是指包含它的函数作为方法被调用时所属的对象,在不同的地方所代表的含义不同,取决于被调用时所处的上下文环境,即this表示当前调用函数的对象,就是谁调用了这个函数,this就指向谁。
2、在事件处理函数,this指当前触发事件的对象,是函数中用来表示调用这个函数的对象,事件中,由哪个对象触发了事件则this 就是谁。
var Liuqing = document.querySelectorAll('.Liuqing')
console.log(Liuqing, 'LiuqingLiuqing')
for (var i = 0; i < Liuqing.length; i++) {
Liuqing[i].onclick = function () {
console.log(Liuqing[i], 'innerHTML')
console.log(this, "this")
console.log(i, 'iiiiiiiii')
console.log("=========================")
}
}
完美的解决了这个问题。
二、this指向判断
函数的this指向 看调用、不看声明
(1)普通函数调用
①函数名() this->windown
(2)事件处理函数调用
①oDiv.onclick = function(){} this->添加事件的元素
1.1 onclick 点击事件
1.2 onload 用户进入某个页面的时候触发(onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。)
1.3 onunload 用户离开某个页面的时候触发(onload 和 onunload 事件可用于处理 cookie。)
1.4 onchange 内容变化事件(常结合对输入字段的验证来使用)
1.5 onmouseover 鼠标移动到HTML元素上方的事件
1.6 onmouseout 鼠标移出HTML元素上方的事件
1.7 onmousedown 鼠标按下的时候触发的事件
1.8 onmouseup 鼠标弹起触发的事件(onmousedown,onmouseup和onclick区别,onclick是鼠标完成点击事件的时候触发的事件)
1.9 onfocus 元素获取焦点事件
1.10 onblur 元素失去焦点事件
1.11 onabort 图像的加载失败
1.12 ondblclick 双击事件
1.13 onerror 当加载图像和文档时发生错误
1.14 onkeydown 键盘按键被按下发生的事件
1.15 onkeyup 键盘按键被松开发生的事件
1.16 onkeypress 键盘按键按下并松开发生的事件
1.17 onmousemove 鼠标移动
1.18 onresize 窗口或者框架被重新调整大小
1.19 onselect 文本被选中
1.20 onreset 重置按钮被点击
1.21 onsubmit 提交按钮被点击
(3)全局中this指向window对象
(4)对象的方法函数
Var obj = {fn:function(){}}
对象名.方法名() obj.fn(); this->调用方法的对象(对象名)obj
例1.普通函数this默认指向window
function fun(){
console.log(this) //window
}
fun() //相当于window.fun()
例2.对象的方法 对象.方法调用this指向该对象
let obj={
name:'胡歌',
age:"18",
speak(){
console.log(this.name+'今年'+this.age,this)
//胡歌今年18 this指向这个对象
}
}
obj.speak() //谁调用这个方法指向谁
例3.函数谁调用指向谁
function constructorFun(name='虹猫蓝兔七侠传',age='16'){
this.name=name;
this.age=age;
this.speak=function(){
console.log(this.name+'的年龄是'+this.age,this)
}
}
let childObj = new constructorFun('胡歌',20)
childObj.speak()
//胡歌的年龄是20 this指向childObj这个对象
//this指向实例
//比如:vue实例 就是new出来的 在使用中通常会使用this点方法名来使用方法,这些方法都是vue这个类上面的方法。
例4.事件对象 谁触发事件指向谁
<div id="box">我是id=box盒子</div>
let boxid = document.getElementById('box')
boxid.onclick=function(){
console.log(this) //指向box这个dom对象
this.innerHTML='我是用this改变后的innerHTML'
}
例5.箭头函数this指向外层作用域的this
<div class="box">我是class=box盒子</div>
let boxclass = document.getElementsByClassName('box')[0]
boxclass.onclick=()=>{
console.log(this) //当前作用域外层this指向window
this.alert('我是window对象')
}
总的来说:
①方法函数:对象.方法() ; this->调用方法的对象
②普通函数:( window.) 函数名() this->window
③事件处理函数: oDiv.οnclick= function(){} oDiv.onclick() this->添加事件的元素
④全局中的this指向window对象
三、改变this指向的方法
相关文章
- web自动化测试:Selenium+Python基础方法封装
- PHP实现异步调用方法研究
- WPF MVVM UI分离之《交互与数据分离》 基础才是重中之重~delegate里的Invoke和BeginInvoke 将不确定变为确定系列~目录(“机器最能证明一切”) 爱上MVC3系列~全局异常处理与异常日志 基础才是重中之重~lock和monitor的区别 将不确定变成确定~我想监视我的对象,如果是某个值,就叫另一些方法自动运行 将不确定变成确定~LINQ DBML模型可以对
- python使用内置方法和修饰器方法获取类名、函数名
- vue+iview后台管理系统util.ajax跨域问题的解决方法
- 0基础怎么学习Python?Python学习方法汇总!
- selenium提取数据之driver对象的常用属性和方法
- 前端基础 - JavaScript方法覆盖
- 电磁兼容原理、方法及设计的科普好文
- web自动化测试:Selenium+Python基础方法封装
- Java web 实现视频在线播放的常用几种方法
- 关于C++中vector和set使用sort方法进行排序
- Python基础必掌握的for定义迭代方法详解
- Python基础必掌握的利用Booleans优化代码巧妙方法
- 微服务解决了什么问题?(读书笔记《软件构架基础 工程方法》)
- 【Vue】vue基础语法——computed计算、watch监听、class和style,最后回顾JavaScript里面的常用方法(vue学习day03)
- MySQL时间盲注五种延时方法
- c# 普通打印机大致有三种方法(非热敏打印机及lpt1并口指令控制型)
- IE无法打开internet网站已终止操作的解决的方法
- python中常用的九种数据预处理方法分享
- java基础—第五章、方法
- python基础:删除列表中特定元素的几种方法
- WebForm.aspx 页面通过 AJAX 访问WebForm.aspx.cs类中的方法,获取数据
- 进程互斥的实现方法