new

Example 1: Write a square program

let square = {
	width: 5.getArea(){
	return this.width * this.width
	},
	getLength(){
	return this.width * 4}}// Three attributes of a square: width, Area, and Length
Copy the code

Case 2: Write a twelve Square program (write the program twelve times)

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}}let square3 = { ...
// This is a waste of time and is strongly not recommended
Copy the code

Case 3: Useforcycle

let squareList = []	// indicates an empty array
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

Case 4: Not all sides are 5

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}}}GetArea and getLength are stored 24 times, which means 22 times more.
Copy the code

Case 5: Put objects into prototypes

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}}// Put getArea and getLength into squarePrototype
for(let i = 0; i<12; i++){
	squareList[i] = Object.create(squarePrototype)	// Create an object whose prototype is squarePrototype
	squareList[i].width = widthList[i]	// Add a width to the object
}
// The code to create square is too scattered
Copy the code

Case 6: Pull away to the function

let squareList = []
let widthList = [5.6.5.6.5.6.5.6.5.6.5.6]
function createSquare(width){ // This function is called a constructor
	let obj = Object.create(squarePrototype)	// Create an empty object using 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])
}
Copy the code

Constructor: A function that can construct an object

Case 7: Stereotype and constructor composition

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)
	obj.width = width
	return obj
}
createSquare.squarePrototype = { // Put the prototype on the function
	getArea(){
		return this.width * this.width
	},
	getLength(){
		return this.width * 4
	}
	constructor: createSquare // Make it easy to find the constructor through the prototype
}
for(let i = 0; i<12; i++){
	squareList[i] = createSquare(widthList[i])
	console.log(squareList[i].constructor)
}
Copy the code

Case 8: UsenewThe operator

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

prototype

  • Each function has a Prototype attribute
  • Each prototype has a constructor attribute
  • All constructor attributes store the address of the corresponding function as soon as they are born
  • If a function is not a constructor, it still has the Prototype property, but that property is not currently useful. Right
  • If an object is not a function, it will generally have no prototype property, but it will always have a proto property

Conclusion:

1. New does things automatically
  • Automatically create empty objects
  • Automatically associates empty objects with a prototype address of X.prototype. Such as:let obj = new Object()The prototype ofObject.portotype.
  • The constructor automatically runs an empty object as this keyword
  • Automatic return this
2. Constructor X
  • The X function itself is responsible for adding attributes to the object itself
  • The x. protoType object is responsible for protecting the common attributes of the object
3. code specification
  • All constructors (functions that specifically create objects) begin with a capital letter.
  • All constructed objects begin with a lowercase letter.
  • newThe following functions use the noun form. Such asNew Person(), New Object().
  • Other functions usually start with a verb. Such asCreateSquare (5), the createElement method (' div ').
4. Prototype formula
  • Object.__porto__ === constructor. Prototype
  • “Prototype of X” is equivalent to “object to which x. prototype refers”

class

Objects need to be categorized

  • Many objects have the same properties and behaviors, so they need to be classified into the same class, so that it is convenient to create similar objects, such assquare1/square2;
  • There are many objects that have other properties and behaviors, such asSquare/Circle/RectAnd so on. Object creates objects that are the most featureless objects

The array object

Define an array

let arr = [1.2.3]  // Short form
let arr = new Array(1.2.3)	// the elements are 1,2,3
let arr = new Array(3)	// The length is 3
Copy the code

The function object

function fn(x,y){return x+y}
let fn2 = function fn(x,y){return x+y}
let fn = (x,y) = > x+y
let fn = new Function('x'.'y'.'return x+y')
Copy the code

Code practice

The constructor

function Person(name, age){
    this.name = name
    this.age = age
}
Person.prototype.sayHi = function(){
  console.log('Hello, I amThe ${this.name}`) orconsole.log('Hello, I am.'+this.name)
}
let person = new Person('jack'.19)
person.name === 'jack' 
// true
person.age === 19 
// true
person.sayHi() 
// Print out "Hello, my name is Jack"
Copy the code

class

class Person{
  constructor(name, age){
      this.name = name
      this.age = age
  }
  sayHi(){
       console.log('Hello, I amThe ${this.name}`) orconsole.log('Hello, I am.'+this.name)
  }
}
let person = new Person('jack'.19)
person.name === 'jack' 
// true
person.age === 19 
// true
person.sayHi() 
// Print out "Hello, my name is Jack"
Copy the code