JavaScript中this的指向及几种简单用法

最新推荐文章于 2023-04-23 13:12:50 发布

烂不烂问厨房

最新推荐文章于 2023-04-23 13:12:50 发布

阅读量241

点赞数

文章标签： html5 javascript

本文链接：https://blog.csdn.net/weixin_44294359/article/details/108227606

版权

JavaScript中this的指向及几种简单用法

本文body代码如下：

<body>
	<input id="btn1" type="button" value="按钮1" />
    <input id="btn1" type="button" value="按钮" onclick="btn2()" />
	<input id="btn3" type="button" value="按钮3" onclick="btn3(this)" />
</body>

1.给按钮1加onclick点击事件，输出this;

  var btn1 = document.getElementById("btn1")
    btn1.onclick = function () {
        //指向调用元素
        console.log(this)
    }

点击按钮1，此时this指向的是id为btn1的元素，也就是谁调用this，this就指向谁，没人调用则指向window，控制台输出如下：
在这里插入图片描述
2.直接在按钮2写onclick属性，触发btn2函数；

function btn2() {
        //指向window
        console.log(this)
    };

点击按钮2，此时this指向的是window，注意这里不是按钮2调用btn2函数，而是触发了btn2函数，所以this指向window，控制台输出如下：
在这里插入图片描述
如果要使用这种写在元素属性来触发函数的方法实现this指向该元素，可以用按钮3的方式：

function btn3(This) {
        //参数This指向调用元素
        console.log(This)
    }

把this作为btn3函数的传递参数；
控制台输出

4.写在对象内的函数中的this；

var number = 1;

    var obj = {
        
        number: 2,

        showNumber: function () {

            this.number = 3;  //this.指向当前函数的拥有者obj,把3赋值给obj.number

            (function () {
                console.log("one:" + this.number, this);  //自调用函数this指向window
            })();

            console.log("tow:" + this.number, this);
        }
    };
    
    obj.showNumber();

通常this指向的是该函数的拥有者，但自调用函数是个例外；
该例obj.showNumber函数中，除了自调用函数外，this指向都是对象obj;
自调用函数中，this.number指向的是window中的number,所以tow=1;

在这里插入图片描述
全部html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input id="btn1" type="button" value="按钮1" />
    <input id="btn1" type="button" value="按钮2" onclick="btn2()" />
    <input id="btn3" type="button" value="按钮3" onclick="btn3(this)" />
</body>

<script>

    function btn2() {
        //指向window
        console.log(this)
    };

    var btn1 = document.getElementById("btn1")
    btn1.onclick = function () {
        //指向调用元素
        console.log(this)
    }

    function btn3(This) {
        //参数This指向调用元素
        console.log(This)
    }

    var number = 1;

    var obj = {
        
        number: 2,

        showNumber: function () {

            this.number = 3;  //this.指向当前函数的拥有者obj,把3赋值给obj.number

            (function () {
                console.log("one:" + this.number, this);  //自调用函数this指向window
            })();

            console.log("tow:" + this.number, this);
        }
    };

    obj.showNumber();

</script>

</html>

烂不烂问厨房

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中this的指向及几种简单用法

JavaScript中this的指向及几种简单用法本文body代码如下：<body> <input id="btn1" type="button" value="按钮1" /> <input id="btn1" type="button" value="按钮" onclick="btn2()" /> <input id="btn3" type="button" value="按钮3" onclick="btn3(this)" /></b
复制链接

扫一扫