Javascript中函数this指向问题

函数中的this指向问题一直是js中的重点也是一个难点,下面就让咱们一块儿来总结一下吧!

1.普通函数

// 普通函数
    function fn() {
      console.log(this);
    }
    fn();   // 打印结果为: window{...}
复制代码

结论: 普通函数内部this指向Window

特别提醒:

‘use strict’严格模式下this指向undefined

2.对象的方法

// 对象的方法
    var obj = {
        age: 20,
        sayHi: function() {
            console.log(this);
        }
    }
    obj.sayHi();  // 打印结果为: {age: 20, say: ƒ}
复制代码

结论: 对象的方法的this指向obj对象

3.构造函数

// 构造函数
    function Star() {
        console.log(this);  // Star {}
    };
    var andy = new Star();
复制代码

结论: 构造函数this指向andy这个实例对象

特别提醒:

严格模式下,若是 构造函数不加new调用, this 指向的是undefined,若是给他赋值则会报错!

4.绑定事件函数

// 绑定事件函数
    var btn = document.querySelector('button');
    btn.onclick = function() {
        console.dir(this);
    };  // 打印结果: button
复制代码

结论: 绑定事件函数this指向的是函数的调用者 也就是btn这个按钮对象

5.定时器函数

// 定时器函数
    window.setTimeout(function() {
        console.log(this);
    }, 1000);  // 打印结果: window
复制代码

结论: 定时器函数中this指向也是window

6.当即执行函数

// 当即执行函数
    (function() {
        console.log(this);
    })();  // 打印结果: window
复制代码

结论: 当即执行函数中的this也是指向window

7.箭头函数

// 箭头函数
    var obj = {
        sayHi: () => {
	    console.log(this.age);
        }
    }
    obj.sayHi();  // window
复制代码

结论: 箭头函数没有本身的this，看其外层的是否有函数，若是有，外层函数的this就是内部箭头函数的this，若是没有，则this是window.

8.如何寻找函数中的this

关于如何寻找函数中的this,我用一张图来讲明!

本文完!