理解JavaScript中的this指向问题

最新推荐文章于 2024-09-11 15:33:18 发布

嘿.你好

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量90

点赞数 1

分类专栏：原生JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/ajahhh/article/details/120209670

版权

原生JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript中this的动态指向，包括在对象方法、事件绑定、构造函数和定时器中的不同行为。通过实例解析了this如何根据调用环境改变其指向，特别提到了箭头函数的特殊情况。此外，还总结了this使用的主要场景，并分析了行内绑定、动态绑定和事件监听中的this。最后，通过示例展示了构造函数和定时器中this的常见问题及其解决方案。

摘要由CSDN通过智能技术生成

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

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

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

var s = '2';

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

fun函数被调用了两次，显而易见的是两次的结果不一样的。

obj.f()的调用中，因为运行环境在obj对象内，因此函数中的this指向对象obj;

而在全局作用域下调用 fun() ，函数中的 this 就会指向全局作用域对象window;

理解this在运行环境的动态下的指向。

var A = {
    name: '张三',
    f: function () {
        console.log('姓名：' + this.name);
    }
};

var B = {
    name: '李四'
};

B.f = A.f;
B.f()   // 姓名：李四
A.f()   // 姓名：张三

上面代码中，A.f属性被赋给B.f，也就是A对象将匿名函数的地址赋值给B对象；

那么在调用时，函数分别根据运行环境的不同，指向对象A和B。

我们对this使用最频繁的几种情况做一个总结，最常见的基本就是以下几种：

对象中的方法，事件绑定，构造函数，定时器

事件绑定中的this

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

行内绑定的两种情况：

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

<input type="button" value="按钮" onclick="this">
<!-- 运行环境在节点对象中，因此this指向本节点对象 -->

动态绑定与事件监听：

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

构造函数中的this

function Pro(){
    this.x = '1';
    this.y = function(){};
}
var p = new Pro();

指向new的新对象。

window定时器中的this

var obj = {
    fun:function(){
        this ;
    }
}

setInterval(obj.fun,1000);      // this指向window对象
setInterval('obj.fun()',1000);  // this指向obj对象

定时器是异步执行函数，同步的执行完毕后在window中执行，所以此时的this指向window。