this理解_在函数中,this 表示全局对象在函数中,在严格模式下,this 是未定义的(undefined)-CSDN博客

本文链接：https://blog.csdn.net/weixin_44688451/article/details/115027758

含义

this在js中表示当前行为执行的主体

this在js中不是函数独有的，但是我们主要研究的是函数中的this

张三沙县小吃蛋炒饭多加一个蛋（张三就是行为的主体）

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。

在事件处理函数中（将函数当做值赋值给某个事件）this是当前触发的那个元素，例如：

<style>
        ul li {
            height: 30px;
            margin-bottom: 5px;
            background-color: red;
        }
</style>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
    <script>
        var oLis = document.getElementsByTagName("li");
        for (var i = 0; i < oLis.length; i++) {
			// 利用for循环，给每一个li都绑定点击事件
            oLis[i].onclick = function () {
            	//当点击li时控制台打印输出this（也就是点击的那个li的标签<li></li>）
            	//和所点击的那个li的内容
                console.log(this);
                console.log(this.innerHTML);
            }
        }
        //单纯调用this则this代表的就是window这个对象
        console.log(this);
        //所以就是谁调用this就是谁，在不同的地方就代表不同的对象
    </script>
</body>

自定义属性

js中一切皆对象

元素天生自带很多属性，原来没有的属性我们去增加就是自定义属性；

给值就是设置，不给值就是获取；

设置 对象.自定义属性名 = 值;

获取 对象.自定义属性名;

// 与上段html一致，实现功能为，点击哪个li使哪个li变为蓝色，再点击变为绿色

var oLis = document.getElementsByTagName("li");
for(var i = 0;i<oLis.length;i++){
    // 自定义属性，给每一个li都添加一个名为flag的自定义属性，赋值为true
    oLis[i].flag = true;
    oLis[i].onclick = function(){
        // 判断 (当前这个li上自定义属性的值)
        if(this.flag){//true
            this.style.backgroundColor = "blue";
            // 给自定义属性重新赋值
            this.flag =false;
        }else{
            this.style.backgroundColor = "green";
            // 给自定义属性重新赋值
            this.flag =true;
        }
    }
}

自定义索引

自定义索引的本质就是自定义属性(赋值为数字)

// 获取元素
var oLis = document.getElementsByTagName("li");
//给每一个li添加点击事件
for(var i = 0;i<oLis.length;i++){
    // 自定义索引
    oLis[i].index = i;
    oLis[i].onclick =function(){
        console.dir(this);
        alert(this.index);
    }
}