下次不要再说你不会this指向的问题了

143 阅读1分钟

this到底指向谁,是当我们调用函数时候才能确定的,调用方式不同,this指向不同

普通函数调用-->指向window

    function fn() {
        console.log('普通函数');
        console.log(this); //window
    }
    fn();

构造函数调用-->指向实例对象,原型上的方法也指向这个实例化对象

    function Funn(name, age) {
        this.name = name;
        this.age = age
        console.log(this); //Funn {name: '小鹏', age: 22}
    }
    Funn.prototype.sing = function() {
        console.log('原型上的方法');
        console.log(this); //Funn {name: '小鹏', age: 22}
    }
    var xiaoming = new Funn('小鹏', 22);
    xiaoming.sing();
    

对象方法调用-->指向该方法所属的对象

    var techer = {
        name: '小鹏',
        exam: function() {
            console.log('对象的方法');
            console.log(this); //{name: '小鹏', exam: ƒ}
        }
    }
    techer.exam();
    

事件绑定方法-->指向绑定事件的对象

   <button>事件绑定</button>
    var btn = document.querySelector('button');
    btn.onclick = function() {
        console.log('我是事件绑定');
        console.log(this); //<buttton>事件绑定</button>
    };
   

定时器函数-->指向window

    setTimeout(function() {
        console.log('定时器');
        console.log(this); //window
    }, 2000);
   

立即执行函数-->window

    (function() {
        console.log('立即执行函数');
        console.log(this); //window
    })()