Javascript의 OOP

언어 객체 지향을 다음과 같이 만드는 특정 기능 또는 메커니즘이 있습니다.

1.객체
2.수업
3.캡슐화
4.상속

개체– 개체는 속성과 메서드를 포함하는 고유한 엔터티입니다. 예를 들어 "자동차"는 색상, 유형, 모델, 마력과 같은 몇 가지 특성이 있고 운전과 같은 특정 작업을 수행하는 실제 객체입니다. 개체 지향 프로그래밍에서는 개체의 특성을 속성이라고 하고 동작을 메서드라고 합니다. 객체는 클래스의 인스턴스입니다. 개체는 JavaScript의 모든 곳에 있으며 함수, 배열 또는 문자열이든 거의 모든 요소가 개체입니다.

참고: javascript의 메소드는 값이 함수인 객체의 속성입니다.

1. 객체 리터럴 사용

//Defining object
let person = {
    first_name:'Ram',
    last_name: 'Prasad',

    //method
    getFunction : function(){
        return (`The name of the person is
        ${person.first_name} ${person.last_name}`)
    },
    //object within object
    phone_number : {
        mobile:'7399',
        landline:'6743'
    }
}
console.log(person.getFunction());
console.log(person.phone_number.landline);

2. 개체 생성자 사용:

//using a constructor
function person(first_name,last_name){
this.first_name = first_name;
this.last_name = last_name;
}
//creating new instances of person object
let person1 = new person('Ram','Prasad');
let person2 = new person('Vishnu','Avasthi');

console.log(person1.first_name);
console.log(`${person2.first_name} ${person2.last_name}`);

3. Object.create() 메서드 사용:

Object.create() 메서드는 기존 객체를 새로 만든 객체의 프로토타입으로 사용하여 새 객체를 만듭니다.

// Object.create() example a
// simple object with some properties
const student = {
    isWorking : false,
    printIntroduction : function(){
        console.log(`My name is ${this.name}. Am I
        Working?: ${this.isWorking}.`)
    }
}
// Object.create() method
const me = Object.create(coder);

// "name" is a property set on "me", but not on "student"
me.name = 'Ram';

// Inherited properties can be overwritten
me.isStudying = true;

me.printIntroduction();

2. 수업–
클래스는 객체의 청사진입니다. 클래스는 템플릿이고 객체는 클래스 또는 구체적인 구현의 인스턴스이기 때문에 클래스는 많은 객체를 가질 수 있습니다.
구현을 더 진행하기 전에 다른 객체 지향 언어와 달리 JavaScript에는 클래스가 없고 객체만 있다는 것을 알아야 합니다. 정확히 말하면 JavaScript는 프로토타입 기반의 객체 지향 언어입니다. 즉, 클래스가 없고 생성자 함수를 사용하여 동작을 정의한 다음 프로토타입을 사용하여 재사용합니다.

JavaScript classes, introduced in ECMAScript 2015, are primarily syntactical sugar over JavaScript’s existing prototype-based inheritance. The class syntax is not introducing a new object-oriented inheritance model to JavaScript. JavaScript classes provide a much simpler and clearer syntax to create objects and deal with inheritance.

// Defining class using es6
class Vehicle {
constructor(name, maker, engine) {
    this.name = name;
    this.maker = maker;
    this.engine = engine;
}
getDetails(){
    return (`The name of the bike is ${this.name}.`)
}
}
// Making object with the help of the constructor
let bike1 = new Vehicle('Hayabusa', 'Suzuki', '1340cc');
let bike2 = new Vehicle('Ninja', 'Kawasaki', '998cc');

console.log(bike1.name); // Hayabusa
console.log(bike2.maker); // Kawasaki
console.log(bike1.getDetails());

// Defining class in a Traditional Way.
function Vehicle(name,maker,engine){
    this.name = name,
    this.maker = maker,
    this.engine = engine
};

Vehicle.prototype.getDetails = function(){
    console.log('The name of the bike is '+ this.name);
}

let bike1 = new Vehicle('Hayabusa','Suzuki','1340cc');
let bike2 = new Vehicle('Ninja','Kawasaki','998cc');

console.log(bike1.name);
console.log(bike2.maker);
console.log(bike1.getDetails());

3. 캡슐화 – 단일 단위 내에서 속성과 기능을 래핑하는 프로세스를 캡슐화라고 합니다.
예를 들어 캡슐화를 이해해 봅시다.

//encapsulation example
class person{
    constructor(name,id){
        this.name = name;
        this.id = id;
    }
    add_Address(add){
        this.add = add;
    }
    getDetails(){
        console.log(`Name is ${this.name},Address is: ${this.add}`);
    }
}

let person1 = new person('Ram',26);
person1.add_Address('Mathura');
person1.getDetails();

In the above example we simply create a person Object using the constructor and Initialize its properties and use its functions. We are not bothered with the implementation details. We are working with an Object’s interface without considering the implementation details.
Sometimes encapsulation refers to the hiding of data or data Abstraction which means representing essential features hiding the background detail. Most of the OOP languages provide access modifiers to restrict the scope of a variable, but their are no such access modifiers in JavaScript but there are certain ways by which we can restrict the scope of variables within the Class/Object.

// Abstraction example
function person(fname,lname){
    let firstname = fname;
    let lastname = lname;

    let getDetails_noaccess = function(){
        return (`First name is: ${firstname} Last
            name is: ${lastname}`);
    }

    this.getDetails_access = function(){
        return (`First name is: ${firstname}, Last
            name is: ${lastname}`);
    }
}
let person1 = new person('Ram','Prasad');
console.log(person1.firstname);
console.log(person1.getDetails_noaccess);
console.log(person1.getDetails_access());

In the above example we try to access some property(person1.firstname) and functions(person1.getDetails_noaccess) but it returns undefined while their is a method which we can access from the person object(person1.getDetails_access()). By changing the way we define a function we can restrict its scope.

4. 상속 – 객체의 일부 속성과 메서드를 다른 객체에서 사용하는 개념입니다. 클래스가 클래스를 상속하는 대부분의 OOP 언어와 달리 JavaScript 객체는 객체를 상속합니다. 즉, 한 객체의 특정 기능(속성 및 메서드)을 다른 객체에서 재사용할 수 있습니다.

예를 들어 상속을 이해해 봅시다.

//Inheritance example
class person{
    constructor(name){
        this.name = name;
    }
    //method to return the string
    toString(){
        return (`Name of person: ${this.name}`);
    }
}
class student extends person{
    constructor(name,id){
        //super keyword for calling the above class constructor
        super(name);
        this.id = id;
    }
    toString(){
        return (`${super.toString()},Student ID: ${this.id}`);
    }
}
let student1 = new student('Ram',25);
console.log(student1.toString());

위의 예에서 우리는 특정 속성과 메소드로 Person 개체를 정의한 다음 Student 개체에서 Person 개체를 상속하고 Person 개체의 모든 속성과 메서드를 사용하고 Student 개체에 대한 특정 속성과 메서드를 정의합니다.