JS object classification

The introduction of

The following code is to find the perimeter and area of a square

let square = { width: 5, getArea() { return this.width * this.width; }, getLength() { return this.width * 4; }};Copy the code

What about the perimeter and the area of a lot of squares? You’d be an idiot to write code down here

let square = {
  width: 5,
  getArea(){ 
    return this.width * this.width 
  },
  getLength(){
    return this.width * 4
  }
}
let square2 = {
  width: 6,
  getArea(){ 
    return this.width * this.width 
  },
  getLength(){
    return this.width * 4
  }
}
.....
Copy the code

Let’s optimize it and do it with the for loop

let squareList = []; for (let i = 0; i < 12; i++) { squareList[i] = { width: 5, getArea() { return this.width * this.width; }, getLength() { return this.width * 4; }}; }Copy the code

But not all sides are 5, so it’s a waste of memory to write code like this

let squareList = []; let widthList = [5, 6, 5, 6, 5, 6, 5, 6, 5, 6, 5, 6]; for (let i = 0; i < 12; i++) { squareList[i] = { width: widthList[i], getArea() { return this.width * this.width; }, getLength() { return this.width * 4; }}; }Copy the code

So let’s draw the memory diagram as follows

Continue to refine the code by putting perimeter and area functions on the prototype

let squareList = []; let widthList = [5, 6, 5, 6, 5, 6, 5, 6, 5, 6, 5, 6]; let squarePrototype = { getArea() { return this.width * this.width; }, getLength() { return this.width * 4; }}; for (let i = 0; i < 12; i++) { squareList[i] = Object.create(squarePrototype); squareList[i].width = widthList[i]; }Copy the code

The squre created is too fragmented, so keep optimizing

let squareList = []; let widthList = [5, 6, 5, 6, 5, 6, 5, 6, 5, 6, 5, 6]; Function createSquare(width) {// This function is called let obj = object.create (squarePrototype); // Create an empty object with squarePrototype obj.width = width; return obj; } let squarePrototype = { getArea() { return this.width * this.width; }, getLength() { return this.width * 4; }}; for (let i = 0; i < 12; i++) { squareList[i] = createSquare(widthList[i]); // Create a square. }Copy the code

The squarePrototype and createSquare functions are still scattered and will continue to be optimized

let squareList = []; let widthList = [5, 6, 5, 6, 5, 6, 5, 6, 5, 6, 5, 6]; function createSquare(width) { let obj = Object.create(createSquare.squarePrototype); // Use it before you define it. NO obj.width = width; return obj; } createSquare. SquarePrototype = {/ / put the prototype on function, combining closely enough? getArea() { return this.width * this.width; }, getLength() { return this.width * 4; }, constructor: constructor, // make it easier to find the constructor from the prototype}; for (let i = 0; i < 12; i++) { squareList[i] = createSquare(widthList[i]); console.log(squareList[i].constructor); // Constructor lets you know who constructed the object: who is your mother? }Copy the code

Rewrite code (function and prototype combined)

let squareList = [];
let widthList = [5, 6, 5, 6, 5, 6, 5, 6, 5, 6, 5, 6];
function Square(width) {
  this.width = width;
}
Square.prototype.getArea = function () {
  return this.width * this.width;
};
Square.prototype.getLength = function () {
  return this.width * 4;
};
for (let i = 0; i < 12; i++) {
  squareList[i] = new Square(widthList[i]);
  console.log(squareList[i].constructor);
}
Copy the code

A constructor is a function that constructs an object
All JS functions are born with the prototype attribute constructor

function Square(width) {
  this.width = width;
}
Square.prototype.getArea = function () {
  return this.width * this.width;
};
Square.prototype.getLength = function () {
  return this.width * 4;
};
let squre = new Squre(5)
}
Copy the code

new X

New X() does four things automatically, X is a function in uppercase

Automatically create empty objects
Automatically associate a stereotype with an empty object, with the stereotype address specified asX.prototype
Automatically treats empty objects asthisKeyword run constructor
automaticreturn this

Constructor X

The X function itself is responsible for adding attributes to the object itself
Like the one abovewidth
X.prototypeObject is responsible for holding the shared properties of the object
Like the one abovegetArea 和 getLength

Code specification

case

All constructors are capitalized
All constructed objects begin with a lowercase letter

The part of speech

newThe following functions use the noun form
Other functions usually start with a verb

How do we know how many arguments a constructor needs to pass? Such as:

Let arr1 = new Array(3) // Empty Array of length 3 let arr2 = new Array(3,5) // the first element is 3, the second element is 5Copy the code

How do you determine the prototype of an object

let obj = new Object()The prototype isObject.prototype
let arr = new Array()The prototype isArray.prototype
let square = new Square()The prototype isSquare.prototype
let fn = new Function()The prototype isFunction.prototype
X.prototypeI just saved the address of the prototype

Prototype formula

Object.__proto__ = constructor. Prototype let x = {}Excuse me,XWhat is the archetype of

let square = new Square(5)What is the prototype of SQure?squre.__proto__ = = =Squre.prototype

Object.prototypeWhich function constructed it?

I don’t know

Object.prototypeWhat is the archetype of?

There is no prototype

Object.prototype.__proto__What is?

Object.prototype.__proto__ = null

The circumference and area of a circle

function Circle(radius){ this.radius = radius } Circle.prototype.getArea = function(){ return Math.pow(this.radius,2) * Is Math. PI / / Math. PI PI} Circle. The prototype. The getLength = function () {return this. The radius * 2 * math.h PI} let Circle = new Circle(5)Copy the code

Class to rewrite the circle

class Circle{
  constructor(radius){
    this.radius = radius
  } 
  getArea(){ 
    return Math.pow(this.radius,2) * Math.PI  
  }
  getLength(){
    return this.radius * 2 * Math.PI
  }
}
let circle = new Circle(5)
circle.radius
circle.getArea()
circle.getLength()
Copy the code

The perimeter and area of a rectangle

function Rect(width, height){ this.width = width this.height = height } Rect.prototype.getArea = function(){ return this.width * this.height } function(){return (this.width + this.height) * 2} let react = new Rect(4,5)Copy the code

Class override rectangle

class Rect{
  constructor(width, height){ 
    this.width = width
    this.height = height
  }
  getArea(){ 
    return this.width * this.height  
  }
  getLength(){
    return (this.width + this.height) * 2
  }
}
let react = new Rect(4,5)
rect.width
rect.height
rect.getArea()
rect.getLength()
Copy the code

Understand class again

Function Person(name,age){this.name = name this.age =age} person.prototype.sayhi ()function{console.log(' hello, } let person = new person (' WBS ', 18) person.name === 'WBS' // true person.age === 18 // true person.sayhi () // Print "Hello, WBS let person2 = new Person('jack', 19) person2.name === 'jack' // true person2.age === 19 // true person2.sayhi () // Print "Hello, my name is Jack"Copy the code

Class Person {constructor(name,age){this.name = name this.age = age}} sayHi(){console.log(){constructor(name,age){this.name = name this. } let person = new person (' WBS ', 18) person.name === 'WBS' // true person.age === 18 // true person.sayhi () // Print "Hello, Let person2 = new Person('jack', 19) person2.name === 'jack' // true person2.age === 19 // true person2.sayhi () // Print "Hello, my name is Jack"Copy the code

Objects need to be categorized

One reason for

There are many objects with the same properties and behaviors that need to be grouped together
Such assquarel 和 square2
This makes it easy to create similar objects

Reason two

But there are many objects that have other properties and behaviors
So you need different categories
Such asSquare / Circle / RectIt’s just different categories
Array / FunctionIt’s a different category
whileObjectThe objects that are created are the most featureless objects

Types and classes

Type is the classification of JS data, there are seven types (four bases, two empty objects and one object)
Classes are categories of objects, and there are countless kinds

JS Ultimate question

Who constructed window?

Window is constructed by window

window.__proto__ === Window.prototype

Who constructs window.object?

window.Function
All function objects arewindow.Functionconstructed

Who constructed window.function?

window.FunctionIs to construct oneself
The browser is constructedFunction, and then specifies that its constructor is itself