美文网首页
JavaScript this 关键字

JavaScript this 关键字

作者: 明月几何8 | 来源:发表于2019-10-27 19:04 被阅读0次
    每日一新

    面向对象语言中 this 表示当前对象的一个引用。
    但在 JavaScript 中 this 不是固定不变的,它会随着执行环境的改变而改变。

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

    方法中的this

    在对象方法中, this 指向调用它所在方法的对象。
    在上面一个实例中,this 表示 person 对象。
    fullName 方法所属的对象就是 person。

    <script>
    // 创建一个对象
    var person = {
      firstName: "John",
      lastName : "Doe",
      id     : 5566,
      fullName : function() {
        return this.firstName + " " + this.lastName;
      }
    };
    
    // 显示对象的数据
    document.getElementById("demo").innerHTML = person.fullName();
    </script>
    

    单独使用this

    单独使用 this,则它指向全局(Global)对象。
    在浏览器中,window 就是该全局对象为 [object Window]:

    <script>
    var x = this;
    document.getElementById("demo").innerHTML = x;
    </script>
    

    函数中使用 this(默认)

    在函数中,函数的所属者默认绑定到 this 上。
    在浏览器中,window 就是该全局对象为 [object Window]:

    <script>
    document.getElementById("demo").innerHTML = myFunction();
    function myFunction() {
      return this;
    }
    </script>
    

    事件中的 this

    在 HTML 事件句柄中,this 指向了接收事件的 HTML 元素:

    <button onclick="this.style.display='none'">点我后我就消失了</button>
    

    总结

    1. 在对象方法中, this 指向调用它所在方法的对象。
    2. 单独使用 this,它指向全局(Global)对象。
    3. 函数使用中,this 指向函数的所属者。
    4. 在 HTML 事件句柄中,this 指向了接收事件的 HTML 元素。

    更加详细教程请参见菜鸟教程中的介绍

    相关文章

      网友评论

          本文标题:JavaScript this 关键字

          本文链接:https://www.haomeiwen.com/subject/iqdmvctx.html