彻底搞懂js中的this指向

原创已于 2022-02-05 08:39:31 修改 · 1.3k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言 #this指向

于 2022-02-04 12:39:40 首次发布

JavaScript 专栏收录该内容

11 篇文章

订阅专栏

本文深入探讨JavaScript中的this指向问题，包括标准函数和箭头函数的差异。标准函数的this取决于调用方式，如普通函数调用、构造函数调用、对象方法调用等，而箭头函数的this继承自定义它的上下文。文章通过多个示例展示了不同调用方式下this的指向，并介绍了如何通过bind、call、apply改变this指向。此外，还强调了这三种方法无法改变箭头函数中this的指向。

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

js的this指向

js中的this指向问题经常容易让人混淆，特别是在ES6引入箭头函数后，对于标准函数中的this指向和箭头函数中的this指向就更让人费解。

本文总结了js中标准函数和箭头函数的this指向问题，帮助大家理清js中的this指向。
并且介绍几个改变this指向的方法，改变this指向不管是在js的继承还是js的函数中都是很重要的。

一抓住核心

我在网上看过一些关于this指向的博客，很多都是通过例子就直接开始讲解，虽然这样也可以帮助读者快速了解，但是在这里，我希望由一般到特殊，先指出标准函数和箭头函数中this指向的不同，再通过例子讲解来验证。

刚开始可能看不太懂，但是经过例子的讲解，就会逐渐理解。

对于标准函数中的this：this引用的是把函数当成方法调用的上下文对象。标准函数中的this指向是当我们调用函数的时候确定的，调用方式的不同决定了this的指向不同，一般指向我们的调用者。直白点就是：哪个对象调用函数，函数里面的this指向哪个对象。
对于箭头函数中的this：this引用的是定义箭头函数的上下文。箭头函数不会创建自己的this，所以它没有自己的this，它只会在自己作用域的上一层继承this。所以箭头函数中this的指向在它在定义时已经确定了，之后不会改变。

二标准函数中的this

核心是：哪个对象调用函数，函数里面的this指向哪个对象。

只不过window作为浏览器中的全局对象，在调用函数时经常是省略的，有时候很多this指向的例子看起来奇怪的原因，就是因为window对象的省略。

下面的表格列出了在标准函数中不同调用方式的this指向，从中也可以间接知道一般在调用什么函数时用到window对象。

调用方式	this指向
普通函数调用	window
构造函数调用	实例对象，原型对象里面的方法也指向实例对象
对象方法调用	该方法所属对象
事件绑定方法	绑定事件对象
定时器函数	window
立即执行函数	window

函数的不同调用方式决定了this 的指向不同，下面是一些例子：

① 普通函数 this 指向window

<script>
	username = 'rs';
	function fn() {
	    console.log('普通函数的this' + this);
	    console.log(this.username);
	}
	fn();  //相当于window.fn()
</script>
//输出结果：
//普通函数的this[object Window]
//rs

② 对象的方法 this指向的是对象 o

<script>    
        color = 'red';
        var o = {
            color: 'blue',
            sayHi: function() {
                console.log('对象方法的this:' + this);
                console.log('color:' + this.color);
            }
        }
        o.sayHi();
</script>
//输出结果：
//对象方法的this:[object Object]
//color:blue

③ 构造函数 this 指向 subClass 这个实例对象

<script>
	let TestClass=function(){
	    this.name='111';
	}
	let subClass=new TestClass();
	subClass.name='cn';
	console.log(subClass.name);//cn
	let subClass1=new TestClass();
	console.log(subClass1.name)//111
</script>

④ 绑定事件函数 this 指向的是函数的调用者 btn这个按钮对象

<body>
	<button>点击</button>
	<script>
        var btn = document.querySelector('button');
        btn.onclick = function() {
            console.log('绑定时间函数的this:' + this);
        };
	</script>
</body>
//点击button，输出结果
//绑定时间函数的this:[object HTMLButtonElement]

⑤ 定时器函数 this 指向的也是window

<script>
        window.setTimeout(function() {
            console.log('定时器的this:' + this);

        }, 1000);
//定时器前面经常省略window，这点要注意
//虽然省略了window，但是其调用对象仍然是window，this指向window
</script>
//输出结果
//定时器的this:[object Window]

⑥ 立即执行函数 this还是指向window

<script>
        (function() {
            console.log('立即执行函数的this' + this);
        })();
</script>
//输出结果
//立即执行函数的this:[object Window]

三箭头函数中的this

核心是：箭头函数不会创建自己的this，所以它没有自己的this，箭头函数里面的 this 是继承外面的环境。所以箭头函数中this的指向在它在定义时已经确定了，之后不会改变。

有人可能对环境和作用域这样的概念不太熟悉，这里可以这样简单理解，{}内和函数内的就是个局部作用域或者局部环境，最外层就是全局作用域或者全局环境。

例子①

var id = 'GLOBAL';
var obj = {
  id: 'OBJ',
  a: function(){
    console.log(this.id);
  },
  b: () => {
    console.log(this.id);
  }
};
obj.a();    // 'OBJ'，标准函数，this指向调用者obj
obj.b();    // 'GLOBAL'，箭头函数，继承外面作用域，也就是全局环境的this值 —— window

例子②

window.color = 'red';
let o = {
    color: 'blue'
};
let sayColor = () => console.log(this.color);
sayColor(); // 'red'

o.sayColor = sayColor;
o.sayColor(); // 'red'
//对象o的方法sayColor是使用箭头函数定义的
//这个函数中的this就永远指向它定义时所处的全局执行环境中的this
//即便这个函数是作为对象o的方法调用，this依旧指向Window对象。

例子③

let obj={
    a:'rs',
    fn:function(){    
        setTimeout(function(){console.log(this.a)},1000);
        //相当于window.setTimeout(function(){console.log(this.a)},1000);
    }
};
obj.fn();//undefined

不难发现，虽然 fn() 里面的 this 是指向 obj ，但是，传给 setTimeout 的是标准函数， this 指向是 window ， window 下面没有 a ，所以这里输出 undefined。

换成箭头函数

let obj={
    a:'rs',
    fn:function(){    
        setTimeout(()=>{console.log(this.a)},1000);
    }
};
obj.fn();//'rs'

这次输出 rs 是因为，传给 setTimeout 的是箭头函数，然后箭头函数里面没有 this ，所以要向上层作用域查找，在这个例子上， setTimeout 的上层作用域是 fn。而 fn 里面的 this 指向 obj ，所以 setTimeout 里面的箭头函数的 this ，指向 obj ,所以输出rs。

四改变函数内部this指向

JavaScript 为我们专门提供了一些函数方法来帮我们处理函数内部 this 的指向问题，常用的有 bind(),call(),apply()三种方法

4.1call() 方法

call()方法调用一个对象，简单理解为调用函数的方式，但是它可以改变函数的this指向
fun.call(thisArg,arg1,arg2,.....)
thisArg: 在 fun 函数运行时指定的 this 值
arg1,arg2: 传递的其他参数
返回值就是函数的返回值，因为它就是调用函数
因此当我们想改变 this 指向，同时想调用这个函数的时候，可以使用 call，比如继承

<body>
    <script>
        // 1. call()
        var o = {
            name: 'andy'
        }

        function fn(a, b) {
            console.log(this);
            console.log(a + b);

        };
        fn.call(o, 1, 2);
        // call 第一个可以调用函数 第二个可以改变函数内的 this 指向
        // call 的主要作用可以实现继承
        function Father(uname, age, sex) {
            this.uname = uname;
            this.age = age;
            this.sex = sex;
        }

        function Son(uname, age, sex) {
            Father.call(this, uname, age, sex);
        }
        var son = new Son('刘德华', 18, '男');
        console.log(son);
    </script>
</body>

4.2apply()方法

apply()方法调用一个函数，简单理解为调用函数的方式，但是它可以改变函数的 this指向
fun.apply(thisArg,[argsArray])
thisArg: 在 fun 函数运行时指定的 this 值
argsArray : 传递的值，必须包含在数组里面
返回值就是函数的返回值，因为它就是调用函数
因此 apply 主要跟数组有关系，比如使用 Math.max() 求数组的最大值

<body>
    <script>
        // 2. apply()  应用 运用的意思
        var o = {
            name: 'andy'
        };

        function fn(arr) {
            console.log(this);
            console.log(arr); // 'pink'

        };
        fn.apply(o, ['pink']);
        // 1. 也是调用函数 第二个可以改变函数内部的this指向
        // 2. 但是他的参数必须是数组(伪数组)
        // 3. apply 的主要应用 比如说我们可以利用 apply 借助于数学内置对象求数组最大值 
        // Math.max();
        var arr = [1, 66, 3, 99, 4];
        var arr1 = ['red', 'pink'];
        // var max = Math.max.apply(null, arr);
        var max = Math.max.apply(Math, arr);
        var min = Math.min.apply(Math, arr);
        console.log(max, min);
    </script>
</body>

4.3bind()方法

bind()方法不会调用函数。但是能改变函数内部 this指向
fun.bind(thisArg,arg1,arg2,....)
返回由指定的 this值和初始化参数改造的原函数拷贝
因此当我们只是想改变 this 指向，并且不想调用这个函数的时候，可以使用bind

<body>
    <button>点击</button>
    
    <script>
        // 3. bind()  绑定 捆绑的意思
        var o = {
            name: 'andy'
        };

        function fn(a, b) {
            console.log(this);
            console.log(a + b);


        };
        //fn.bind(o,1,2); 不会像call和apply那样立即调用
        var f = fn.bind(o, 1, 2);
        f();
        // 1. 不会调用原来的函数   可以改变原来函数内部的this 指向
        // 2. 返回的是原函数改变this之后产生的新函数


        // 3. 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind
        // 4. 我们有一个按钮,当我们点击了之后,就禁用这个按钮,3秒钟之后开启这个按钮
         var btn1 = document.querySelector('button');
         btn1.onclick = function() {
             this.disabled = true; // 这个this 指向的是 btn 这个按钮
             // var that = this;
             setTimeout(function() {
                 // that.disabled = false; // 定时器函数里面的this 指向的是window，所以要用that代替
                 this.disabled = false; // bind()之后，定时器函数里面的this 指向的就是btn
             }.bind(this), 3000); // 这个this在function()外面 指向的是btn这个对象
         }
    </script>
</body>

4.4三个方法的区别

call和apply会调用函数，并且改变函数内部的this指向
call和apply传递的参数不一样，call 传递参数，apply 必须数组形式
bind不会调用函数，可以改变函数内部this指向

4.5注意

call()、apply()、bind()等方法不能改变箭头函数中this的指向。

var id = 'Global';
let fun1 = () => {
    console.log(this.id)
};
fun1();                     // 'Global'
fun1.call({id: 'Obj'});     // 'Global'
fun1.apply({id: 'Obj'});    // 'Global'
fun1.bind({id: 'Obj'})();   // 'Global'