JSオブジェクト、あなたは知識システムを知っていなければなりません

このシリーズは、以下のトピックから要約します。


  1. この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
    この記事はCSDNおよびナゲットで初めて公開されました。

    CSDNホームページ: blog.csdn.net/LY_code
    ナゲットのホームページ: juejin.im/user/5b220d …
    間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝


  2. この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
    この記事はCSDNおよびナゲットで初めて公開されました。

    CSDNホームページ: blog.csdn.net/LY_code
    ナゲットのホームページ: juejin.im/user/5b220d …
    間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝


  3. この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
    この記事はCSDNおよびナゲットで初めて公開されました。

    CSDNホームページ: blog.csdn.net/LY_code
    ナゲットのホームページ: juejin.im/user/5b220d …
    間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝


  4. この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
    この記事はCSDNおよびナゲットで初めて公開されました。

    CSDNホームページ: blog.csdn.net/LY_code
    ナゲットのホームページ: juejin.im/user/5b220d …
    間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝

とりあえず、上記の4つのトピックを要約して、パート2:Object Advancedを始めます。下の写真は私の本の概要です。

js的对象学习大纲

2.1 对象的创建模式

  • 方法1:オブジェクトコンストラクタモード


    • この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
      この記事はCSDNおよびナゲットで初めて公開されました。

      CSDNホームページ: blog.csdn.net/LY_code
      ナゲットのホームページ: juejin.im/user/5b220d …
      間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝


    • この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
      この記事はCSDNおよびナゲットで初めて公開されました。

      CSDNホームページ: blog.csdn.net/LY_code
      ナゲットのホームページ: juejin.im/user/5b220d …
      間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝


    • この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
      この記事はCSDNおよびナゲットで初めて公開されました。

      CSDNホームページ: blog.csdn.net/LY_code
      ナゲットのホームページ: juejin.im/user/5b220d …
      間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝

      // 先创建空Object对象
        var p = new Object()
        p = {} //此时内部数据是不确定的
        // 再动态添加属性/方法
        p.name = 'Tom'
        p.age = 12
        p.setName = function (name) {
          this.name = name
        }
    
        //测试
        console.log(p.name, p.age)  //Tom 12
        p.setName('Bob')
        console.log(p.name, p.age)  //Bob 12
    
  • 方法2:オブジェクトリテラルモード


    • この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
      この記事はCSDNおよびナゲットで初めて公開されました。

      CSDNホームページ: blog.csdn.net/LY_code
      ナゲットのホームページ: juejin.im/user/5b220d …
      間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝


    • この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
      この記事はCSDNおよびナゲットで初めて公開されました。

      CSDNホームページ: blog.csdn.net/LY_code
      ナゲットのホームページ: juejin.im/user/5b220d …
      間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝


    • この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
      この記事はCSDNおよびナゲットで初めて公開されました。

      CSDNホームページ: blog.csdn.net/LY_code
      ナゲットのホームページ: juejin.im/user/5b220d …
      間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝

     var p = {
          name: 'Tom',
          age: 12,
          setName: function (name) {
            this.name = name
          }
        }
    
        //测试
        console.log(p.name, p.age)  //Tom 12
        p.setName('JACK')
        console.log(p.name, p.age)  //JACK 12
    
        var p2 = {  //如果创建多个对象代码很重复
          name: 'Bob',
          age: 13,
          setName: function (name) {
            this.name = name
          }
        }
    
  • 方法3:ファクトリモード(相対使用)


    • この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
      この記事はCSDNおよびナゲットで初めて公開されました。

      CSDNホームページ: blog.csdn.net/LY_code
      ナゲットのホームページ: juejin.im/user/5b220d …
      間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝


    • この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
      この記事はCSDNおよびナゲットで初めて公開されました。

      CSDNホームページ: blog.csdn.net/LY_code
      ナゲットのホームページ: juejin.im/user/5b220d …
      間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝


    • この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
      この記事はCSDNおよびナゲットで初めて公開されました。

      CSDNホームページ: blog.csdn.net/LY_code
      ナゲットのホームページ: juejin.im/user/5b220d …
      間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝

    function createPerson(name, age) { //返回一个对象的函数一般称为===>工厂函数
          var obj = {
            name: name,
            age: age,
            setName: function (name) {
              this.name = name
            }
          }
          return obj
        }
    
        // 创建2个人
        var p1 = createPerson('Tom', 12)
        var p2 = createPerson('Bob', 13)
        // p1和p2是Object类型
    
        function createStudent(name, price) {
          var obj = {
            name: name,
            price: price
          }
          return obj
        }
        var s = createStudent('张三', 12000)
        // s也是Object
    
  • 方法4:カスタムコンストラクタモード


    • この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
      この記事はCSDNおよびナゲットで初めて公開されました。

      CSDNホームページ: blog.csdn.net/LY_code
      ナゲットのホームページ: juejin.im/user/5b220d …
      間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝


    • この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
      この記事はCSDNおよびナゲットで初めて公開されました。

      CSDNホームページ: blog.csdn.net/LY_code
      ナゲットのホームページ: juejin.im/user/5b220d …
      間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝


    • この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
      この記事はCSDNおよびナゲットで初めて公開されました。

      CSDNホームページ: blog.csdn.net/LY_code
      ナゲットのホームページ: juejin.im/user/5b220d …
      間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝

       //定义类型,Person类型
        function Person(name, age) {
          this.name = name
          this.age = age
          this.setName = function (name) {
            this.name = name
          }
        }
        var p1 = new Person('Tom', 12)
        p1.setName('Jack')
        console.log(p1.name, p1.age) //Jack 12
        console.log(p1 instanceof Person)  //true
    
        function Student (name, price) {
          this.name = name
          this.price = price
        }
        var s = new Student('Bob', 13000)
        console.log(s instanceof Student) //true
    
        var p2 = new Person('JACK', 23)
        console.log(p1, p2) //都返回Person类型对象
    
  • 方法5:コンストラクタ+プロトタイプの組み合わせモード


    • この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
      この記事はCSDNおよびナゲットで初めて公開されました。

      CSDNホームページ: blog.csdn.net/LY_code
      ナゲットのホームページ: juejin.im/user/5b220d …
      間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝


    • この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
      この記事はCSDNおよびナゲットで初めて公開されました。

      CSDNホームページ: blog.csdn.net/LY_code
      ナゲットのホームページ: juejin.im/user/5b220d …
      間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝

    function Person(name, age) { //在构造函数中只初始化属性
          this.name = name
          this.age = age
        }
        //方法放在原型对象里,就不会重复了。减少内存压力。
        Person.prototype.setName = function (name) {
          this.name = name
        }
    
        var p1 = new Person('Tom', 23)
        var p2 = new Person('Jack', 24)
        console.log(p1, p2) //都返回一个Person类型对象
    

2.2 对象的继承模式

2.2.1方法1:プロトタイプチェーンの継承


  • この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
    この記事はCSDNおよびナゲットで初めて公開されました。

    CSDNホームページ: blog.csdn.net/LY_code
    ナゲットのホームページ: juejin.im/user/5b220d …
    間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝


  • この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
    この記事はCSDNおよびナゲットで初めて公開されました。

    CSDNホームページ: blog.csdn.net/LY_code
    ナゲットのホームページ: juejin.im/user/5b220d …
    間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝

一般的な手順の手順は次のとおりです。

  function Parent(){}//父 构造函数
  Parent.prototype.test = function(){};//在父的原型对象上添加test方法
  function Child(){}// 子 构造函数
  Child.prototype = new Parent(); // 子类型的原型指向父类型实例
  Child.prototype.constructor = Child;//最好也把constructor也重新置给Child构造函数
  var child = new Child(); //有test()

原型链继承图解

给个案例分析:

    //父类型
    function Supper() {
      this.supProp = 'Supper property'
    }
    Supper.prototype.showSupperProp = function () {
      console.log(this.supProp)
    }

    //子类型
    function Sub() {
      this.subProp = 'Sub property'
    }

    // 子类型的原型为父类型的一个实例对象
    Sub.prototype = new Supper()
    // 让子类型的原型的constructor指向子类型(构造函数)
    Sub.prototype.constructor = Sub
    Sub.prototype.showSubProp = function () {
      console.log(this.subProp)
    }

    var sub = new Sub()
    sub.showSupperProp()  //Supper property
    sub.showSubProp()  //Sub property

    console.log(sub)  // 返回Sub类型对象

ケース図:

原型链内存

2.2.2方法2:コンストラクタの継承を借用する(false)

  • 套路:

    • この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
      この記事はCSDNおよびナゲットで初めて公開されました。

      CSDNホームページ: blog.csdn.net/LY_code
      ナゲットのホームページ: juejin.im/user/5b220d …
      間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝


    • この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
      この記事はCSDNおよびナゲットで初めて公開されました。

      CSDNホームページ: blog.csdn.net/LY_code
      ナゲットのホームページ: juejin.im/user/5b220d …
      間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝


    • この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
      この記事はCSDNおよびナゲットで初めて公開されました。

      CSDNホームページ: blog.csdn.net/LY_code
      ナゲットのホームページ: juejin.im/user/5b220d …
      間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝


  • この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
    この記事はCSDNおよびナゲットで初めて公開されました。

    CSDNホームページ: blog.csdn.net/LY_code
    ナゲットのホームページ: juejin.im/user/5b220d …
    間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝

ケーススタディをする:

    function Person(name, age) {
      this.name = name
      this.age = age
    }
    function Student(name, age, price) {
      //为了获得父类型的Person的属性继承
      Person.call(this, name, age)  // 借调。相当于: this.Person(name, age)
      /*this.name = name
      this.age = age
	  以上这两行代码就可不必写了
	 */
      this.price = price
    }

    var s = new Student('Tom', 20, 14000)
    console.log(s.name, s.age, s.price) //Tom 20 14000

2.2.3方法3:プロトタイプチェーン+借用コンストラクタの組み合わせ継承(通常使用)


  1. この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
    この記事はCSDNおよびナゲットで初めて公開されました。

    CSDNホームページ: blog.csdn.net/LY_code
    ナゲットのホームページ: juejin.im/user/5b220d …
    間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝


  2. この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
    この記事はCSDNおよびナゲットで初めて公開されました。

    CSDNホームページ: blog.csdn.net/LY_code
    ナゲットのホームページ: juejin.im/user/5b220d …
    間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝

ケーススタディをする:

    //类似于父函数
    function Person(name, age) {
      this.name = name
      this.age = age
    }
    Person.prototype.setName = function (name) {
      this.name = name
    }
   //类似于子函数
    function Student(name, age, price) {
      Person.call(this, name, age)  // 为了得到属性(属性的继承)
      this.price = price
    }
    Student.prototype = new Person() // 为了能看到父类型的方法(方法的继承--通过原型链)
    Student.prototype.constructor = Student //修正constructor属性
    Student.prototype.setPrice = function (price) {
      this.price = price
    }

    var s = new Student('Tom', 24, 15000)
    s.setName('Bob');
    s.setPrice(16000);
    console.log(s.name, s.age, s.price) //Bob 24 16000

2.2.4方法4:ES6クラスの継承

class キーワードはES6で導入されましたが、それ以上のものは構文上の糖であり、本質的に寄生組み合わせの継承の継承です。それは比較的完璧な継承の方法です。

寄生的な組み合わせの継承の中心となるのは、次の点です。(写真を読みながら本文を参照)
1.サブクラスコンストラクタの __proto__ は、親クラスの静的メソッドを継承して、親クラスのコンストラクタを指します。
2.サブクラスコンストラクタ _proto__ prototype は、親クラスのメソッドを継承し、親クラスコンストラクタの prototype を指します。 Tr
[1と2は、下の図でオレンジ色で示されている2行です。 ]
3.サブクラスのコンストラクタは、親クラスのコンストラクタのプロパティを継承します。 super で呼び出されます(ES5では call または apply を使用して引数を呼び出します)。

寄生组合继承

看一个案例分析:

class Animal {

  constructor(name) {
    this.speed = 0;
    this.name = name;
  }

  run(speed) {
    this.speed += speed;
    alert(`${this.name} runs with speed ${this.speed}.`);
  }

  stop() {
    this.speed = 0;
    alert(`${this.name} stopped.`);
  }

}


// Inherit from Animal
class Rabbit extends Animal {
  hide() {
    alert(`${this.name} hides!`);
  }
}


let rabbit = new Rabbit("White Rabbit");

rabbit.run(5); // White Rabbit runs with speed 5.
rabbit.hide(); // White Rabbit hides!

ご覧のとおり、 extend キーワードは実際には Rabbit.prototype [[proto]] を追加します。 Animal.prototype

原型与原型链

所以现在 rabbit 既可以访问它自己的方法,也可以访问 Animal 的方法。

2.3 new对象

私たちが書いたものの例を見てください。

function Person() {
    this.name = name
    this.age  = age
}
 
var person = new Person()

実際、新しいオブジェクトは何をするのでしょうか。完全に実行されたコード:

function Person() {
    var this = {
        __proto__: Person.prototype
    }
    this.name = name
    this.age  = age

    return this
}

var person = new Person()

したがって、新しいオブジェクトには次の手順があります。


  • この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
    この記事はCSDNおよびナゲットで初めて公開されました。

    CSDNホームページ: blog.csdn.net/LY_code
    ナゲットのホームページ: juejin.im/user/5b220d …
    間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝


  • この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
    この記事はCSDNおよびナゲットで初めて公開されました。

    CSDNホームページ: blog.csdn.net/LY_code
    ナゲットのホームページ: juejin.im/user/5b220d …
    間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝


  • この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
    この記事はCSDNおよびナゲットで初めて公開されました。

    CSDNホームページ: blog.csdn.net/LY_code
    ナゲットのホームページ: juejin.im/user/5b220d …
    間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝


  • この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
    この記事はCSDNおよびナゲットで初めて公開されました。

    CSDNホームページ: blog.csdn.net/LY_code
    ナゲットのホームページ: juejin.im/user/5b220d …
    間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝


この文書はLu Yaのための原本であり、自由に複製することができますが、原本のリンクをそのままにして出典を明記してください。 Tr
この記事はCSDNおよびナゲットで初めて公開されました。

CSDNホームページ: blog.csdn.net/LY_code
ナゲットのホームページ: juejin.im/user/5b220d …
間違いがある場合は、間に合うようにして一緒に勉強し、一緒に進歩してください。ありがとうございます。 😝😝😝

元のリンク