编程导航会员会员
登录/注册

JavaScript中this指向问题

💡无论是工作或者面试中，this指向问题是经常遇到的。所以这篇文章把常见的指向问题列出来给大家，避免踩坑。首先我们要知道，在函数中this到底取何值，是在函数真正被调用执行的时候确定的，函数定义的时候确定不了，也就是说，this的指向完全取决于函数调用的位置。因为this的取值是作用域环境的一部分，每次调用函数，都会在不同的作用域环境。

1：全局环境中

在浏览器环境严格模式中（区别于node），this默认指向window。立即执行函数，默认的定时器等函数，this也是指向window。

▼
javascript
复制代码
    console.log(this === window) // true
    function fn(){
        console.log(this === window)
    }
    fn() // true
    (function(){
        console.log(this === window) // true
    })()
    setTimeout(function() {
      console.log(this === window); //true
    }, 500)

2：对象函数中

如果函数作为对象的一个属性被调用时，函数中的this指向该对象。

▼
javascript
复制代码
    var x = 10 // 相当于 window.x = 10
    var obj = {
        x: 20,
        f: function(){
            console.log(this.x)
        },
        s: function(){
            console.log(this.x) // 20
            function fn(){
              console.log(this.x)
            }
            return fn  // 函数f虽然是在obj.fn内部定义的，但是它仍然是一个普通的函数，this仍然指向window
        }
    }
    var fn = obj.f
    fn()  // 10 
    obj.f() // 20
    obj.s()() // 10 obj.s()执行返回fn，然后 fn（）的值为10

首先调用fn()为什么结果为10，因为新建了变量fn，相当于fn = function(){ console.log(this.x)}, 函数中this默认指向window,故输出为10。而 obj.f() 中this 指向obj，所以this.x = obj.x, 输出结果为20。

3：构造函数中

构造函数创建的实例的属性指向构造函数的prototype。

▼
javascript
复制代码
    function Man(name){
        this.name =  name
    }
    Man.prototype.getName = function(){
        // this指向 Man构造的实例对象
        return this.name
    }
    const tom = new Man('tom')
    console.log(tom.getName()) // 'tom'
    
    // 切记请勿修改构造函数的返回值，将会改变默认指向，比如
    function Man(name){
        this.name =  name
        return {
            name: 'lily'
        }
    }
    Man.prototype.getName = function(){
       // this指向 Man构造的实例对象
        return this.name
    }
    const tom = new Man('tom')
    console.log(tom.name) // 'lily'

4：箭头函数中

箭头函数的this是在定义函数时绑定的，不是在执行过程中绑定的，箭头函数中的this取决于该函数被创建时的作用域环境。

▼
js
复制代码
1:
      var name = "window";

      var A = {
        name: "A",
        B: {
          name: "B",
          sayHello1: () => {
            console.log(this); //Window
            console.log(this.name);
          },
          sayHello2: function () {
            console.log(this); //B
            console.log(this.name);
          },
        },
      };

      A.B.sayHello1();
      A.B.sayHello2();
2:      
        var name = "jack";
        var man = {
          name: "tom",
          f1: function () {
            // 这边的this和下面的setTimeout函数下的this相等
            var that = this;
            console.log(this); // man
            setTimeout(() => {
              console.log(this.name, that === this); // 'tom' true
            }, 0);
          },
          f2: function () {
            // 这边的this和上面的setTimeout箭头函数下的this不相等，这里的this指向man
            var that = this;
            console.log(this); // man

            setTimeout(function () {
              console.log(this); // window
              console.log(this.name, that === this); // 'jack' false
              console.log(that.name, that === this); // 'tom' false
            }, 0);
          },
        };
        man.f1(); // 'tom' true
        man.f2(); // 'jack' false

setTimeout默认指向window，但是，在箭头函数中，this的作用域环境在man内，故this指向了man。也就是说此时的this可以忽略外围包裹的setTimeout定时器函数，看上一层的作用域。

5：dom节点中

特别在是react中jsx语法中，我们通常要改变dom的this指向，不然获取不到指定的执函数。所以通常需要在函数声明使用bind绑定事件。

▼
javascript
复制代码
    // html
    <button id="btn">myBtn</button>
    
    // js
    var name = 'window'
    var btn = document.getElementById('btn')
    btn.name = 'dom'
    var fn =  function (){console.log(this.name)}
    btn.addEventListener('click', f()) // this指向 btn
    btn.addEventListener('click', f.bind(obj)) //  this指向 window

6: 面试题

6.1. 面试题一：

▼
ini
复制代码
var name = "window";
var person = {
  name: "person",
  sayName: function () {
    console.log(this.name);
  }
};
function sayName() {
  var sss = person.sayName;
  sss(); 
  person.sayName(); 
  (person.sayName)(); 
  (b = person.sayName)(); 
}
sayName();

这道面试题非常简单，无非就是绕一下，希望把面试者绕晕：

优先级总结：

  • new绑定 > 显示绑定（bind）> 隐式绑定 > 默认绑定
▼
js
复制代码
function sayName() {
  var sss = person.sayName;
  // 独立函数调用，没有和任何对象关联
  sss(); // window
  // 关联
  person.sayName(); // person
  (person.sayName)(); // person
  //优先级总结：new绑定 > 显示绑定（bind）> 隐式绑定 > 默认绑定
  (b = person.sayName)(); // window
}

6.2. 面试题二：

▼
javascript
复制代码
var name = 'window'
var person1 = {
  name: 'person1',
  foo1: function () {
    console.log(this.name)
  },
  foo2: () => console.log(this.name),
  foo3: function () {
    return function () {
      console.log(this.name)
    }
  },
  foo4: function () {
    return () => {
      console.log(this.name)
    }
  }
}

var person2 = { name: 'person2' }

person1.foo1(); 
person1.foo1.call(person2); 

person1.foo2();
person1.foo2.call(person2);

person1.foo3()();
person1.foo3.call(person2)();
person1.foo3().call(person2);

person1.foo4()();
person1.foo4.call(person2)();
person1.foo4().call(person2);

下面是代码解析：

▼
scss
复制代码
// 隐式绑定，肯定是person1
person1.foo1(); // person1
// 隐式绑定和显示绑定的结合，显示绑定生效，所以是person2
person1.foo1.call(person2); // person2

// foo2()是一个箭头函数，不适用所有的规则
person1.foo2() // window
// foo2依然是箭头函数，不适用于显示绑定的规则
person1.foo2.call(person2) // window

// 获取到foo3，但是调用位置是全局作用于下，所以是默认绑定window
person1.foo3()() // window
// foo3显示绑定到person2中
// 但是拿到的返回函数依然是在全局下调用，所以依然是window
person1.foo3.call(person2)() // window
// 拿到foo3返回的函数，通过显示绑定到person2中，所以是person2
person1.foo3().call(person2) // person2

// foo4()的函数返回的是一个箭头函数
// 箭头函数的执行找上层作用域，是person1
person1.foo4()() // person1
// foo4()显示绑定到person2中，并且返回一个箭头函数
// 箭头函数找上层作用域，是person2
person1.foo4.call(person2)() // person2
// foo4返回的是箭头函数，箭头函数只看上层作用域
person1.foo4().call(person2) // person1

6.3. 面试题三:

▼
javascript
复制代码
var name = 'window'
function Person (name) {
  this.name = name
  this.foo1 = function () {
    console.log(this.name)
  },
  this.foo2 = () => console.log(this.name),
  this.foo3 = function () {
    return function () {
      console.log(this.name)
    }
  },
  this.foo4 = function () {
    return () => {
      console.log(this.name)
    }
  }
}
var person1 = new Person('person1')
var person2 = new Person('person2')

person1.foo1()
person1.foo1.call(person2)

person1.foo2()
person1.foo2.call(person2)

person1.foo3()()
person1.foo3.call(person2)()
person1.foo3().call(person2)

person1.foo4()()
person1.foo4.call(person2)()
person1.foo4().call(person2)

下面是代码解析：

▼
scss
复制代码
// 隐式绑定
person1.foo1() // peron1
// 显示绑定优先级大于隐式绑定
person1.foo1.call(person2) // person2

// foo是一个箭头函数，会找上层作用域中的this，那么就是person1
person1.foo2() // person1
// foo是一个箭头函数，使用call调用不会影响this的绑定，和上面一样向上层查找
person1.foo2.call(person2) // person1

// 调用位置是全局直接调用，所以依然是window（默认绑定）
person1.foo3()() // window
// 最终还是拿到了foo3返回的函数，在全局直接调用（默认绑定）
person1.foo3.call(person2)() // window
// 拿到foo3返回的函数后，通过call绑定到person2中进行了调用
person1.foo3().call(person2) // person2

// foo4返回了箭头函数，和自身绑定没有关系，上层找到person1
person1.foo4()() // person1
// foo4调用时绑定了person2，返回的函数是箭头函数，调用时，找到了上层绑定的person2
person1.foo4.call(person2)() // person2
// foo4调用返回的箭头函数，和call调用没有关系，找到上层的person1
person1.foo4().call(person2) // person1

6.4. 面试题四：

▼
javascript
复制代码
var name = 'window'
function Person (name) {
  this.name = name
  this.obj = {
    name: 'obj',
    foo1: function () {
      return function () {
        console.log(this.name)
      }
    },
    foo2: function () {
      return () => {
        console.log(this.name)
      }
    }
  }
}
var person1 = new Person('person1')
var person2 = new Person('person2')

person1.obj.foo1()()
person1.obj.foo1.call(person2)()
person1.obj.foo1().call(person2)

person1.obj.foo2()()
person1.obj.foo2.call(person2)()
person1.obj.foo2().call(person2)

下面是代码解析：

▼
scss
复制代码
// obj.foo1()返回一个函数
// 这个函数在全局作用于下直接执行（默认绑定）
person1.obj.foo1()() // window
// 最终还是拿到一个返回的函数（虽然多了一步call的绑定）
// 这个函数在全局作用于下直接执行（默认绑定）
person1.obj.foo1.call(person2)() // window
person1.obj.foo1().call(person2) // person2

// 拿到foo2()的返回值，是一个箭头函数
// 箭头函数在执行时找上层作用域下的this，就是obj
person1.obj.foo2()() // obj
// foo2()的返回值，依然是箭头函数，但是在执行foo2时绑定了person2
// 箭头函数在执行时找上层作用域下的this，找到的是person2
person1.obj.foo2.call(person2)() // person2
// foo2()的返回值，依然是箭头函数
// 箭头函数通过call调用是不会绑定this，所以找上层作用域下的this是obj
person1.obj.foo2().call(person2) // obj

6.5. 面试题五：

▼
scss
复制代码
obj = {
  func() {
    const arrowFunc = () => {
      console.log(this._name)
    }

    return arrowFunc
  },

  _name: "obj",
}

obj.func()()

func = obj.func
func()()

obj.func.bind({ _name: "newObj" })()()

obj.func.bind()()()

obj.func.bind({ _name: "bindObj" }).apply({ _name: "applyObj" })()

答案:

▼
arduino
复制代码
// obj
// undefined
// newObj
// undefined
// bindObj

7. 综合

▼
js
复制代码
  // 示例 1:
  var name = "window";
  var person1 = {
    name: "person1",
    say: function () {
      console.log(this.name);
    },
  };

  function sayName1() {
    var sss = person1.say;
    sss(); // window
    person1.say(); // person1
    // (person1.say)(); // 等于person1.say() // person1
    (b = person1.say)(); // window
  }
  sayName1();

  // 示例 2:
  var name = "window";
  var person2 = {
    name: "person2",
    foo1: function () {
      console.log("foo1", this.name);
    },
    foo2: () => console.log("foo2", this.name),
    foo3: function () {
      return function () {
        console.log("foo3", this.name);
      };
    },
    foo4: function () {
      return () => {
        console.log("foo4", this.name);
      };
    },
  };
  var obj = { name: "zgc" };

  person2.foo1(); // foo1 person2
  person2.foo1.call(obj); // foo1 zgc

  person2.foo2(); // foo2 window, 注意:这里的上层作用域是window
  person2.foo2.call(obj); // foo2 window

  person2.foo3()(); // foo3 window
  person2.foo3.call(obj)(); // foo3 window
  person2.foo3().call(obj); // foo3 zgc

  person2.foo4()(); // foo4 person2
  person2.foo4.call(obj)(); // foo4 zgc
  person2.foo4().call(obj); // foo4 person2

  // 示例 3:
  var name = "window";

  function Student(name) {
    this.name = name;

    this.bar1 = function () {
      console.log("bar1", this.name);
    };

    this.bar2 = () => console.log("bar2", this.name);

    this.bar3 = function () {
      return function () {
        console.log("bar3", this.name);
      };
    };

    this.bar4 = function () {
      return () => {
        console.log("bar4", this.name);
      };
    };
  }

  var stu1 = new Student("stu1");
  var stu2 = new Student("stu2");

  stu1.bar1(); // bar1 stu1
  stu1.bar1.call(stu2); // bar1 stu2

  stu1.bar2(); // bar2 stu1, 注意:这里的上层作用域是Person构造函数
  stu1.bar2.call(stu2); // bar2 stu1

  stu1.bar3()(); // bar3 window
  stu1.bar3.call(stu2)(); // bar3 window
  stu1.bar3().call(stu2); // bar3 stu2

  stu1.bar4()(); // bar4 stu1
  stu1.bar4.call(stu2)(); // bar4 stu2
  stu1.bar4().call(stu2); // bar4 stu1

  // 示例 4:
  var name = "window";

  function Student2(name) {
    this.name = name;

    this.obj = {
      name: "obj",
      baz1: function () {
        return function () {
          console.log("baz1", this.name);
        };
      },
      baz2: function () {
        return () => {
          console.log("baz2", this.name);
        };
      },
    };
  }

  var stu3 = new Student2("stu3");
  var stu4 = new Student2("stu4");

  stu3.obj.baz1()(); // baz1 window
  stu3.obj.baz1.call(stu4)(); // baz1 window
  stu3.obj.baz1().call(stu4); // baz1 stu4

  stu3.obj.baz2()(); // baz2 obj
  stu3.obj.baz2.call(stu4)(); // baz2 stu4
  stu3.obj.baz2().call(stu4); // baz2 obj
笔记
前端
Javascript
0个评论
全部评论
点击登录，快来和大家讨论吧～
表情
图片
暂无评论
一
一
等级
内容推荐
更多
Django 的设计哲学有哪些？
3
第1章 LearnWise AI项目介绍
5
2026 年|AI 全栈时代，前端简历别再只写前端技术了~
3
资源 #前端# 求微信小程序的视频教程。最近正在学微信小程序，找的视频教程都不太好，跪求！！
22
智能协同云图库-进入编辑报错解决
4
作者分享
更多
Git使用指南
18
5个高级ES6特性
4
JavaScript创建多个对象的方法
3
前端 JavaScript 与 HTML 怎么实现交互
2
深入浅出前端本地储存
2
下载 APP