ES6のこれは問題を示しています

最初にこのコードを見てください：

class student { 
    constructor (uname,age) {
        this.uname = uname;
        this.age = age;
    }
    get() {
        console.log(uname);
    }
}
var stu = new student('小杰',18);
stu.get();

最終出力はエラーを報告しますか？

getメソッドでunameに追加されないため、答えは「はい」です。

では、なぜこれを追加する必要があるのでしょうか。

unameはgetメソッドに含まれているため、getにはこのパラメーターがありますか？彼にはパラメーターがありません。必要なのは、インスタンス化されたオブジェクトのuameです。これは、stuオブジェクトのunameです：'Xiaojie'。これは、作成したインスタンス化されたオブジェクトを指しているため、インスタンス化されたオブジェクトを見つけるには、これを追加する必要があります。

上記のコードでは、stuオブジェクトを介してgetメソッドを手動で呼び出しています。インスタンス化されたオブジェクトが作成されたときにそれを呼び出したい場合はどうなりますか？新しい場合、コンストラクターコンストラクターが自動的に呼び出されるため、コンストラクターでgetメソッドを呼び出すことができます。

class student { 
    constructor (uname,age) {
        this.uname = uname;
        this.age = age;
        get();
    }
    get() {
        console.log(this.uname);
    }
}
var stu = new student('小杰',18);

このようにコンストラクターで直接呼び出されますか？答えはまだ間違っています

getメソッドはクラスで定義されているため、インスタンスオブジェクトに属します。したがって、getメソッドと呼ばれるオブジェクトを他のユーザーに通知する必要があります。これは、作成したインスタンス化されたオブジェクトを参照するため、これを追加する必要があります。1つの文を覚えておく必要があります。クラスの共通のプロパティとメソッドは、これで使用する必要があります。

ボタンがクリックされたときにgetメソッドを自動的に呼び出したい場合はどうなりますか？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击</button>
    <script>
        class student { // 父类
            constructor (uname,age) {
                this.uname = uname;
                this.age = age;
                this.btn = document.querySelector('button');
                this.btn.onclick = this.get;
            }
            get() {
                console.log(this.uname);
            }
        }
        var stu = new student('小杰',18);
    </script>
</body>
</html>

注：これは、btnの前に追加して、コンストラクターに入れる必要があります。それ以外の場合、どのインスタンスオブジェクトが呼び出されるかはわかりません。

ボタンをクリックすると、出力が未定義になりますが、これはなぜですか？

通常の機能は、誰が電話をかけるか、誰が私を電話するかによって異なります。これは、それがどのように定義されているか、またはどこで定義されているかとは関係ありません。

以下にstu.get（）を出力すると、これはインスタンスオブジェクトを指します。ボタンをクリックするだけで、getはbtnを指します。

これをget内に印刷して、ボタンがクリックされたときに何が出力されるかを確認します。

getメソッドのこれはbtnボタンを指します。これは、このボタンがそれを呼び出すためです。

一文の要約：コンストラクターのこれはインスタンスオブジェクトを指し、メソッドのこれはメソッドの呼び出し元を指します

最後の質問：ボタンがクリックされたときに「Xiaojie」を印刷したいのですが、どうすればよいですか？

できるよ：

 var that;
class student { // 父类
      constructor (uname,age) {
           that = this;
           this.uname = uname;
           this.age = age;
           this.btn = document.querySelector('button');
           this.btn.onclick = this.get;
      }
      get() {
           console.log(that.uname);
      }
}
var stu = new student('小杰',18);

グローバル変数thatを定義し、これをコンストラクターのそれに割り当てて、そこに格納されているのがcontrucotrのthisになるようにします。

出力結果：

ES6のこれは問題を示しています

おすすめ