Web APIs 环境对象 丨黑马程序员
Posted 黑马程序员官方
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web APIs 环境对象 丨黑马程序员相关的知识，希望对你有一定的参考价值。
前期更新笔记内容： Web API 基本认知 / 获取DOM元素 / 设置/修改DOM元素内容和元素属性 / 定时器-间歇函数 / 事件基础 / 高阶函数
一、 环境对象
环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境
作用：弄清楚this的指向，可以让我们代码更简洁- 函数的调用方式不同，this 指代的对象也不同
- 【谁调用， this 就是谁】 是判断 this 指向的粗略规则
- 直接调用函数，其实相当于是 window.函数，所以 this 指代 window
<!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>Document</title>
</head>
<body>
<button>点击</button>
<script>
// 环境对象 this 他就是个对象
function fn()
console.log(this)
// fn()
window.fn()
let btn = document.querySelector('button')
btn.addEventListener('click', function ()
console.log(typeof this)
// 因为btn 调用了这个函数，所以 this 指向btn
)
</script>
</body>
</html>二、编程思想
排他思想当前元素为A状态,其他元素为B状态
使用： 1. 干掉所有人
- 使用for循环
- 通过this或者下标找到自己或者对应的元素
排他思想：
<!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>Document</title>
<style>
.pink
background: pink;
</style>
</head>
<body>
<button>第1个</button><button>第2个</button><button>第3个</button><button>第4个</button><button>第5个</button>
<script>
let btns = document.querySelectorAll('button')
for (let i = 0; i < btns.length; i++)
btns[i].addEventListener('click', function ()
// this.classList.add('pink')
// 干掉所有人
for (let j = 0; j < btns.length; j++)
btns[j].classList.remove('pink')
// 复活我自己
this.classList.add('pink')
)
</script>
</body>
</html>排他思想升级：
<!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>Document</title>
<style>
.pink
background: pink;
</style>
</head>
<body>
<button class="pink">第1个</button><button>第2个</button><button>第3个</button><button>第4个</button><button>第5个</button>
<script>
let btns = document.querySelectorAll('button')
for (let i = 0; i < btns.length; i++)
btns[i].addEventListener('click', function ()
// this.classList.add('pink')
// // 干掉所有人
// for (let j = 0; j < btns.length; j++)
// btns[j].classList.remove('pink')
//
// 我只需要找出那个唯一的 pink类，删除
document.querySelector('.pink').classList.remove('pink')
// 我的
this.classList.add('pink')
)
</script>
</body>
</html>黑马前端专栏干货多多，关注再学，好方便~
2022年前端学习路线图：课程、源码、笔记，技术栈 另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我。
以上是关于Web APIs 环境对象 丨黑马程序员的主要内容，如果未能解决你的问题，请参考以下文章