在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/Java  HTML/ ES6類繼承問題

ES6類繼承問題

export default class Base extends Component<Props> {
    constructor(props) {
        super(props);
        console.log("Base this",this)//打印this 可以看到箭頭函數(shù)showToast 但是不能看到renderModal
    }

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

    /**
     *顯示彈出框
     * */
    renderModal(contentView, visible, close, animation, customerlayout){
     console.log("renderModal",this)
    }


    componentDidMount() {
    }

    componentWillUnmount() {
    }

}

在子類中使用時

super.renderModal("hahahhah")//正確
 super.showToast("hahahhah")//報錯如下

clipboard.png

打印base的this可以看到箭頭函數(shù)的名字
clipboard.png

求詳細(xì)解釋

回答
編輯回答
安淺陌

箭頭函數(shù)沒有自己的this。它的this并不是像你想的那樣指向當(dāng)前子類或base對象，而是在定義的時候的當(dāng)前對象。如果你是在全局作用域下創(chuàng)建的base類，那就是undefined。

2017年4月7日 13:13
編輯回答
笨笨噠

這個和箭頭函數(shù)沒有關(guān)系。

其實只有第二種寫法是 es6 的 class 語法：

class Base {
    constructor() {
        console.log("constructor")
    }

    fn(){
     console.log("fn")
    }

}

而 class 本質(zhì)上還是 js 的原型鏈繼承，因此這個函數(shù)其實是在 class 實例的原型鏈上：

而 showToast=(msg)=>{} 語法，雖然 React-Native 可以使用，但是這個需要靠 babel 編譯。這個是 Stage 3 的提案 class-fields，也就是曾經(jīng)被廢棄的 Stage2 的 class-public-fields

你可以把字類的 2 個 super 改成 this。

this.renderModal("hahahhah")//正確
this.showToast("hahahhah")//報錯如下
2017年3月27日 01:47