js--this指向问题this 指向问题变量对象活动对象作用域当前可执行代码块的调用者this 以上知识点总结

this 指向问题

说到this 就与执行上下文脱离不开关系,this是函数执行时的衍生品而函数执行时会形成

变量对象
活动对象

而活动对象与变量对象其实可以算是一个东西只不过是处于不同的阶段和状态全局执行的变量对象是window 而函数执行的,其内原本不可访问的变量对象成为了一个活动对象从而我们可以访问

作用域

作用域是函数执行形成的自有空间用来存储变量数据,而查找变量数据则是由作用链进行查找的

当前可执行代码块的调用者this

this 是js的关键字,代表当前代码指向的环境对象.一般在函数中使用,并且是在函数执行时,根据函数的不同执行方式确定不同的值.

以上知识点总结的可能不是很完美但是本人理解有限有感兴趣深入了解的链接奉上 juejin.cn/post/684490…
有错处请在评论区@我

所以综上所述有了以下验证代码

事件函数中的this是该绑定事件的元素

let box = document.getElementById('box');
        box.onclick = function (){
            console.log(this); 
            /* 
                <div id="box" class="wrap">
                    <p>Hehe</p>
                </div>
            */ 
        }

自执行函数中的this是 window

(function (){
    console.log(this); // Window {window: Window, self: Window, document: document, name: '', location: Location, …}
})();

setTimeout/setInterval 定时器回调函数中的this指向的事 window

setTimeout(function(){
    console.log(this);  // Window {window: Window, self: Window, document: document, name: '', location: Location, …}
},0)

方法调用时,看方法前面是否有点,如果有点前面是谁那this就指向谁,如果没有那this指向就是window

var num = 250;
var obj = {
    num:450,
    fn:function (){
        console.log(this.num);
    }
}
obj.fn(); // 450
obj['fn'](); // 450

let fn = obj.fn;
fn(); // 250
注意有一个问题
let num2 = 250;
let obj = {
    num2:560,
    fn:function (){
        console.log(this.num2);
    }
}
obj.fn(); // 450
obj['fn'](); // 450

var fn = obj.fn;
fn(); // undefined? 为什么
console.log(window.num)
ES6 为了改变这一点，一方面规定，
为了保持兼容性，var命令和function命令声明的全局变量，依旧是顶层对象的属性；
另一方面规定，let命令、const命令、class命令声明的全局变量，
不属于顶层对象的属性。也就是说，
从 ES6 开始，全局变量将逐步与顶层对象的属性脱钩。
https://es6.ruanyifeng.com/#docs/let#%E9%A1%B6%E5%B1%82%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%B1%9E%E6%80%A7

箭头函数的this指向的函数定义时所在的作用域的this

let f = (a,b)=>{
    console.log(this); // window
    return a+b
}
f();

let obj = {
    num: 560,
    fn: function () {
        let add = () =>{
            console.log(this);
            // {num: 560, fn: ƒ}
        }
        add();
    }
}
obj.fn();

全局作用域的this是window

console.log(this); // window

this 运行时不可以赋值

this = '菜不菜'; // Uncaught SyntaxError: Invalid left-hand side in assignment