this的指向方式有几种？

写前端的小北
93 阅读2分钟

这是我参与「4月日新计划更文活动」的第29天。

今天跟大家聊一下this的指向问题，以及在项目中的使用。

我自己通过写项目的过程中，总结了一共有下面的几种用法。

1、默认情况下指向window

就是我们平时在最常见的使用环境下，默认都是指向window的。

下面举个例子

var name = 111;
window.name = 222;
console.log(name === window.name);
console.log(this.name);

输出结果是： true 222

所以你看，这种情况下的this就是指向的window.

2、通过bind、apply和call动态的指向传入的对象

var obj = {
    name: '小明',
    age: 20
}

function getName() {
    console.log(this.name)
}

getName.call(obj);

var getMyName = getName.bind(obj);
getMyName();

输出结果是：小明 小明。

以上这段代码可以看到，通过call和bind的方式可以将this动态的指向obj这个对象变量。并且执行的结果都是obj的name属性值。

3、指向调用当前函数的对象

这种情况主要是当前函数或者属性作为对象的方法或者属性来调用的。

在使用的时候也很容易区分出来。

以下面的这个例子可以看出来。

var obj = {
    name: '小金',
    getName() {
        console.log(this.name);
    }
}
console.log('11>>', this.name);
obj.getName();

如上面这段代码所示： 当前定义了一个对象obj，并且obj中有属性name，以及对象的方法getName。当在外部调用obj.getName的时候，此时函数体中的this指向的就是当前这个调用这个函数的对象。

4、箭头函数的时候指向当前此法作用域的上下文

将上面的这段代码稍微做一下改变。

var obj = {
    name: '小金',
    getName: () => {
        console.log(this.name);
    }
}
console.log('11>>', this.name);
obj.getName();

这个时候输出的结果是多少呢？大家猜一猜。

我来公布答案，最后的结果是：undefined undefined。

因为箭头函数getName外部的词法作用域指向的是window对象。

5、构造函数内指向实例对象

不多说，直接看代码。

function Animal(name, age) {
    this.name = name;
    this.age = age;
}
Animal.prototype.run = function () {
    console.log(this.name);
    console.log(this.age);
}

const animal = new Animal('小猫', 12);
animal.run();

直接公布上面的执行结果：小猫 12。

所以上面的this指向的就是你这个实例化对象animal。

但是如果在实例化的时候，直接返回了一个手写的对象，此时this指向的就是我们写的那个对象。

function Animal(name, age) {
    this.name = name;
    this.age = age;
    return { run: function() { console.log('哈哈哈') } }
}
Animal.prototype.run = function () {
    console.log(this.name);
    console.log(this.age);
}

const animal = new Animal('小猫', 12);
animal.run();

此时执行的结果是： 哈哈哈。

以上就是我今天总结的this的5种指向问题，以及案例演示。

看到掘金上的好文章，如果对你有帮助，顺手点个赞，或者把文章收藏。不用担心找不到了，以后也能经常收到类似好回答，我会持续进行更新。

avatar
文章
阅读
粉丝