[자바스크립트] #2 공부 기록 - 메서드와 this

//객체의 프로퍼티에 함수를 할당해 객체에게 행동할 수 있는 능력 부여
//1. 메서드 만들기
let user = {
    name: "John",
    age: 30
};

user.sayHi=function(){
    alert("안녕하세용ㅅ");

};
//객체 프로퍼티 user.sayHi 에 함수 할당
//메서드: 객체 프로퍼티에 할당된 함수
//sayHi-메서드
user.sayHi();

//이미 정의된 함수로 메서드 만들기
let user = {
    name: "John",
    age: 30
};

function sayHi(){
    alert("안녕");
};
//선언된 함수를 메서드로 등록
user.sayHi = sayHi;
user.sayHi();

//객체를 사용하여 개체를 표현하는 방식: 객체 지향 프로그래밍
//관련 도서:GoF의 디자인 패턴, UML을 활용한 객체지향 분석 설계

//2. 메서드 단축 구문

user={
    sayHi:function(){
        alert("Hello");
    }
};

//==

user={
    sayHi(){
        alert("Hello");
    }
};


//3. 메서드와 this
//메서드 내부에서 this 키워드를 사용하면 객체에 접근할수있다
let user = {
    name:"John",
    age:30,
    sayHi(){
        alert(this.name);
        //this는 현재 객체를 나타냅니다.
    }
};
user.sayHi();
//user.sayHi()가 실행되는 동안에 this는 user를 나타냄.

//4. 자유로운 this
//자바스크립트의 this는 다른 프로그래밍 언어와 동작 방식이 다르다.
//자바스크립트의 모든 함수에 this를 사용할 수 있다.
//this값은 런 타임에 결정됨
let user = {name:"John"};
let admin = {name:"Admin"};

function sayHi(){
    alert(this.name);
}

//별개의 객체에서 동일한 함수를 사용함
user.f=sayHi;
admin.f=sayHi;

//this는 점 앞의 객체를 참조
user.f();
admin.f();

admin['f']();//점과 대괄호는 동일하게 작동함

//5. this가 없는 화살표 함수

//화살표 함수는 고유한 this를 가지지 않음.
//화살표 함수에서 this를 참조하면 화살표 함수가 아닌 평범한 외부 함수에서 this값을 가져옴.
let user ={
    firstName:"보라",
    sayHi(){
        let arrow = ()=> alert(this.firstName);
        arrow();
    }
};
user.sayHi();
//arrow()의 this는 외부함수 user.sayHi()의 this가 됨.

//과제1
//나의 해답: 값 존재 x this가 가르킬 객체가 없기때문

//과제2 계산기 만들기
let val1=0;
let val2=0;

let cal={
    read(){
        this.v1=prompt("첫 번째 숫자");;
        this.v2=prompt("두 번째 숫자");
    },
    sum(){
        return Number(this.v1)+Number(this.v2);
    },
    mul(){
        return this.v1*this.v2;
    }
};
cal.read();
alert(cal.sum());
alert(cal.mul());

//과제3 체이닝


let ladder={
    step:0,
    up(){
        this.step++;
        return this;
    },
    down(){
        this.step--;
        return this;
    },
    showStep:function(){
        alert(this.step);
        return this;
    }
};
ladder.up().up().down().showStep();
//마지막 문제 이해가;;

 

 

참고) https://ko.javascript.info/object-methods