JSカスタムオブジェクト

1.オブジェクトとは

1.オブジェクトを指し、特定の物事のオブジェクト、プロパティおよびメソッドからなります

  • 属性:物事の特徴(固有名詞)
  • 方法:物事の振る舞い(一般的な動詞)
  • JSのオブジェクト式の構造がより明確で強力になりました

2.オブジェクトを作成する3つの方法

1.リテラルを使用してオブジェクトを作成します。
オブジェクトリテラル:属性を含む中括弧{}と
キーと値のペアの形式を含むメソッド{}

  • キー:属性名と同等
  • 値:属性値と同等で、任意のタイプの値にすることができます

オブジェクト呼び出し

  • プロパティ呼び出し内のオブジェクトオブジェクト属性名、
  • 別の呼び出し方法があります:オブジェクト['属性名']、引用符を追加
  • オブジェクトメソッド呼び出しオブジェクトメソッド名()、括弧を入れます

コードは次のように示されます

 <script>
        // 1.利用字面量创建对象{}
        // var obj = {};创建了一个空的对象
        var obj = {
                // 属性
                unme: '浩哥',
                age: 20,
                sex: '男',
                // 方法 方法后面跟函数 因为函数就是用来做什么事情的实现什么功能的 
                sayHi: function() {
                    console.log('你好啊对象!!!');
                }
            }
            // 注意点(1)里面的属性或者方法采取键值对的形式 键 属性名 : 值 属性值
            // (2)多个属性用逗号隔开
            // (3)方法冒号后面跟的是匿名函数
            // 2.对象的使用
            // (1)调用对象的属性 采取 对象名.属性名 这个点.我们理解为 的
        console.log(obj.unme); //浩哥
        // (2) 调用属性还有一种方法 对象名['属性名']
        console.log(obj['age']); //20
        // (3) 调用对象的方法 sayHi 对象名.方法名() 别忘记小括号
        obj.sayHi();
    </script>

2.新しいオブジェクトを使用してオブジェクトを作成します

コードは次のように示されます

  <script>
        var obj = new Object(); //创建了一个空的对象
        // 属性
        obj.uname = '浩哥';
        obj.age = 20;
        obj.sex = '男';
        // 方法
        obj.sayHi = function() {
                console.log('你好啊 对象!!!');
            }
            // 注意点
            // (1) 我们利用 等号 = 赋值的方法 添加对象的属性和方法
            // (2) 每个属性和方法之间用 分号结束
            //(3)O要大写
        console.log(obj.uname);
        console.log(obj.age);
        console.log(obj['sex']);
        obj.sayHi();
    </script>

3.コンストラクターを使用してオブジェクトを作成します。
なぜコンストラクターが必要なのですか?

  • 一度にオブジェクトを作成するため、その中のプロパティとメソッドはほとんど同じであり、コピーすることしかできません。したがって、コンストラクターのメソッドを使用して同じコードを繰り返すことができ、この関数をコンストラクターと呼びます。この関数が同じではないため、カプセル化されるのは通常のコードではなく、オブジェクトです
  • コンストラクターは、オブジェクト内の同じプロパティとメソッドのいくつかを抽象化し、それらを関数にカプセル化することです。

コードデモ

 <script>
        //1. 构造函数的语法格式
        // function 构造函数名() {
        //     this.属性 = 值;
        //     this.方法 = function() {};
        // }
        // new 构造函数名()
        // 2.代码演示
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex
            this.sing = function(guitar) { //guitar = 弹吉他
                console.log(guitar);
            }

        }
        var hh = new Star('浩哥', 20, '男')
        console.log(hh.name);
        console.log(hh['age']);
        hh.sing('弹吉他')
        var ldh = new Star('刘德华', 45, '男')
        console.log(ldh.name);
        console.log(ldh['age']);
        ldh.sing('唱歌')
            // 3.注意点
            // (1)构造函数首字母大写
            // (2)构造函数不需要return返回结果
            // (3)调用构造函数 必须使用new
            // (4) 我们只需要 new Star() 调用函数就可以创建一个对象了
            // (5) 属性和方法必须加this.
    </script>

コンストラクターとオブジェクト

  • Stars()などのコンストラクターは、オブジェクトのパブリック部分を抽象化し、それを関数にカプセル化します。通常、特定のカテゴリーを参照します。
  • new Stars()などのオブジェクトの作成は、具体的には特定のオブジェクトを指します。newキーワードを使用してオブジェクトを作成するプロセスは、オブジェクトのインスタンス化とも呼ばれます。

ここに画像の説明を挿入します

3.新しいキーワード実行プロセス

  1. メモリに新しい空のオブジェクトを作成します
  2. この点をこの新しいオブジェクトに向けましょう
  3. コンストラクターでコードを実行して、この新しいオブジェクトにプロパティとメソッドを追加します
  4. この新しいオブジェクトを返します(すべてのコンストラクターで返す必要はありません)

4.オブジェクトをトラバースします

  • for ... inステートメントは、配列またはオブジェクトの属性をループするために使用されます

コードは以下のように表示されます

  <script>
        var obj = {
                unme: '浩哥',
                age: 20,
                sex: '男',
                sayHi: function() {
                    console.log('你好啊对象!!!');
                }
            }
            语法结构
		for (变量 in 对象名字) {
		// 在此执行代码
		}

            // 利用for..in来遍历对象
        for (var k in obj) {
            console.log(k); // k 变量 输出 得到的是 属性名; 注意k 是不需要赋值的
            console.log(obj[k]); // obj[k] 输出得到的是 属性值  注意括号里面是没有引号的
        }
        // 我们使用 for in 里面的变量 喜欢写出 k 或者 key 也可以写成其他的 这只不过是前端人员习惯用的
    </script>

ここに画像の説明を挿入します

V.オブジェクトの概要

  • オブジェクトはコード構造をより明確にすることができます
  • オブジェクト複合データ型オブジェクト
  • エッセンス:オブジェクトは、関連するプロパティとメソッドの順序付けられていないコレクションのセットです。
  • コンストラクターは通常、リンゴなどの特定のカテゴリを指します。色に関係なく、リンゴはまとめてリンゴと呼ばれます。
  • オブジェクトのインスタンス化とは、このリンゴやこの人など、とにかく特定のものを指します。
  • for ... inステートメントは、オブジェクトのプロパティをループするために使用されます

おすすめ

転載: blog.csdn.net/m0_46978034/article/details/109856949