javascript三个this

JavaScript中的this关键字是指当前函数执行时所在的上下文环境，在不同的情况下可能会有不同的指向，即三种不同的this。本文将详细介绍这三种this，同时也会配合代码实例来帮助读者更好地理解。

全局环境中的this

当在全局环境下使用this时，它指向的就是全局对象Window。

console.log(this === window);
 // true

可以看到，这段代码输出的结果为true，说明this和window是指向同一个对象的。

函数中的this

当在函数中使用this时，它的指向会根据调用该函数的方式有所不同。

作为对象的方法调用时

let obj = {
name: 'Tom',getName: function() {
    console.log(this.name);
}
}
    ;
    obj.getName();
 // Tom

可以看到，当函数作为对象的方法来调用时，this就指向该对象。

作为普通函数调用时

function getName() {
    console.log(this.name);
}
    getName();
 // undefined

在作为普通函数调用时，this指向的是window对象。此时如果该函数中使用了this.name，由于window对象中并没有name属性，所以输出的结果是undefined。

使用call、apply或bind方法时

let obj1 = {
name: 'Tom'}
    ;
let obj2 = {
name: 'Jerry'}
    ;
function getName() {
    console.log(this.name);
}
    getName.call(obj1);
     // TomgetName.apply(obj2);
     // Jerrylet func = getName.bind(obj1);
    func();
 // Tom

使用call、apply或bind方法可以改变函数中this的指向。call和apply的作用是一样的，唯一的区别在于传参方式不同。而bind方法则是返回一个新的函数，并把该函数中的this绑定到指定对象上。

构造函数中的this

function Animal(name) {
    this.name = name;
}
    let cat = new Animal('Tom');
    console.log(cat.name);
     // Tom

在构造函数中使用this时，this指向的就是实例对象。在上面的例子中，我们定义了一个Animal构造函数，并通过new关键字构造了一个cat实例。当我们在构造函数中使用this.name = name时，this指向的就是cat实例，这样就给cat对象动态地添加了一个name属性。

总结

三种不同的this指向分别为全局环境中的this、函数中的this以及构造函数中的this。当在全局环境中使用this时，它指向的是全局对象Window。在函数中使用this时，它的指向会根据调用该函数的方式不同而有所不同。当在构造函数中使用this时，this指向的就是实例对象。通过这篇文章，希望读者们对JavaScript中this的不同用法能够有更加深入的理解。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！