====개체====
지난번에는 야간 모드에서 링크 텍스트 색상을 변경하는 작업까지 했습니다.
기능으로 만들고 정리하십시오.
var alist로 시작한 코드를 LinksSetColor라는 함수로 바꿨습니다.
그 후 이것 저것을 함수로 바꾸었고, 많은 함수를 사용하여 코너 케이스를 만들었습니다.
정말 많은 기능이 있습니다.
이러한 함수를 많이 만들면 코드가 길어질수록 함수 이름이 중복되는 것과 같은 작은 뉘앙스의 오류가 있을 수 있습니다.
대충 좋은 뜻
위의 상태를 ‘객체’를 이용하여 다음과 같은 형태로 변환한다고 합니다.
BodySetBackgroundColor를 Body.setBackgroundColor로 변경하고 나머지도 유사하게 변경합니다.
리빙코딩 영상에서는 디렉터리를 만들어 파일을 정리하는 것에 비유하여 설명합니다.
다른 디렉토리에 같은 이름을 가진 파일이 있는 것은 전혀 문제가 되지 않습니다.
예를 들어 한 폴더에 setColor라는 파일이 2개 있는데, Body라는 폴더에 setColor라는 파일이 하나 있는데 이것이 문제다.
Links라는 폴더에 setColor라는 파일이 있어도 문제가 없기 때문입니다.
위의 예에서 특정 선택자를 선택하는 데 사용되는 document.querySelector()에도 document라는 객체가 있습니다.
querySelector()라는 함수로 구성되어 있음을 알 수 있습니다.
문서와 쿼리 선택기 사이. 개체 액세스 연산자라고 합니다.
이는 문서라는 개체에 액세스하는 것을 의미합니다.
위에서 언급했듯이 객체에 속한 함수를 메서드라고 합니다.
==== 객체 생성 실습 ===
— 객체 생성, 객체 데이터 참조, 객체 추가 방법 —
노란색 상자 안에 동료라는 개체를 만들었습니다.
만드는 방법은 배열과 비슷해 보입니다.
차이가 있는 경우 대괄호 대신 중괄호가 사용됩니다.
개체의 “프로그래머”를 키라고 하고 콜론 뒤의 “자체”를 값이라고 합니다.
빨간색 박스에 Object.Key 형식의 코드를 입력하여 해당 값을 불러옵니다.
녹색 상자에서 bookkeeper라는 데이터를 키로, duru라는 값을 coworker라는 개체에 추가합니다.
하늘색 상자는 키에 공백이 입력된 경우의 예입니다.
개체 액세스 연산자가 제거되고 대괄호가 배열처럼 사용됩니다.
결과:
종합해보면 파이썬 강의의 사전과 매우 흡사해 보인다.
— 객체와 루프 —
참조 링크: https://stackoverflow.com/questions/14379274/how-to-iterate-over-a-javascript-object
JavaScript 객체를 반복하는 방법은 무엇입니까?
JavaScript에 개체가 있습니다.
{ abc: ‘…’, bca: ‘…’, zzz: ‘…’, xxx: ‘…’, ccc: ‘…’, // … } for 루프를 사용하여 해당 속성을 가져오고 싶습니다.
반복하고 싶다…
stackoverflow.com
— 개체 속성 및 메서드 —
지금까지의 레슨에서는 함수를 선언할 때 function showAll()과 같이 작성했지만,
방법을 만들 때 모양이 약간 다른 것 같습니다.
하지만 함수를 만들어도 그 형식으로 할 수 있습니다(하단에 표시됨).
며칠 전 Core JavaScript에서 관련 콘텐츠를 본 기억이 납니다.
이렇게 보면 var showAll = function() 및 coworkers.showAll = function()이 익명 함수 표현식인 것처럼 보입니다.
그래서 방법을 하나 만들었습니다.
동료가 이렇게 변경된 이유는 개체 이름이 변경되면 위의 내용이 제대로 작동하지 않기 때문입니다.
대신 이를 사용하면 메소드가 속한 오브젝트를 참조하기 때문에 오브젝트 이름이 변경되더라도 메소드가 작동합니다.
그것은 항상 북쪽을 가리키는 나침반과 같습니다.
속성과 같은 메서드는 개체 내부에 있으므로 루프로 연결된 것처럼 보입니다.
요약하면 빨간 박스로 표시된 객체에 속하는 변수를 속성이라고 합니다.
노란색 상자와 같이 개체에 속하는 함수를 메서드라고 합니다.