Notice
Recent Posts
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- JS 삼항연산
- js 변수
- JS 형변환
- JS 스코프
- JS 숫자
- JS appendChild
- JS preventDefault
- JS 연산
- CSS기초
- JS setTimeout
- JS redirection
- JS 함수
- JS 데이터타입
- JS classList
- git 협업셋팅
- JS value속성
- JS form action
- JS localStorage
- JS clearInterval
- JS setInterval
- JS append
- HTML기초
- JS prompt
- JS 기초
- JS typeof연산자
- CSS속성정리
- JS form
- JS null undefined
- JS 화살표함수
- JS 타이머기능
Archives
공부기록용
함수와 메서드의 차이 본문
❓jQuery선택자 이후 동작함수를 작성할 때 함수와 메서드, 이벤트의 정의가 불분명한 상태였음! 정의?란게 불분명한 느낌 상황에 맞게 잘 선택하고 싶어 차이를 짚고 넘어가고 싶었음
함수(Function)과 메서드(Method)의 차이
함수는 여러 문장들이 하나의 기능을 구현하도록 구성한 것이라고 할 수 있다. 그 함수 중에서 클래스 내부에 정의한 함수를 메서드라고 부른다. 또한 메서드는 객체의 속성을 다루기 위한 행위를 정의한 것이라는 의미도 포함하고 있다.
함수 | 메서드 |
특정한 작업을 수행하기 위해 설계되었다. | 객체의 기능을 구현하기 위해 클래스 내부에 구현(정의)되는 함수이다. |
메서드를 구현하면 객체의 기능을 구현하는 것이다. | |
자체적으로 존재한다.(독립적) | 객체와 연결되어 있다. 클래스 내부에 종속되어 있다. |
재사용이 가능하다.(여러 곳에서 호출되어 사용) | 함수에 비해 재사용하기 어렵다. |
즉, 독립적으로 존재하는 함수인지 클래스 내부에 종속되어 있는지의 구분으로 함수와 메서드를 구분 할 수 있다.
let obj = {
show1: function() {
console.log('show1() 메서드 호출');
}
}
function show2() {
console.log('show2() 함수 호출');
}
obj.show1(); // 메서드
show2(); // 함수
show1()함수는 객체 obj의 프로퍼티이며, obj객체를 통해 호출된 메서드이다. 반면 show2()함수는 객체를 생성하지 않고 직접 호출되었으므로 함수이다.
여기서 show2()함수는 객체 없이 호출되는 것처럼 보이지만, 이렇게 전역 범위에서 함수가 선언되는 경우 전역 객체인 window의 프로퍼티가 된다. 그래서 show2()함수를 전역 범위에서 선언하는 경우 window객체로 호출 할 수 있다.
메서드가 되기 위해선 사용자가 정의한 객체의 프로퍼티가 함수인 경우에 속하기 때문에 전역 객체인 window의 경우 사용자가 정의한 객체가 아니므로 show2()함수는 메서드가 아닌 함수가 되는 것이다.
function show2() {
console.log('show2() 함수 호출');
};
show2(); // show2() 함수 호출
window.show2(); // show2() 함수 호출
🔗참고🔗
https://hoestory.tistory.com/31
'💡깨달음💡 > Javascript' 카테고리의 다른 글
슬라이드 만들기(slick.js 만들어보기01) (0) | 2024.04.04 |
---|---|
생성자 함수 (0) | 2024.03.27 |
loalStorage사용하기 (0) | 2023.10.29 |
동기와 비동기의 차이 (0) | 2023.10.05 |
document객체정리(많이 사용하는거 위주) (0) | 2023.09.21 |
Comments