ES6 class inheritance problem

export default class Base extends Component<Props> {
    constructor(props) {
        super(props);
        console.log("Base this",this)//this showToast renderModal
    }

    /*
    *Toast
    * */
    showToast=(msg)=>{
        console.log("showToast",this)
    }

    /**
     *
     * */
    renderModal(contentView, visible, close, animation, customerlayout){
     console.log("renderModal",this)
    }


    componentDidMount() {
    }

    componentWillUnmount() {
    }

}

when used in subclasses

super.renderModal("hahahhah")//
 super.showToast("hahahhah")//

clipboard.png

basethis
clipboard.png

ask for a detailed explanation

The

arrow function does not have its own this. Its this does not point to the current subclass or base object as you might think, but the current object at the time of definition. If you created the base class in the global scope, it is undefined.


this has nothing to do with the arrow function.

In fact, the only second way to write

is es6's class syntax:

this.renderModal("hahahhah")//
this.showToast("hahahhah")//
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1bc150d-3055a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1bc150d-3055a.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?