Typescript类方法this指针绑定

本文探讨了JavaScript中this的绑定方式,包括通过bind()函数、箭头函数的自动绑定,以及使用代理器实现方法自动绑定this。实例展示了类的构造函数中如何绑定printX和printY方法,并在不同场景下调用它们。

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

//类的this指针使用
class Log{
    constructor() {
        //为printX函数绑定当前类对象,解决调用this.print时找不到print方法
        this.printX = this.printX.bind(this);
        //通过箭头函数形式使this指针自动绑定方法
        this.printY = ((y='y') => {
            this.print(`this allow auto bind this,${y}`);
        });
    }
    print(obj){
        console.log(obj);
    }
    printX(x='a'){
        this.print(`hi,${x}`);//使用了this指针
    }
    printY(x='a'){
        this.print(`bind test :,${x}`);//使用了this指针
    }
}

let l = new Log();
l.printX('HELLO');//可正常调用
//导出形式调用报错
const {printX,printY}=l;//从对象中导出
//printX调用的print方法找不到,this失效
//printX('WOW');//Cannot read properties of undefined (reading 'print')
//通过绑定this的形式解决,上面的构造函数中添加了函数绑定this对象
console.log('printX方法已绑定this指针,问题解决');
printX('WOW');
console.log('printY方法通过箭头函数自动绑定this指针,问题解决');
printY('===world===');

//通过代理器在获取函数方法时自动绑定this
function proxyAutoBindThis(obj){
    let c = new WeakMap();//缓存
    //代理器处理事件
    let h = {
        get (t,k){
            let v = Reflect.get(t,k);
            if (typeof v!=='function'){return v;}//不是函数不处理,直接返回
            if (!c.has(v)){c.set(v,v.bind(t));}//不重复绑定
            return c.get(v);//返回绑定了this的函数
        }
    };
    let p = new Proxy(obj,h);//为传入的obj设置代理器
    return p;//返回代理器对象
}

class A{
    test(obj){
        console.log(obj);
    }
    test1(obj=null){
        this.test(`${obj}===>,test1`);//使用this指针
    }
    test2(obj=null){
        this.test(`${obj}===>,test2`);//使用this指针
    }
}
let a = new A();//实例化A对象a
let objBindThisByProxy = proxyAutoBindThis(a);//所有方法自动绑定this
let {test1,test2}=objBindThisByProxy;//从代理器导出
//类对象调用
a.test1('类对象调用');
a.test2('类对象调用');
//通过代理器调用
test1('通过代理器调用');
test2('通过代理器调用');

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

自由软件开发者

有你的鼓励,我会更加努力。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值