함수를 정의하면 다른 곳에 생성되며, 프로토 타입 객체는 다른 객체의 원형이 되는 객체이다.
모든 객체는 프로토타입 객체에 접근할 수 있으며 프로토타입 객체도 동적으로 런타임동안 멤버를 추가할 수 있다.
자바스크립트에서는 만들어진 객체 안에 __proto__(비표준) 속성이 자신을 만들어낸 원형을 의미하는 프로토타입 객체를 참조하는 숨겨진 링크가 있다.
프로토 타입 역할 2가지
1. Prototype Object : 함수의 멤버인 prototype 속성은 -> prototype객체를 지정하는 역할
2. Protoype Link : 객체안의 __proto__(비표준) 속성은 자신을 만들어낸 원형인 프로토 타입 객체를 참조하는 숨겨진 링크로써 프로토타입
prototype 속성은 함수만 가지고 있지만(ex. MyObject.prototype),
__proto__ 속성은 모든 객체가 빠짐없이 가지고 있다.(조상 함수의 prototype Object를 가리킨다.)
javascript에서 함수를 정의하면 함수 멤버로 prototype 속성이 있다.
이 속성은 함수이름의 prototype 객체를 참조하고, prototype 객체의 멤버인 constructor 속성은 함수 내부를 참조하는 내부 구조를 가진다.
1) prototype 기반 상속
MyObject를 통해 생성되는 모든 객체는 MyObject함수의 prototype 속성이 참조하는 프로토 타입 객체를 참조한다.
// MyObject 함수 생성varMyObject=function(name,age){console.log('생성자 함수');this.name=name;this.age=age;}// MyObject의 prototype 속성 추가MyObject.prototype.school='bit';MyObject.prototype.course='cafe24';// 이렇게 하면 MyObject의 prototype의 constructor에 들어감// MyObject로 객체 생성varo6=newMyObject('길동',50);console.log(o6);console.log(o6.school)// 객체에서 속성을 찾고 속성이 없으면, 이 객체의 생성자의 객체를 찾음, 없으면 undefineconsole.log(o6.course)// 해당 객체의 속성에 넣음o6.school='multicampus'console.log(o6.school)
다음 속성과 함수(메서드)를 가지고 있는 Class 개념을 function과 프로토타입을 사용하여 구현해 보세요.
1) 생성자 함수 Rectangle (클래스 Rectangle)
2) LeftTop 좌표 x1, y1
3) RightBottom 좌표 x2, y2
4) backgroundColor ( #fff )
5) show 함수 : 화면에 사각형을 표시
<!DOCTYPE html><html><head><metacharset="UTF-8"><title>Insert title here</title><script src='rect.js'type="text/javascript"></script><script>window.onload=function(){varrects=[newRect(100,100,200,300,"RGB(0,0,255)"),newRect(250,250,400,400,"#f00")]varindex=0;varintervalId=setInterval(function(){if(index>=rects.length){clearInterval(intervalId);return;}rects[index++].show();},1000);}</script></head><body></body></html>
// new 생성자 함수()를 사용해서 객체를 생성할 때, varn2=newNumber(5);varf2=newNumber(3.14);varb2=newNumber(false);vars2=newString('hello world');varfn2=newFunction('a','b','return a + b;');// 파라미터 a, b, 함수 본문varo2=newObject();vara2=newArray();
new를 사용해도 ‘그냥’ 함수객체임! 객체를 만드는 거임!
5 : object
3.14 : object
0 : object
hello world : object
function anonymous(a,b
) {
return a + b;
} : function
[object Object] : object
object
- 자바스크립트의 객체 분류
자바스크립트 객체는 3개로 분류할 수 있다.
Native opject (Built-in object, core object)
애플리케이션의 환경과 관계없이 언제나 사용할 수 있는 애플리케이션 전역의 공통 기능을 제공한다.
Object, String, Number, Function, Array, RegExp, Date, Math와 같은 객체 생성에 관계가 있는 함수 객체와 메소드로 구성된다.
호스트 객체
브라우저 환경에서 객체를 말한다.
window, XmlHttpRequest, HTMLElement 등의 DOM 노드 객체와 같이 호스트 환경에 정의된 객체
사용자 정의 객체
- 내장객체, object 객체, 브라우저 내장객체
자바스크립트의 내장 타입의 객체는 확장이 불가능하다.
하지만, new로 함수를 이용햐서 object타입의 객체를 생성하면 가능하다. (object 타입의 객체는 확장이 가능)
#불가능j=10j.abs=-10#가능i=newNumber(10)li.abs=-10
// 내장 타입의 객체는 확장이 불가능varn=10;n.myVal=20;console.log(n.myVal);// object 타입의 객체는 확장이 가능varn2=newNumber(5);n2.myVal=20;console.log(n2.myVal);
undefined
20
브라우저 내장객체 console만 알아보고 나머지는 더 공부 후에 알아보기로
// 브라우저 내장 객체console.log('로그입니다.');console.warn('경고입니다.');console.error('에러입니다.');console.info('정보입니다.');
- null VS undefined 차이 알아보기
null과 undefined 모두 자바스크립트에서 값이 없음을 의미한다.
**undefined ? **
undefined는 데이터 타입이자, 값을 나타낸다.
기본적으로 값이 할당되지 않으면 undefined 타입이며, 변수 값 또한 undefined이다. 정의되지 않은 것, 존재하지 않는 값이라고 볼 수 있다.
null ?
null은 데이터 타입이자, 값을 나타낸다.
null타입의 변수는 명시적으로 값이 비어있음을 나타낼 때 사용한다.
아무것도 참조하고 있지 않음을 나타내며 주로 객체를 담을 변수를 초기화 할 때 사용한다.
null VS undefined 차이점
undefined는 변수를 선언만 하더라도 값이 할당되지만,
null은 변수를 선언한 후에 null로 값을 바꿔주어야 한다.
실습
varmyVar1;varmyVar2=null;console.log(myVar1+" : "+myVar2);console.log(typeof(myVar1)+" : "+typeof(myVar2));console.log(myVar1==myVar2);// 값 비교console.log(myVar1===myVar2);// type까지 비교
특히 local(함수 내부)에서 var를 사용해서 변수를 정의하면 local 범위를 가진다.
// 변수 범위(Scope)vari=5;varf=function(){vari=20;console.log(i);i=i-1;}f();console.log(i);
20
5
- statement
js engine이 읽어들여서 실행하는 단위
js는 \n or ;(세미콜론)을 기준으로 단위를 읽어 실행한다.
// statement// js engine이 읽어들여서 실행하는 단위// js는 `\n` or `;(세미콜론)`을 기준으로 단위를 읽어 실행한다.vars='hello world';console.log(s);// 전역(global) 객체 window// console.log(s);console.log(window.s);
hello world
hello world
- 전역객체(window) 확인
varo={};o.name='둘리';o.age=newNumber(10);o.age.man=9;// 만 나이console.log(window.o);console.log(window.o.name);console.log(window.o.age);
// 객체(type object)를 생성하는 방법 1// new 키워드를 사용하는 방법varo1=newObject();o1.name='둘리';o1.age=10;console.log(o1);//객체(type object)를 생성하는 방법 2// literalvaro2={};o2.name='마이콜';o2.age=20;console.log(o2);// 객체(type object)를 생성하는 방법 3// (J)ava(S)cript (O)bject (N)otationvaro3={name:'또치',age:30}console.log(o3);
함수 사용
// 객체(type object)를 생성하는 방법 4// 커스텀 생성 함수를 사용하는 방법// 보통 일반 함수 관례 소문자 시작varf=function(){console.log('보통 일반 함수');}// 생성자 함수 관례 : 대문자 시작varMyObject=function(name,age){// 객체 지향을 흉내console.log('생성자 함수');this.name=name;this.age=age;}f();// MyObject(); // 이렇게 호출 용도가 아님 varo4=newf();varo5=newMyObject('도우넛',40);console.log(o4);console.log(o5);
# 모듈의 절대위치 구하기(다른 환경에서 실행할 때)
BASE_DIR=os.path.dirname(os.path.abspath(__file__))RESULT_DIR=f'{BASE_DIR}/__results__'table.to_csv(f'{RESULT_DIR}/nene.csv',encoding='utf-8',mode='w',index=0)
하지만, 저장 파일을 프로젝트 내부에 두지 않고, 리눅스 디렉토리에 넣고 싶어 다음 경로로 변경한뒤 리눅스의 root/밑에 crawling-results 디렉토리를 만들어주어 크롤링 데이터를 저장했다.
콩정의 개발 정리 블로그
