創建對象的7種寫法 · js技術點

```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body>  <script type="text/javascript"> // 1. 使用Object對象 var person = new Object(); person.name = "Jack"; person.getName = function() { console.log(this.name); } // 調用語法 console.log(person.name); // Jack，或person["name"] person.getName(); // Jack，或person["getName"] </script> <script type="text/javascript"> // 2. 通過字面量來創建 var person = { name: "Jack", getName: function() { console.log(this.name); } } // 調用語法 console.log(person.name); // Jack，或person["name"] person.getName(); // Jack，或person["getName"] </script> <script type="text/javascript"> // 3. 工廠函數 function createPerson(name) { return { name: name, getName: function() { console.log(this.name); } } } // 調用語法 var person = createPerson("Jack"); console.log(person.name); // Jack，或person["name"]; person.getName(); // Jack，或person["getName"]; </script> <script type="text/javascript"> // 4. 構造函數創建 function Person(name) { this.name = name; this.getName = function() { console.log(this.name); } } // 調用語法 var person = new Person("Jack"); console.log(person.name); // Jack，或person["name"] person.getName(); // Jack，或person["getName"]() </script> <script type="text/javascript"> // 5. 構造函數創建，但把共享的屬性/函數放在構造函數外部定義 function Person(name) { this.name = name; this.getName = getName; } function getName() { console.log(this.name); } // 調用語法 var person = new Person("Jack"); console.log(person.name); // Jack，或person["name"] person.getName(); // Jack，或person["getName"]() </script> <script type="text/javascript"> // 6. 將共享的屬性/函數放在原型對象prototype中，這也是最好的方法 function Person(name) { this.name = name; this.getName = function() { console.log(this.name) } } // 將共享的屬性/函數放在prototype原型對象上 Person.prototype.height = "30"; Person.prototype.getHeight = function() { console.log(this.height); } // 調用語法 var person = new Person("Jack"); console.log(person.name); // Jack，或person["name"] person.getName(); // Jack，或person["getName"]() console.log(person.height); // 30，或person["height"] person.getHeight(); // 30，或person["getHeight"]() </script> <script type="text/javascript"> // 7. 更簡單的原型寫法 function Person(name) { this.name = name; this.getName = function() { console.log(this.name) } } Person.prototype = { constructor: Person, height: "30", getHeight: function() { console.log(this.height); } } // 調用語法 var person = new Person("Jack"); console.log(person.name); // Jack，或person["name"] person.getName(); // Jack，或person["getName"]() console.log(person.height); // 30，或person["height"] person.getHeight(); // 30，或person["getHeight"]() </script> </body> </html> ```