this的指向

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

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

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来调用函数,会自动执行下面的操作:

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

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

绑定优先级

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值