this的指向

JS this绑定规则解析

最新推荐文章于 2025-06-26 13:07:10 发布

转载最新推荐文章于 2025-06-26 13:07:10 发布 · 144 阅读

0 ·

CC 4.0 BY-SA版权

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

整理专栏收录该内容

46 篇文章

订阅专栏

本文详细解析了JavaScript中this的绑定规则，包括默认绑定、隐式绑定、显式绑定、new绑定及其优先级，帮助读者深入理解this在不同场景下的行为。

this的绑定规则有哪些？

默认绑定
隐式绑定
显式绑定 / 硬绑定
new绑定

默认绑定

在不能应用其它绑定规则时使用的默认规则，通常是独立函数调用。
如下，严格模式下this为undefined

	function sayHi(){
	    console.log('Hello,', this.name);
	}
	var name = 'gg';
	sayHi(); //gg

隐式绑定

函数的调用是在某个对象上触发的，即调用位置上存在上下文对象。典型的形式为 XXX.fun(), 对象属性链中只有最后一层会影响到调用位置。

function sayHi(){
    console.log('Hello,', this.name);
}
var person2 = {
    name: 'ggg',
    sayHi: sayHi
}
var person1 = {
    name: 'yyy',
    friend: person2
}
person1.friend.sayHi(); //Hello,ggg

函数赋值于其他变量：

function sayHi(){
    console.log('Hello,', this.name);
}
var person = {
    name: 'ggg',
    sayHi: sayHi
}
var name = 'yyy';
var Hi = person.sayHi;
Hi(); // Hello, yyy

回调的情况

function sayHi(){
    console.log('Hello,', this.name);
}
var person1 = {
    name: 'YvetteLau',
    sayHi: function(){
        setTimeout(function(){
            console.log('Hello,',this.name);
        })
    }
}
var person2 = {
    name: 'Christina',
    sayHi: sayHi
}
var name='Wiliam';
person1.sayHi();
setTimeout(person2.sayHi,100);
setTimeout(function(){
    person2.sayHi();
},200);

Hello, Wiliam
Hello, Wiliam
Hello, Christina

情况1: setTimeout中回调为默认绑定
情况2: 相当于person2.sayHi函数赋值给了一个中间形参fn，最后执行fn，所以和函数赋值于其他变量一样
情况3: 对象上触发的，没毛病

显式绑定 / 硬绑定

就是通过call,apply,bind的方式，显式的指定this所指向的对象。箭头函数无法通过call、apply，bind改变this指向

new 绑定

顾名思义

使用new来调用函数，会自动执行下面的操作：

创建一个新对象
将构造函数的作用域赋值给新对象，即this指向这个新对象
执行构造函数中的代码
返回新对象

因此，我们使用new来调用函数的时候，就会新对象绑定到这个函数的this上。

绑定优先级

new绑定 > 显式绑定 > 隐式绑定 > 默认绑定