JS this指向分析

最新推荐文章于 2025-08-12 18:03:27 发布

转载最新推荐文章于 2025-08-12 18:03:27 发布 · 99 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5c1b6c3551882573d9066241

文章标签：

#面试

本文深入解析JavaScript中this关键字的指向规则，包括函数调用、自执行函数、事件处理及经典面试题分析。通过实例说明this指向执行主体而非定义或执行位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. this指向分细

1.1 this

this(我们在js中研究的都是函数中的this)
JS中的this代表的是当前行为执行的主体
JS中的context代表的是当前行为执行的环境(区域)

//例如:A 在 饭店 吃 饺子
//执行主体就是A 上下文就是饭店 吃饺子就是行为
function 吃饺子() {
    console.log(this);
}
A.吃饺子()//输出this ---> 指A
(function() {
    A.吃饺子()//输出this --->指的还是A
})
//this是谁 和函数在哪定义的和在哪执行的没有任何关系,就是指执行主体
复制代码

1.2 如何区分this(目前只分析三种后续会更新)

1、函数执行,首先看函数前面是否有'.',有的话前面是谁,this就是谁,没有的话this指window

function fn() { console.log(this) };
var obj = { fn: fn };
fn()//this--->指window
var obj = { fn: fn };
obj.fn()//this指obj
function sum() {
    fn()//this---->指window
}
sum();
var oo = {
    sum: function() {
        fn()//this --->指window
    }
}
oo.sum();
复制代码

2、自执行函数中的this永远是指window

3、给元素的的某一个事件绑定方法,当事件触发的时候,执行对应的方法,this是指当前的元素

function fn() {
    console.log(this);
}
document.getElementById('#div1').onclick = fn;
//fn中的this --->指 '#div1'
document.getElementById('#div1').onclick = function() {
    //this --->指 '#div1';
    fn()//this --->指window
}
复制代码

1.3 经典面试题分析

var num = 20;
var obj = { //对象只是堆内存,不是作用域,想访问变量num,必须是obj.num的形式
    num: 30,
    fn: (function(num) {
        this.num *= 3;
        num += 15;
        var num = 45;
        return function() {
            this.num *=4;
            num +=20;
            console.log(num)
        }
    })(num)
    //此处传参 是全局变量的num的值20 赋值给了自执行函数的形参 而不是obj的30 如果传入obj下的30 需要写成obj.num
}
var fn = obj.fn;
fn();//输出65
obj.fn();//85
console.log(window.num);//240
console.log(obj.num);//120
复制代码