JavaScript ES6 class类(this关键字)总结

最新推荐文章于 2024-08-13 15:34:06 发布

烟村四五家a

最新推荐文章于 2024-08-13 15:34:06 发布

阅读量3.9k

点赞数 3

文章标签： js es6 class this

本文链接：https://blog.csdn.net/tonny7501/article/details/103859114

版权

本文总结了在JavaScript ES6的class类中处理this关键字的一些常见方法，包括利用箭头函数、临时变量、bind以及如何统一绑定this。讨论了在jq、原生js和class中this的不同含义，并提供了在复杂场景下解决this冲突的实践方案。

摘要由CSDN通过智能技术生成

ES6实现了class关键词,使js模块化编程更加简洁, 下面是关于class继承的一小点总结, 详细请参照这位大神的详细介绍(点击)

具体class的原理这边就不写了, 看上面的链接即可, 这边只是个人的一点总结吧

在JS中this关键字用的非常多, jq中的this, 原生js的this和class中的this代表的含义都不一样, 问题就出现在如果这3中情况都用在一起,怎么去区分就是一个大问题了,用的不好,就像以下代码, 就会报错!

class Test{
    constructor(){
        this.age = 10;    // 类属性
        $('.btn').click(function(e){
            alert(this.age);
        });
    }
}

这样用new出实例之后直接报错的, 因为在jq的click中this指的是当前被点击的Element, 在内部的回调函数中无法访到类的属性,这样就造成了混淆, 根据别人的资料总结了一个可用的简单方法来区分this

class Test{
    constructor(){
        this.age = 10;    // 类属性
        $('.btn').click((e)=>{
            alert(this.age);

关注