Weekly Knowledge Summary (2019/8/26-2019/8/30)

Keywords: Javascript Attribute

1. How js creates objects
Reference link: https://www.cnblogs.com/juggd...
(1) new operator + object to create objects

var person = new Object();
person.name = 'zhangsan'
person.setName = function(){
   alert(this.name)
}

(2) Literally creating objects

var person = {
  name: 'zhangsan',
  setName: function(){
     alert(this.name)
  }
}

These two methods generate a lot of duplicate code when creating multiple objects using the same interface. Factory mode can be used.
(3) Factory Model

function createPerson(name, age){
  var o = new Object();
  o.name = name;
  o.age = age;
  o.setName = function(){
      alert(this.name)
  }
  return o;
}

Factory pattern solves the problem of repeatedly instantiating multiple objects, but it does not solve the problem of object recognition (but factory pattern can not identify the type of object, because all of them are Objects, unlike Date, Array and so on. In this case, all of them are o objects, and the type of object is Object, so the constructor module appears. Type)
(4) Constructor pattern

function Person(name, age){
   this.name = name;
   this.age = age;
   this.setName = function(){
       alert(this.name)
   }
}

var person1 = new Person("lisi",21,["lida","lier","wangwu"]);
var person2 = new Person("lisi",21,["lida","lier","lisi"]);
console.log(person1 instanceof Object); //true
console.log(person1 instanceof Person); //true
console.log(person2 instanceof Object); //true
console.log(person2 instanceof Person); //true
console.log(person1.constructor);      //The constructor attribute returns a reference to the array and function that created this object

Compared with the factory model, there are the following differences:

1. Objects are not explicitly created

2. Assigning attributes and methods directly to this object

3. No return statement

Call the constructor step in this way{

1. Create a new object

2. Assign the scope of the constructor to a new object (point this to the new object)

3. Execute constructor code (add attributes to this new object)

4. Return a new object

}

As you can see, the constructor knows where it comes from (you can see from instanceof that it is both an instance of Object and an instance of Person)

Constructors also have their drawbacks. Each instance contains different instances of Function (the method in the constructor does the same thing, but the instantiation results in different objects, the method is a function, and the function is an object).
So the prototype model was created.
(5) Prototype Model

function Person(){
}

Person.prototype.name = 'lisi'
Person.prototype.age = 21
var person1 = new Person();        //Create an instance person1
console.log(person1.name);        //lisi

var person2 = new Person();        //Create instance person2
person2.name = "wangwu";
person2.family = ["lida","lier","lisi"];
console.log(person2); 

The advantage of the prototype pattern is that all object instances share its attributes and methods (so-called common attributes), and you can also set the attributes (methods) of the instance itself (so-called private attributes) as code does.
(6) Mixed Patterns (Constructor Patterns + Prototype Patterns)
Constructor patterns are used to define instance attributes, and prototype patterns are used to define methods and shared attributes.

function Person(name, age){
   this.name = name;
   this.age = age;
}
Person.prototype = {
     constructor: Person,  //Each function has a prototype attribute, which points to the prototype object of the function. The prototype object has a constructor attribute, which is a pointer to the function where the prototype attribute is located.
     say: function(){
         alert(this.name);
     }
 }

 var person1 = new Person("lisi",21,["lida","lier","wangwu"]);
 console.log(person1);
 var person2 = new Person("wangwu",21,["lida","lier","lisi"]);
 console.log(person2);

It can be seen that the hybrid mode shares references to the same method and ensures that each instance has its own private attributes. Maximize memory savings
(7)Object.create
new Object() creates objects through constructors, adding attributes under its own instance.
Another way to create objects in Object.create() es6 is to inherit an object and add attributes under the prototype.

const person = {
  isHuman: false,
  printIntroduction: function () {
    console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
  }
};

const me = Object.create(person);

me.name = "Matthew"; // "name" is a property set on "me", but not on "person"
me.isHuman = true; // inherited properties can be overwritten

me.printIntroduction();
// expected output: "My name is Matthew. Am I human? true"

Posted by EnDee321 on Thu, 29 Aug 2019 22:03:04 -0700