Several ways to create objects

Through the Object

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title>01_Object constructor mode </title> </head> <body> <! -- Method 1: Object constructor * Routine: Create an empty Object first, then add attributes/methods dynamically * Application scenario: Do not determine the internal data of the Object at first * Problem: Too many statements --> <script type="text/javascript"> /* Var p = new Object() p = {} var p = new Object() p = { Function (name) {this.name = name} // Test console.log(p.name, p.age) p.setname ('Bob') console.log(p.name, p.age) p.age) </script> </body> </html>Copy the code

Method 2: Object literals

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title>02_ object literals </title> </head> <body> <! -- Method 2: object literal pattern * routine: Create an object with {} and specify properties/methods * Scenario: Start with internal data of the object is determined * Problem: <script type="text/javascript"> var p = {name: 'Tom', age: 12, setName: Function (name) {this.name = name}} // Test console.log(p.name, p.age) p.setname ('JACK') console.log(p.name, p.age) Name: 'Bob', age: 13, setName: 'Bob' function (name) { this.name = name } } </script> </body> </html>Copy the code

Mode 3: Factory mode

  • Method: The factory function creates the object dynamically and returns it.

A function that returns an object is a factory function.

  • Application scenario: Multiple objects need to be created.
  • Problem: Objects don’t have a specific type, they are all Object types.

Because of this problem, the factory model is not used much.

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title>03_ factory mode </title> </head> <body> <! -- Factory mode 3: Factory mode * Routine: Use factory function to create objects dynamically and return them * <script type="text/javascript"> function createPerson(name, Var obj = {name: name, age: age, setName: Function (name) {this.name = name}} return obj} var p1 = createPerson('Tom', Function createStudent(name, price) {var obj = {name: Name, price: price} return obj} var s = createStudent(' 三', 12000)Copy the code

Method 4: Custom constructors

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta charset="UTF-8"> <title>04_ Custom constructor mode </title> </head> <body> <! -- Custom constructor * routine: Custom constructor, create object by new * Application scenario: need to create multiple types of objects * Problem: <script type="text/javascript"> // define type 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) console.log(p1 instanceof Person) function Student(name, price) { this.name = name this.price = price } var s = new Student('Bob', 13000) console.log(s instanceof Student) var p2 = new Person('JACK', 23) console.log(p1, p2) </script> </body> </html>Copy the code

Method four introduces inheritance.

Several ways of inheritance

Inheritance through constructors

The generic call() in the subtype constructor calls the parent type constructor

Prototype chain inheritance

The prototype of a child type is an instance object of the parent type

Combination of inheritance