JavaScript中this指向问题

最新推荐文章于 2024-11-08 16:09:18 发布

小姜思

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量203

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45813597/article/details/126383425

版权

这篇博客详细介绍了JavaScript中this的动态绑定特性，包括在全局作用域、函数调用、定时器及方法调用中的指向。同时，提到了构造函数和显式函数绑定（如call和apply方法）时this的指向。文章强调了this的指向取决于函数的执行环境，并通过实例展示了其变化情况。

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

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象。在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

全局作用域或者普通函数中this指向全局对象window

// 全局作用域   在浏览器中指向全局对象window 
// 在node中指向{}
console.log(this);


// 普通函数  在浏览器中指向全局对象window 
// 在node中指向global对象
function fn() {
    console.log(this);
}

定时器里面的this指向全局对象window

在浏览器中指向全局对象window
setTimeout(function() {
    console.log (this)
}        // window

在方法调用中谁调用this就指向谁


var obj = {
    sayName: function () {
        console.log(this);    // this指向的是obj这个对象
    }
}
obj.sayName();

构造函数中this指向构造函数的实例

function Fun () {
    console.log(this); // this 指向的是fun实例对象
}
var fun = new Fun();

在显式函数绑定时，我们可以自己决定this的指向

var obj1 = {
  fullName: function () {
    return this.firstName + " " + this.lastName;
  }
}
var obj2 = {
  firstName: "zhangsan",
  lastName: "lisi",
}
//var name = obj1.fullName.call(obj2);  // 返回 "zhangsan lisi"
var name = obj1.fullName.apply(obj2);  // 返回 "zhangsan lisi"
// apply方法和call方法有些相似，它们都可以改变this的指向
console.log(name);
// 当我们使用obj2 作为参数来调用 obj1.fullName 方法时, this 将指向 obj2