【JavaScript】-オブジェクトを作成するいくつかの方法

1.組み込みのコンストラクターの作成

次の方法で直接new Object()作成。

//在js中，对象有动态特性，可以随时的给一个对象增加属性或者删除属性。
let person = new Object()
person.name = 'Jack'
person.age = 18
​
person.sayName = function () {
  console.log(this.name)
}

短所：面倒で、すべてのプロパティを追加する必要があります。

2.オブジェクトリテラルの作成

let person = {
  name: 'Jack',
  age: 18,
  sayName: function () {
    console.log(this.name)
  }
}

短所：複数のオブジェクトをバッチで生成する場合はどうなりますか？コードは冗長です

3.単純な改善：ファクトリ機能

// 我们可以写一个函数，解决代码重复问题：
function createPerson (name, age) {         // 第一种写法
  return {
    name: name,
    age: age,
    sayName: function () {
      console.log(this.name)
    }
  }
}
// 然后生成实例对象：
let p1 = createPerson('Jack', 18)
let p2 = createPerson('Mike', 18)
​
​
 function setObj(name, age) {           // 第二种写法
      let obj = new Object()
      obj.name = name
      obj.age = age
      return obj
    }
​
let obj1 = setObj('jack', 20)
console.log(obj1);

短所：ただし、オブジェクト認識の問題は解決されず、作成されたオブジェクトのタイプはObjectです。

 

4.改善を続ける：コンストラクター

コンストラクターは、オブジェクトをインスタンス化する関数でありnew、。

function Person (name, age) {
  this.name = name
  this.age = age
  this.sayName = function () {
    console.log(this.name)
  }
}
​
var p1 = new Person('Jack', 18)
p1.sayName() // => Jack
​
var p2 = new Person('Mike', 23)
p2.sayName() // => Mike

Personインスタンスを作成するには、new演算子を使用する必要があります。この方法でコンストラクターを呼び出すと、次の4つの手順が実行されます。newは正確に何をしますか。

1. 新しいオブジェクトを作成します（コンストラクターはオブジェクトを初期化するためのものです）

2. コンストラクターのスコープを新しいオブジェクトに割り当てます（作成されたオブジェクトのアドレスをコンストラクターでこれに割り当てます）

3. コンストラクターでコードを実行します（コンストラクターを呼び出して、オブジェクトにメンバーを追加します）

4. 新しいオブジェクトを返します（このアドレスをobjに返します）

コンストラクターは、意味を成すためnewにます。コンストラクターの最初の文字は通常大文字です。

気をつけて：

1.戻り値を手動で追加した場合、それが基本型であれば、コンストラクターの機能には影響しません。

2.オブジェクトが返されると、上書きされます

3. newを削除すると、通常の機能になります

コンストラクターのデメリット

コンストラクターを使用する最大の利点は、オブジェクトを作成する方が便利なことですが、メモリを浪費するという問題もあります。

function Person (name, age) {
  this.name = name
  this.age = age
  this.type = 'human'
  this.say = function () {
    console.log('hello ' + this.name)
  }
}
​
var person1 = new Person('lpz', 18)
var person2 = new Person('Jack', 16)
console.log(person1.say === person2.say) // => false

解決策：同じsayメソッド

1. メモリを浪費することの欠点を解決する

2. しかし污染全局变量、の

  // 提前将say 声明好
    function say() {
      console.log(this.name);
    }
    function createStudent(name, age) {
      this.name = name;
      this.age = age;
      this.say = say
    }

    const obj = new createStudent("悟能", 83);
    const obj1 = new createStudent("悟能1", 84);

    console.log(obj.say === obj1.say); // true