자바스크립트 : 객체지향 프로그래밍

지환·2024년 5월 30일
0

자바스크립트

목록 보기
5/30

하루에 매일 3시간씩 !

5.30일

var memberArray = ['egoging', 'graphittie', 'leezhe'];

console.log(memberArray[1])

console.log(memberArray[2])


var memberArray = {
    egoging : 'ohjihwan',
    developer : 'graphitte',
    designer : 'leezhce'
}

console.log(memberArray);
console.log('memberArray 접근', memberArray.egoging);
console.log(memberArray['egoging'])

delete memberArray.developer;

console.log("delete 후 "+ memberArray);


//값을 업데이트하거나 추가할 때 이런식으로 사용한다.
--------

graphittie
leezhe
{ egoging: 'ohjihwan',
  developer: 'graphitte',
  designer: 'leezhce' }
memberArray 접근 ohjihwan
ohjihwan
PS C:\WorkSpace_Js> node object.js
graphittie
leezhe
{ egoging: 'ohjihwan',
  developer: 'graphitte',
  designer: 'leezhce' }
memberArray 접근 ohjihwan
ohjihwan
delete[object Object]

반복문 for~in

// 반복문 Part

var memberArray = ['egoging', 'graphittie', 'leezhe'];



var i = 0;
while(i < memberArray.length){
    console.log(memberArray[i]);
    i = i+1;
    } // loop가 끝나는 지점


var memberArray = {
    egoging : 'ohjihwan',
    developer : 'graphitte',
    designer : 'leezhce'
}

// 객체에서 사용하는 for문은 for ~ in 문으로 진행한다. 
// 순번에 해당하는 이름의 변수가 옴  in xx(객체)


for( var name in memberArray){
    console.log('==============')
    console.log(name); // 키값
    console.log('==============')
    console.log(memberArray[name]); // value 값
}



  • 객체에서 사용하는 for문은 for ~ in 문으로 진행한다.

  • 순번에 해당하는 이름의 변수가 옴 in xx(객체)

console.log(Math.PI);


var myMath = {
        PI:Math.PI,
        random:function(){
            return Math.random();
        }, // random이란 값은 저 함수가 value로 들어감.
        floor : function(){
            return Math.floor(val);
        }
    }  

this

  1. 일반 함수에서 this -> window

  2. 중첩 함수에서 this -> window

  3. 이벤트에서 this -> 이벤트 객체

  4. 메소드에서 this -> 메소드 객체

  5. 메소드 내부의 중첩 함수에서 this -> window


자바스크립트 object 특정 값 삭제하기 (delete 연산자, 깊은 복사, 비구조화 할당)

let obj = {a:0, b:1, c:2}
delete obj.b;
console.log(obj); //여기서 중요한건 원본이 날라가느냐? 아니면 원본을 유지한 채 바뀌느냐가 중요함.


{ a: 0, c: 2 }

원본이 날라감

만약에 원본이 필요하다면?

2. 깊은 복사 후 delete 연산자 이용하기

let obj = {a:2,b:3}
let copy = JSON.parse(JSON.stringify(obj))
delete copy.a;

console.log("obj : " + obj);

console.log("copy" + copy);
  • obj를 깊은 복사 후에 delete 하면 특정값이 삭제된 새로운 오브젝트를 만들 수 있음.

3. 비구조화 할당 이용하기

let obj = {a:2, b:3};
const {a,...rest} = obj

// obj라는 객체에서 a값을 삭제하는 것이 아닌 a값을 제외한 나머지 값을 가져오는 방법

console.log(rest)

프로토타입 Prototype

// 여기서 중간에 third라는 속성이 추가된다면?

// 둘 다 copy 해야한다.

function Person(){
    this.name = 'kim';
    this.first = 10;
    this.second = 20;
    this.third = 40;
    this.sum = function(){
        return this.frist + this.second + this.third;
    }
}

var kim = new Person('kim',10,20);
kim.sum = function (){
    return 'modified : '+ (this.first + this.second);
}
var lee = new Person();

console.log("person : " + Person());
console.log("=====================")
console.log("new Person()" + new Person())

// 생성자 안에서 발생하는 함수를 만들게 되면, 유지보수성이 떨어진다.

// 그래서 공통적인 함수를 어떻게 만들 수 있을까? 라는 고민을 하게 된다.

// --> 프로토타입이라는 타입이 생김

프로토타입이란

: 객체들이 공통으로 사용하는 "속성값"

프로토타입이 없을 때 비효율적인 점은?

: 객체를 생성할 때마다 같은 동작을 하는 중복적인 메소드가 메모리에 계속 생성된다. ==> 성능저하 생김

문법


생성자 함수명.prototype.함수명 = function(){ } 로 한번만 정의.

// 여기서 중간에 third라는 속성이 추가된다면?

// 둘 다 copy 해야한다.

function Person(){
    this.name = 'kim';
    this.first = 10;
    this.second = 20;
    this.third = 40;
    this.sum = function(){
        return this.frist + this.second + this.third;
    }
}

Person.prototype.sum = function(){ // Person이라는 함수에 원형을 정한다. 그 예약어가 prototype : 속성을 정한다.
    return this.frist + this.second;
}

var kim = new Person('kim',10,20);
// kim.sum = function(){
//     return 'modified :'+(this.first+this.second);
// }

var lee = new Person('lee',10,10);
// lee.sum = function(){
//     return 'modified:'+(this.first+this.second);
// }

console.log("kim.sum()", kim.sum());
console.log("===============================");
console.log("lee.sum()", lee.sum());
// 내가 가지고 있는 1억개의 객체에서 sum를 사용해야한다면?  --> prototype를 쓴다.
// 만약에 내가 하나만 커스터마이징한다면?

kim.sum = function(){
    return 'this :' +(this.first+this.second); 
}

Class

class Person{
    constructor(name, first, second){
        this.name = name;
        this.first = first;
        this.second = second;
    }// 생성자
    sum(){
        return 'prototype :' +(this.first + this.second); 
    } // sum 메소드는 같은 클래스에 있는 객체가 공유하는 sum 메소드이다.
}

var kim = new Person('kim', 10,20);
//다르게 동작하는 함수를 정의하고 싶다면 오버라이드 하면된다.

kim.sum = function(){
    return 'this'+(this.first+this.second);
} // 오버라이드 한 걸 먼저 확인하고 --> Person에 들어가서 sum()를 check한다.

console.log('kim', kim);
profile
아는만큼보인다.

0개의 댓글