JS this关键字的五种不同指向和作用，实例详解

this关键字

JavaScript中，this关键字的指向，或者说是作用，取决于this关键字被使用的具体位置。常见的其中五种，如下：

在JavaScript的对象方法中，this指向方法的所有者，即对象本身；
this在单独使用的时候，指向全局对象，比如，在浏览器窗口中全局对象为[object window]；
在函数内部，this也指向全局对象；
this在函数的严格模式use strict的模式下，指向undefined；
在HTML的事件之中，this指向接收事件的HTML元素；

在对象方法中的this实例代码，及在线编辑器

<script>
  var student = {
    name:'xiaoming',
    id:1,
    math_score:98,
    computer_score:99,
    all_score:function(){
      return this.math_score + this.computer_score
    } 
  }
  
  alert(student.all_score())
</script>

单独使用this实例

<script>
  var wd = this
  alert(wd.outerWidth)
</script>

实例代码提示

因为this单独使用，指向object window，所以，可以通过对象的outerWidth属性来获取当前屏幕的宽度。

this在函数中使用的实例

<script>
  function windowarea(){
    return this.outerWidth + ' x '+this.outerHeight
  }
  alert(windowarea())
</script>

实例代码解析

如上代码，设计了一个返回电脑屏幕尺寸（像素）的函数，其中的this直接指向当前的window对象，其中outerHeight属性用于返回当前屏幕的高度。

this在函数的严格模式下使用实例

在严格模式下，函数内的this指向undefined：

<script>
  function func1(){
    "use strict"
    return this
  }
  alert(func1())
</script>

this在事件中使用

this在HTML文档的事件中使用，可以指向接受事件的元素本身，下方的实例将通过按钮的点击事件获取按钮的id，这有什么用呢，比如当很多按钮都使用同一个onclick点击的函数，那要怎么判断那么多按钮中是哪个被点击呢，这时候就可以使用this来传递参数了：

<button id='hello' onclick='getID(this.id)'>获取ID</button>
<script>
  function getID( arg ){
    alert(arg)
  }
</script>

hot：热门