Learn Object – oriented from zero

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Recently I learned some object oriented knowledge on the website, and I plan to share it with you.

It is also a summary of personal records, which will be updated continuously.

What is object orientation?

Languages that support object-oriented programming include C#, Java, Python, Ruby, JavaScript…

There are some core concepts in object orientation: encapsulation, abstraction, inheritance, polymorphism.

.

So let’s not talk too much about it, let’s take it down a little bit, and let’s understand what an object is, okay?

object

1. Create an objectCreating Objects

How to create methods in an object, for example if we start creating a “circle” object, we can define functions directly inside the object.

In Object orientation, highly relevant properties are encapsulated in Object, so I’ll add radius, coordinates, and so on.

const circle = {
  // Radius (attribute)
  radius: 1.// Coordinates (attributes)
  location: {
    x = 1,
    y = 1
  },
  // draw (method)
  draw: function() {
    console.log('draw'); }};Copy the code

We can call the object’s methods directly using circles.draw ().

In object oriented, calling the object function * calling the object Method.

Factory functions and constructorsFactories and Constructors

Next, let’s see how to use functions to create objects

2.1 Factory Function

Features: By creating a function -> create an object, once defined, many times called

🐝 Naming specification: Hump marking method (oneTwoThree)

// It is the same as above, but here I will simply create a property
function createCircle(radius){
  return {
    radius,
    draw() {
      console.log('draw'); }}}// Create an object with this function
const circle1 = createCircle(1);
const circle2 = createCircle(2);
Copy the code

(2) Constructor Function

🐝 naming specification: PASCAL notation (OneTwoThreeFour)

// Next we use this to set the properties and methods of the object
function Circle(radius) {
  console.log('this'.this);       //⭐this points to circle. If the object is created without the new keyword, this points to Windows
  this.radius = radius;           // This points to the object of the current script
  this.draw = function() {        // This represents an empty object
    console.log('draw'); }}const circle = new Circle(1);
1️ create a empty object 2️ discount on this to {} 3️ discount return function on this
Copy the code

Value types and reference typesPrimitives and Reference Types

First, what is the Value type and what is the Reference type

🐝 Value types: number, string, Boolean, symbol, undeni, NULL

🐝 Reference types: Object, Function, Array (the variable is not stored in an Object, but an address)

A simple example is 😄

let x = { value : 10 };
let y = x; // address {value: 10}
x.value = 20;
console.log(y.value); / / 20
Copy the code

A slightly more complicated example 🤔

let number = 10;
function increase (number) {
  number++;
}
increase(number);
console.log(number); / / 10

let obj = {value : 10};
function increase (obj) {
  obj.value++;
}
increase(obj);
console.log(obj.value); / / 11
Copy the code

4. Private attributesPrivate Properties

🐝 Hide the details Show the Essentials

There are methods on objects that the user doesn’t care about, and we can hide some of the complicated methods inside

// Details are hidden using the let variable. The let is not an object property, but the target is set as a local variable, which will appear when it leaves the object scope
function Circle(radius) {
  this.radius = radius;
  let defaultLocation = { x: 0.y: 0 };  // the local variable is the closure of the function draw
  let computeOptimumLocation = function(factor) {
      / /... Details of the implementation
  };  // the local variable is the closure of the function draw
  this.draw = function() {
    computeOptimumLocation(0.1);  // Private member, no need for this call
  };
}
Copy the code

5. Getters/Setters

We can also access and set properties using get and set on Object.defineProperty.

function Circle(radius) {
  this.radius = radius;
  let defaultLocation = { x: 0.y: 0 };
  this.draw = function() {
    console.log('draw');
  };
  Object.defineProperty(this.'defaultLocation', {
    get: function() {  // This variable is part of the inner function closure ⭐ read-only property
      return defaultLocation;
    },
    set: function() {  // ⭐ External access
      if(! value.x || ! value.y)throw new Error('Invalid location.'); defaultLocation = value; }})}Copy the code

The last

Today I documented “objects” in object Orientation 🐘🐘, and I will supplement this article later. The next section will document prototypes in object orientation.

The article is understanding and record in the learning process, welcome big guy to correct!!