面向对象（四）

小徐今天学习了吗
98 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第30天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章面向对象（三）中，我们学习了面向对象的相关知识点，包括原型与原型链、内置标准库与包装对象等相关知识点。在本篇文章中，我们将继续学习面向对象的相关知识点，包括this的不同指向、事件绑定中的this等相关知识点。

this的不同指向

JavaScript 中的 this 是我们头疼的地方，而 this 关键字又是一个非常重要的语法点。毫不夸张地说，不理解它的含义，大部分开发任务都无法完成。

想要理解this，我们可以先记住以下两点：

  1. this 永远指向一个对象；

  2. this 的指向完全取决于函数调用的位置；

但是 JavaScript 支持运行环境动态切换，也就是说，this 的指向是动态的，很难事先确定到底指向哪个对象。

下面举一个例子。

function fun(){
    console.log(this.s);
}

var obj = {
    s:'1',
    f:fun
}

var s = '2';

obj.f(); //1
fun(); //2

this使用最频繁的情况有几下5种：对象中的方法，事件绑定 ，构造函数 ，定时器，函数对象的call()、apply() 方法。

事件绑定中的this

事件绑定共有三种方式：行内绑定、动态绑定、事件监听。

行内绑定

行内绑定有两种情况。

<inputtype="button"value="按钮"onclick="clickFun()">
<script>
    functionclickFun(){
        this// 此函数的运行环境在全局window对象下，因此this指向window;
   }
</script>
<input type="button"value="按钮"onclick="this">
<!-- 运行环境在节点对象中，因此this指向本节点对象 -->

行内绑定事件的语法是在html节点内，以节点属性的方式绑定，属性名是事件名称前面加'on'，属性的值则是一段可执行的 JS 代码段；而属性值最常见的就是一个函数调用。

当事件触发时，属性值就会作为JS代码被执行，当前运行环境下没有clickFun函数，因此浏览器就需要跳出当前运行环境，在整个环境中寻找一个叫clickFun的函数并执行这个函数，所以函数内部的this就指向了全局对象window；如果不是一个函数调用，直接在当前节点对象环境下使用this，那么显然this就会指向当前节点对象。

动态绑定与事件监听

<inputtype="button"value="按钮"id="btn">
<script>
    varbtn=document.getElementById('btn');
    btn.onclick=function(){
        this ;  // this指向本节点对象
   }
</script>

因为动态绑定的事件本就是为节点对象的属性(事件名称前面加'on')重新赋值为一个匿名函数，因此函数在执行时就是在节点对象的环境下，this自然就指向了本节点对象。事件监听中this指向的原理与动态绑定基本一致。

avatar
文章
阅读
粉丝