• 中文
    • English
  • 注册
  • 查看作者
  • 7:JS中this关键字

    一.  前言

    js的this指代的东西有以下三种情况:

    • 直接使用this,指的是window对象

    • 在对象的方法中使用this,指的是当前对象

    • 在标签的事件属性中使用this,指的是当前标签

    接下来针对上面的三种情况,分别举例说明。

    二. 直接使用this

    上面我们已经,直接使用this,this指的就是window对象:

    <script type="text/javascript">
        console.log(window);
        console.log(this); //输出的内容和上面一样
    </script>

    输出如下图:

    7:JS中this关键字

    可以看到alert也是window的一个对象,所以我们也可以采用window.alert()的方式来调用alert;除了上面的直接使用,我们还可以把this放在函数中,效果和直接使用上面的直接使用this是一样的。

    <script type="text/javascript">
       function zj() {
           console.log(this);
       }
       zj();
    </script>

    三.  对象方法中使用this

    在对象的方法中使用this,指的不再是window对象,此时的this指的是当前类的 对象:

    <script type="text/javascript">
       function f() {
           console.log(this);
       }
        var book ={
            id:1001,
            name:"西游记",
            author:"吴承恩",
            price:9.9,
            show:function () {
                console.log(this);
            }
        };
        book.show();
        //{id: 1001, name: "西游记", author: "吴承恩", price: 9.9, show: ƒ}
           console.log(this); //见下图
    </script>

    此时我们再输出一下window对象可以看到,book类以及f函数,都可以在window对象中找到。也就是说,声明的函数和对象会默认保存在window对象中。

    7:JS中this关键字

    四.  在标签的事件属性中使用this

    在标签的事件属性中使用this,this指的便是当前标签,首先我们准备一个方法,传入x,返回x,我们传入this,返回了window对象:

    <script type="text/javascript">
        function aj(x) {
            console.log(x);
        }
        aj(this); //输出window对象
    </script>

    接下来,我们在某个标签的事件中,调用aj方法,输出内容将不再是window对象,而是当前标签:

    <body>
    <!--鼠标点击的时候调用aj方法,传入this-->
    <button id="btn1" onclick="aj(this)" >按钮1</button>
    <!--输出:<button id="btn1"onclick="aj(this)">按钮1</button>-->
    <script type="text/javascript">
        function aj(x) {
            console.log(x);
        }
    </script>
    </body>

    再以a标签举例:

    <body>
    <button id="btn1" onclick="aj(this)" >按钮1</button>
    <a href="#" onclick="aj(this)">链接</a>
    <!--输出<a href="#" onclick="aj(this)">链接</a>-->
    <script type="text/javascript">
        function aj(x) {
            console.log(x);
        }
    </script>
    </body>

    山东省
  • 0
  • 0
  • 0
  • 1.5k
  • 请登录之后再进行评论

    登录
    单栏布局 侧栏位置: