this 是什么

this到底指向什么，看完这篇你就够了，非常简单，本文介绍了默认绑定、隐式绑定、显示绑定、new 函数，已及dom点击事件的this指向。

// 默认绑定（函数调用时无任何调用前缀的情景）
function fn1() {
    let fn2 = function () {
        console.log(this); //window
        fn3();
    };
    console.log(this); //window
    fn2();
};

function fn3() {
    console.log(this); //window
};

fn1();

隐式绑定
function fn() {
    console.log(this.name);
};
let obj = {
    name: '行星飞行',
    func: fn,
};
let obj1 = {
    name: '听风是风',
    o: obj
};
obj1.o.func() //行星飞行

/*非严格模式*/

var name = 'window'
var i=1

var obj1 = {
    name: '听风是风',
    fn1: function () {
        console.log(i++,this.name)
    },
    fn2: () => console.log(i++,this.name),
    fn3: function () {
        return function () {
            console.log(i++,this.name)
        }
    },
    fn4: function () {
        return () => console.log(i++,this.name)
    }
}
var obj2 = {
    name: '行星飞行'
};

obj1.fn1();//?
obj1.fn1.call(obj2);//?

obj1.fn2();//?
obj1.fn2.call(obj2);//?

obj1.fn3()();//?
obj1.fn3().call(obj2);//?
obj1.fn3.call(obj2)();//?

obj1.fn4()();//?
obj1.fn4().call(obj2);//?
obj1.fn4.call(obj2)();//?

/*非严格模式*/
var name = 'window'
var i=1

function Person(name) {
  this.name = name;
  this.fn1 = function () {
    console.log(i++,this.name);
  };
  this.fn2 = () => console.log(i++,this.name);
  this.fn3 = function () {
    return function () {
      console.log(i++,this.name)
    };
  };
  this.fn4 = function () {
    return () => console.log(i++,this.name);
  };
};

var obj1 = new Person('听风是风');
console.dir(obj1);
var obj2 = new Person('行星飞行');

obj1.fn1();
obj1.fn1.call(obj2);

obj1.fn2();
obj1.fn2.call(obj2);

obj1.fn3()();
obj1.fn3().call(obj2);
obj1.fn3.call(obj2)();

obj1.fn4()();
obj1.fn4().call(obj2);
obj1.fn4.call(obj2)();

function debounce(fn) {
    let timeout = null;
    console.log(1, this)// 创建一个标记用来存放定时器的返回值
    return function () {
        console.log(2, this)
        clearTimeout(timeout); // 每当用户输入的时候把前一个 setTimeout clear 掉
        timeout = setTimeout(() => { // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后的 interval 间隔内如果还有字符输入的话，就不会执行 fn 函数
            console.log(3)
            fn() //默认绑定（函数调用时无任何调用前缀的情景）this指向window
            console.log(4)
            fn.apply(this, arguments);
        }, 500);
    };
}
function sayHi() {
    console.log(this,'防抖成功');
}

var inp = document.getElementById('kw'); //baidu.com 输入框
inp.addEventListener('input', debounce(sayHi));