• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

# TypeScript 中如何确保 this 的正确性

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

问题

在 TS 里面 this 关键字一开始让我这个写 C# 的十分惊讶,比如下面的一段代码,注意 initBinding 方法

class Company {
    id:number;
    
    /**
     * 在点击编辑按钮的时候开始初始化 currentCompany 对象
     * @param e 触发事件的 tr
     */
    constructor(e:JQueryEventObject) {
        //省略了初始化字段的代码
        this.initBinding();
    }

    /**
     * 在这里绑定模态框的事件
     */
    initBinding() {
        $('#confirmDelete').one('click',this.confirmDelete);
    }

    /**
     * 确认删除按钮的行为
     * @returns {boolean} 删除是否成功
     */
    confirmDelete():boolean {
        console.log("确认删除"+this.id);
        //省略请求服务器处理的操作
        return true;
    }
}

initBinding 方法里面,我给一个按钮的 click 事件绑定了一个方法,这个方法会打印一下当前选中的公司的 id
但是,结果让人意外,打印出来的竟然是这个按钮的 id
按照原先学习的 C# 里面面向对象的观念,对象的方法里面的 this 应该是指的这个对象本身,可是在这里的 this 却变成了触发事件的按钮。

分析

让我们想想 js 中是如何定义成员方法的,定义一个属性,属性的值是一个 function ;
所以,在我们调用的这个成员方法的时候实际上是调用的这个属性返回的方法,这个方法其实是与返回他的属性所属的对象是无关的。
换句话来说,成员方法中的 this 要结合调用它的上下文来看待,在上面的例子中,我们是在按钮的 click 事件中调用的 confirmDelete 方法,所以,其中的 this 就是指的这个产生 click 事件的按钮。

解决

为了让 confirmDelete 方法能够找到正确的上下文,我们将事件绑定的部分修改一下:

/**
 * 在这里绑定模态框的事件
 */
initBinding() {
    $('#comDelete').one('click', Company.deleteCom);
    $('#confirmDelete').one('click', ()=>this.confirmDelete());
}

让我们看看编译后的 js 代码:

/**
 * 在这里绑定模态框的事件
 */
Company.prototype.initBinding = function () {
    var _this = this;
    $('#confirmDelete').one('click', function () { return _this.confirmDelete(); });
};

这里生成了一个局部变量 _this ,是当前对象的一个相等的新的实例,通过在一个匿名的函数中调用他的 confirmDelete 方法,这样,就能够正确的解析 this 关键字为我们所希望的当前对象了


参考链接:
TypeScript里的 this


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript-模块系统发布时间:2022-07-18
下一篇:
从 JavaScript 到 TypeScript发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap