object-oriented

  • First, let’s make it clear that object orientation is not a grammar, it is an idea, it is a programming pattern.
  • 1. To face (toward).
  • Process-oriented: Process-oriented = focuses on programming patterns for processes
  • Object Oriented: Face toward Objects = focuses on programming patterns for objects
  • Achieve an effect
    • In process oriented, we pay attention to each element, the relationship between each element, the order,…
    • In a process-oriented way, all we care about is finding an object to do it for me, and I wait for the result
  • Example 🌰 : I’d like some noodles
  • Process oriented
    • How much flour to use
    • How much water
    • How and
    • How to cut noodles
    • Do the boiled water
    • Cooking noodles
    • Eat noodles
  • object-oriented
    • Find a noodle shop
    • Call a noodles
    • Waiting to eat
  • Object orientation is the encapsulation of process orientation
  • Our previous programming philosophy was that each function was completed step by step according to the requirements
  • Our future programming idea is that for each function, we should first create a noodle shop, which can help us make a noodle (the object to complete the function), and then create a noodle with the noodle shop. We just need to wait for the result

How objects are created

  • Because object orientation is a process of finding objects
  • So first we need to know how to create an object, okay

Call the system’s built-in constructor to create the object

  • Js gives us a built-in Object constructor
  • This constructor is used to create objects
  • When the constructor is used with the new keyword, it creates an object for us
  • Since JS is a dynamic language, we can add members to objects dynamically
// Get an empty object
var o1 = new Object(a)// Normal operation object
o1.name = 'Jack'
o1.age = 18
o1.gender = 'male'
Copy the code

Create an object literally

  • Use the literal form directly, that is, write directly{}
  • Members can be added at write time, or they can be added dynamically
// Create objects literally
var o1 = {
 name: 'Jack'.age: 18.gender: 'male'
}
​
// One more
var o2 = {}
o2.name = 'Rose'
o2.age = 20
o2.gender = 'woman'
Copy the code

Create objects using factory functions

  • Start by writing a factory function
  • This factory function creates an object, adds attributes to the object, and returns the object
  • Use this factory function to create objects
// create a factory function
function createObj() {
  // Create an object manually
  var obj = new Object(a)// Add a member to the object manually
  obj.name = 'Jack'
  obj.age = 18
  obj.gender = 'male'

  // Manually return an object
  return obj
}

// 2. Use this factory function to create an object
var o1 = createObj()
var o2 = createObj()
Copy the code

Create objects using custom constructors

  • The factory function goes through three steps
    • Manually creating objects
    • Manually Adding members
    • Return object manually
  • The constructor is simpler than the factory function
    • Automatic object creation
    • Manually Adding members
    • Automatic return object
  • Start by writing a constructor
  • Add some members to the object in the constructor
  • Use this constructor to create an object (with new)
  • Constructors create objects and create an object with properties and methods
  • Object orientation is trying to find an object that has properties and methods
  • Object orientation is the process of making our own constructors
// 1. Create a constructor
function Person(name, gender) {
 this.age = 18
 this.name = name
 this.gender = gender
}
​
// 2. Use the constructor to create an object
var p1 = new Person('Jack'.'man')
var p2 = new Person('Rose'.'woman')
Copy the code

Constructor details

  • We have seen how objects are created
  • Our object orientation is either you get an object directly
  • Or we can make something that creates objects, and we create objects ourselves
  • Our constructors create objects, so let’s talk more about constructors

The basic use of constructors

  • Just like a normal function, except that it is called with new, otherwise it is a normal function call
function Person() {}
var o1 = new Person()  // Get an empty object
var o2 = Person()      // Get nothing, this is a normal function call
Copy the code

  • Note: When new is not written, it is a normal function call with no ability to create objects

  • Uppercase

function person() {}
var o1 = new person() // Get an object
​
function Person() {}
var o2 = new Person() // Get an object
Copy the code

  • Note: the first letter is not capitalized, as long as you use it with new, you have the ability to create objects

  • If you do not need to pass parameters when calling, do not write (). It is recommended to write both

function Person() {}
var o1 = new Person()  // Get an empty object
var o2 = new Person // Get an empty object
Copy the code

  • Note: You may not write () if you do not need to pass the argument, but you must if you pass the argument

  • This inside the constructor refers to the current instance object because of its use with new

function Person() {
 console.log(this)}var o1 = new Person()  // This => o1 when called
var o2 = new Person()  // When called this time, this => o2
Copy the code

  • Note: Each time new, this inside the function refers to the current instantiation object

  • Because the constructor automatically returns an object, do not write a return inside the constructor

    • If you return a primitive datatype, there is no point in writing it
    • If you return a reference data type, the constructor itself is meaningless

Use the constructor to create an object

  • When we use constructors, we can add some code and content to the current object
function Person() {
  this.name = 'Jack'
  this.age = 18
}

var o1 = new Person()
var o2 = new Person()
Copy the code

  • We get two objects with their own members name and age

  • When we write constructors, can we also add some methods to them?

function Person() {
  this.name = 'Jack'
  this.age = 18
  this.sayHi = function () {
    console.log('hello constructor')}}var o1 = new Person()
var o2 = new Person()
Copy the code

  • Yes, of course. Both of our objects have the sayHi function

  • They can also be called normally

  • But is that a good idea? What are the disadvantages?

function Person() {
  this.name = 'Jack'
  this.age = 18
  this.sayHi = function () {
    console.log('hello constructor')}}// The first time new, the Person function is executed
// This will create a new function and assign its address to this.sayhi
var o1 = new Person()

// The second time new, the Person function is executed
// This will create a new function and assign its address to this.sayhi
var o2 = new Person()
Copy the code

  • In this case, the sayHi function in our two objects is the same code and the same function

  • But these are two spatial functions that take up two memory Spaces

  • So o1. SayHi is an address, o2. SayHi is an address

  • So console.log(o1 === o2.sayhi) returns false

  • Disadvantages: The same function appears twice, occupying two spatial addresses

  • How to solve this problem?

    • You need something called a prototype

More recommended

  • DOM animation effects
  • JavaScript Learning Notes (19) — ES6
  • JavaScript Learning Notes (18) — ES5
  • JavaScript Learning Notes (17) — Re