JavaScript supports Object Oriented Programming (OOP) Programming, object-oriented code encapsulation and instantiation of the Object and other operations are very elegant, it and closure combined with self-executing functions to achieve encapsulation is very different, to master advanced front-end students must master.

I. Definition of objects:

An unordered collection of attributes that can contain base values, objects, or functions. This is the definition given by ECMAScript-262.

An object is a collection of unordered key-value pairs. Its value can be a basic data type or a reference data type. Its key is the index of a value.

The unordered feature is easier to understand if compared to arrays, which can hold different types of data, but arrays are indexed by subscript, and the location of the elements is important. Object disorder does not care about the order of key-value pairs in the object, it only accesses the specific value through the object’s key.

Object creation:

Object literals:

var obj = {};
Copy the code

Object literals are the most concise and intuitive way to express them.

The new operator + Object() creates:

var obj = new Object(a);Copy the code

New is an operator that is usually followed by a constructor, or if Object(), a new Object is created.

This is just creating an empty object, so of course we have to add some properties and methods to it.

Add properties and methods via dot operator assignment:

var obj = {};
obj.value = 'local';
obj.getValue = function() {
  return this.value;
}
Copy the code

Alternatively, write it as key: value, separated by commas:

var obj = {
  value: 'local'.getValue: function() {
    return this.value; }}Copy the code

Object properties can be accessed by:

Object’s dot operator + property

obj.value
Copy the code

Or the string value of the key passed in brackets

obj['value']
Copy the code

The value in parentheses can be a variable, an array, an object, or a function:

var key1 = 'key1';
var key2 = [ 'key2' ];
var key3 = { value: 'key2' };
function key4(){ return 'key4' };

var obj = {};
obj[key1] = key1;
obj[key2] = key2;
obj[key3] = key3;
obj[key4] = key4;

console.log(obj);
/ / {key1: "key1, key2: Array (1), [object object] : {... }, function key4(){return 'key4'}: ƒ}
Copy the code

This is an amazing feature that is used in many situations in business development.

Iii. Factory Model:

Sometimes we want to create two objects with the same properties and methods. We know that objects cannot be copied directly because they are passed by reference, so we define two objects with the same properties as follows:

var obj1 = {
  value: 'value1'.getValue: function() {
    return this.value
  }
};
var obj2 = {
  value: 'value2'.getValue: function() {
    return this.value
  }
}
Copy the code

It doesn’t make sense to define multiple objects in which the same properties and methods are defined many times.

We can solve this problem with the factory pattern (a design pattern).

var createObject = function(value) {
  var obj = new Object(a); obj.value = value; obj.getValue =function() {
    return this.value;
  }
  return obj;
}
var obj1 = createObject('value1');
var obj2 = createObject('value2');
Copy the code

CreateObject can be thought of as a template method, passing it specific parameters. It creates a new Object(instance) from new Object(), which solves the problem of Object template reuse.

There is a drawback to this approach, however, that it cannot determine the type of the instance (which template it was created from)

var createObject1 = function() { 1 / / template
  return new Object(a); }var createObject2 = function() { 2 / / template
  return new Object(a); }var obj1 = createObject1();
var obj2 = createObject2();
console.log( obj1 instanceof Object ); // true
console.log( obj2 instanceof Object ); // true
Copy the code

The only way to know that it was created by Object is through the instanceof operator. We use constructors to solve this problem.

Constructor:

If the new operator is followed by an ordinary function, the function becomes unusual; it is called a constructor.

function Person(name){
  this.name = name;
  this.getName = function() {
    return this.name; }};var p1 = new Person('sonic');
var p2 = new Person('water');
console.log(p1.getName()); // 'sonic'
console.log(p2.getName()); // 'water'
console.log(p1 instanceof Person);
Copy the code

The new operator changes the direction of this inside the constructor. How it affects the direction of this inside the constructor will be explained later.

Instanceof indicates that the instance was created using the Person template, i.e. the type of the instance is known.

Now there is a new problem. Every time an instance object is created, the getName method of that instance is allocated new memory space.

console.log( p1.getName === p2.getName ); // false
Copy the code

If 100 objects are instantiated, the same logical getName method is allocated 100 memory addresses. This consumption is unnecessary; we just need to use the logic of the getName method itself. The stereotype property of constructors can solve the reuse problem of methods in constructors. By the way, the factory model doesn’t solve this problem either.

Five, prototype:

JS gives functions the prototype property, which points to an object we call a prototype.

Mounting methods on the constructor’s Prototype property only makes sense if a function is treated as a constructor.

function Person(name){
  this.name = name;
};
Person.prototype.getName = function() {
  return this.name;
}
var p1 = new Person('sonic');
var p2 = new Person('water');
console.log(p1.getName()); // 'sonic'
console.log(p2.getName()); // 'water'
console.log( p1.getName === p2.getName ); // true
Copy the code

If the getName() method is not defined inside the Person constructor, the instance will look for the getName() method on the Person prototype property.

The method defined on the Prototype property will be common to all instances, addressing the problem of allocating memory savings to methods when we create countless instances.

Conclusion:Object oriented content is very much, this article first introduces some object related content, then will introduce the prototype, prototype chain, construction attribute, object inheritance and encapsulation.