this相关-CSDN博客

本文链接：https://blog.csdn.net/YeChan414/article/details/124035801

基于Function.prototype上的call/apply/bind方法去改变this指向

什么是this

在JS中，this指的就是执行主体，也就是说，谁执行的它，this就是谁，和在哪里创建以及在哪里执行都没有关系，只看谁执行它

this的五种情况分析

函数执行

当一个函数执行，就看它前面有没有“点”，如果没有“点”，那么this就是window，严格模式下是undefined；如果有“点”，那么“点”前面是谁，this就是谁

    let fn = function(){
        console.log(this)
    }
    let obj = {
        name:'张三',
        fn:fn
    }

    fn()  //结果是window
    obj.fn()  //结果是obj

事件行为触发

当给元素的某个时间绑定方法，当作事件行为触发，方法中的this就是当前元素（除attachEvent)

    document.body.addEventListener('click',function(){
        console.log(this)  //点击页面之后，结果是document.body
    })

new一个对象

当一个函数作为构造函数，并且通过new创建了一个对象，那么构造函数中的this就是这个对象

    function Fn(){
        this.name = '张三'
        this.age = 18
        console.log(this)  /*因为下面用f接收了new的对象，所以这里的this就是f
                            并且f中已经拥有了name和age属性*/
    }
    let f = new Fn()

箭头函数

箭头函数中没有执行主体，所以它的this是其所处上下文的this

    let obj = {
        name:'obj',
        fn(){
            console.log(this)  //因为是obj调用的fn()，所以结果是obj

            setTimeout(function(){
                console.log(this)  //因为不是箭头函数，所以结果是window
            }, 1000);

            setTimeout(()=>{
                console.log(this)  //箭头函数，它的上下文中this是obj
            }, 1000);
        }
    }
    obj.fn()

基于Function.prototype上的call/apply/bind方法去改变this指向

    function f(){
        console.log(this)
    }
    let obj = {
        name:'obj'
    }
    f.call(obj)  //obj
    f.apply(obj)  //obj
    document.body.addEventListener('click',f.bind(obj))  //obj

这里注意call/apply/bind的区别：

bind是绑定，但不会立即执行

call和apply会立即执行，不同的是apply传入的形参必须是数组

欢迎指正