함수 유형 : 객체 생성자 / 프로토 타입 / 객체 리터럴

프로토 타입 함수

모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지이고 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간입니다

function func(num, name, word){
    // const num = num; // 원래는 이렇게 const num에는 무엇 무엇 하나하나 지정해주었는데
    
    this.num = num; //this 라는걸 쓰면서 재활용을 한다.
    this.name = name; //name이라는 변수에 name 매배변수의 값 1 저장
    this.word = word; //word이라는 변수에 word 매배변수의 값 1 저장
    
}

func.prototype.result = function(){ //객체안에 함수를 적고 불러오는것이 가능합니다.
    document.write(this.num+this.name+"가 "+this.word+"되었습니다.
")
}

//인스턴스 생성 : this 는 인스턴스(new)를 적어주어야만 사용이 가능하빈다.
const info1 = new func("1", "함수", "실행");
const info2 = new func("2", "자바스크립트", "실행");
const info3 = new func("2", "자바스크립트", "실행");

//실행
info1.result();
info2.result();
info3.result();

결과 보기

1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 제이쿼리가 실행되었습니다.

---

객체 리터럴 함수

대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정됩니다. 실행중에는 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있습니다.

function func(num, name, word){
    // const num = num; // 원래는 이렇게 const num에는 무엇 무엇 하나하나 지정해주었는데
    
    this.num = num; //this 라는걸 쓰면서 재활용을 한다.
    this.name = name; //name이라는 변수에 name 매배변수의 값 1 저장
    this.word = word; //word이라는 변수에 word 매배변수의 값 1 저장
    
}

func.prototype = { //객체안에 함수를 적고 불러오는것이 가능합니다.
    result1 : function(){
        document.write(this.num+this.name+"가 "+this.word+"되었습니다.
");
    },
    result2 : function(){
        document.write(this.num+this.name+"가 "+this.word+"되었습니다.
");
    },
    result3 : function(){
        document.write(this.num+this.name+"가 "+this.word+"되었습니다.
");
    }
}

//인스턴스 생성 : this 는 인스턴스(new)를 적어주어야만 사용이 가능하빈다.
const info1 = new func("1", "함수", "실행");
const info2 = new func("2", "자바스크립트", "실행");
const info3 = new func("2", "자바스크립트", "실행");

//실행
info1.result1();
info2.result2();
info3.result3();

결과 보기

1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 제이쿼리가 실행되었습니다.

---

객체 생성자 함수

new 키워드를 이용하여 Object 생성자 함수를 호출하면 비어있는 객체를 얻을 수 있습니다.

function func(num, name, word){
    const num = num; // 원래는 이렇게 const num에는 무엇 무엇 하나하나 지정해주었는데
        
    this.num = num; //this 라는걸 쓰면서 재활용을 한다.
    this.name = name; //name이라는 변수에 name 매배변수의 값 1 저장
    this.word = word; //word이라는 변수에 word 매배변수의 값 1 저장
        
    this.result1 = function(){ //객체안에 함수를 적고 불러오는것이 가능합니다.
        document.write(this.num+this.name+"가 "+this.word+"되었습니다.
")
    }
}

//인스턴스 생성 : this 는 인스턴스(new)를 적어주어야만 사용이 가능하빈다.
const info1 = new func("1", "함수", "실행"); // 객체 생성자인 new 사용
const info2 = new func("2", "자바스크립트", "실행");
const info3 = new func("2", "자바스크립트", "실행");

//실행
info1.result1();
info2.result1();
info3.result1();

결과 보기

1. 함수가 실행되었습니다.
2. 자바스크립트가 실행되었습니다.
3. 제이쿼리가 실행되었습니다.