본문 바로가기
JavaScript

함수유형

by SyuMay 2022. 8. 22.
728x90

Javascript 함수 유형 종류

1) 객체 생성자 함수
2) 프로트 타입 함수
3) 객체 리터럴 함수

생성자 함수(constructor)란 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말한다. 생성자 함수에 의해 생성된 객체를 인스턴스(instance)라 한다.

function func(num, name, com) {
    this.num = num; // const 생략
    this.name = name;
    this.com = com;
    this.result = function () {
        document.write(this.num + ". " + this.name + this.com + "<br>"); // 여기까지만 하게 되면 실행이 안됩니다.
    }
}
// 일반 함수와 다르다 보니 실행하는 법도 다르다. (인스턴스 생성)
const info1 = new func("1", "함수 ", "실행 05");
const info2 = new func("2", "자바스크립트 ", "실행 05");
const info3 = new func("3", "제이쿼리 ", "실행 05");
// 실행
info1.result();
info2.result();
info3.result();

프로트 타입 함수 (중요)

자바스크립트는 Function() 인스턴스에 자동으로 prototype 이라는 속성을 만듭니다.
구체적으로 말하자면 prototype 속성은 new 키워드와 생성자 함수를 같이 사용해서 만든 객체에 연결됩니다.
인스턴스들은 생성자 함수의 prototype 속성을 통해 공통의 메소드와 속성을 공유하고 상속합니다.
중요한 사실은 이러한 공유가 속성을 검색하는 동안 일어난다는 것입니다.
즉, 어떤 객체의 속성을 찾거나 접근하면 자바스크립트는 그때마다 해당 객체는 물론 프로토타입 체인에서도 그 속성을 찾는다는 것입니다.

function func(num, name, com) {
    this.num = num; // const 생략
    this.name = name;
    this.com = com;
}
func.prototype.result = function () {
    document.write(this.num + ". " + this.name + this.com + "<br>"); // 여기까지만 하게 되면 실행이 안됩니다.
}
// 일반 함수와 다르다 보니 실행하는 법도 다르다. (인스턴스 생성)
const info1 = new func("1", "함수 ", "실행 06");
const info2 = new func("2", "자바스크립트 ", "실행 06");
const info3 = new func("3", "제이쿼리 ", "실행 06");
// 실행
info1.result();
info2.result();
info3.result();

객체 리터럴 함수 (거의 죽은 문법)

객체 리터럴 방식은 객체 생성 방식 중 가장 일반적이고 간단한 방법으로, 컨텐츠를 그대로 대입하는 방법을 말한다.

function func(num, name, com) {
    this.num = num; // const 생략
    this.name = name;
    this.com = com;
}
func.prototype = {
    result1: function () {
        document.write(this.num + ". " + this.name + this.com + "<br>");
    },
    result2: function () {
        document.write(this.num + ". " + this.name + this.com + "<br>");
    },
    result3: function () {
        document.write(this.num + ". " + this.name + this.com + "<br>");
    }
}
// 일반 함수와 다르다 보니 실행하는 법도 다르다. (인스턴스 생성)
const info1 = new func("1", "함수 ", "실행 07");
const info2 = new func("2", "자바스크립트 ", "실행 07");
const info3 = new func("3", "제이쿼리 ", "실행 07");
// 실행
info1.result1();
info2.result2();
info3.result3();
728x90
반응형

'JavaScript' 카테고리의 다른 글

match ( )  (1) 2022.08.22
charAt() / charCodeAt()  (1) 2022.08.22
concat()  (5) 2022.08.17
includes( )  (3) 2022.08.17
padStart( ) | padEnd( )  (3) 2022.08.17

댓글


자바스크립트 사진

JavaScript

자세히보기