객체 생성, 일급객체, 프로토타입

객체지향 :다른건 몰라도 상속은 알아야됨

constructor

prototype 상속 (면접질문:자기가 어려웠던것 물어봄)

closure(캡슐화)

오늘의 목표: 문서 읽기(공부할떄 공식문서를 읽는것이 최고)

<https://eslint.org/docs/rules/no-prototype-builtins#disallow-use-of-objectprototypes-builtins-directly-no-prototype-builtins>

이해하기

생성자 함수 (constructor) : 함수긴함순데, 객체를 생성하기 위한 함수

빌트인 생성자 함수 (래퍼객체), 빌트인(네이티브) 함수

원시값을 객체화 시킨다(string,boolean)

String('hi'); // 스트링 함수 전역객체의 메소드 원시값이 들어가야함

const strObj = new String ('hi'); //new 뒷부분이 값(객체)

console.log(strObj);

1. *String {"hi"}* string 생성자 함수 이름
2. 1. 0: "h" ㅡㅡㅡㅡㅡ프로퍼티ㅡㅡㅡㅡ
   2. 1: "i" 1이라는 문자열 ->유사배열 객체 순서를 의미 어거지로 순서부여
   3. length: 2 문자열수
   4. __proto__: String ㅡㅡㅡㅡㅡㅡ내용 ㅡㅡㅡㅡㅡ
   5. *[[PrimitiveValue]]*: "hi"

이런게 생성자 함수다(빌트인)

const obj = new Object(); //빈객체를 만듬

console.log(typeof Object);

Object.creat(null);//객체를 만듬

객체를 만드는방법

1 {}객체리터럴 o -1개만들때

2 object (x) 비추

3 생성자함수 o ->중심적

4 object.create() o

5.

객체리터럴 vs 객체 생성자방식

객체리터럴은 1개의 객체를 만들기 위함, 동일한 프로퍼티 객체를 만들때 비효율

객체리터럴은 정의할 필요가없다

var x = 1; 리터럴값을 엔진이 평가할때 값이됨

var o = {}; 마찬가지

생성자함수는 파스칼 케이스 (Circle) 개발자들의 약속

function Person() {

}

Person(); 일반함수 호출하듯이

new Person(); 생성자 함수라고 인식하듯이

console.log(Person());

console.log(new Person());

function Person(name) {

호출이 됬다, 일반함수 호출과 다르게 동작한다

\1. 빈객체를 만든다

\2. this라는 애한테 바인딩(할당)한다 --핵심 이 생성자 함수가 리턴할 객체 첫라인에선 반드시 객체, 나중에 리턴해줄거임 암묵적반환(this를)

생성자 함수 내부에서의 this = 생성자 함수가 (미래의) 생성할 객체 인스턴스

\3.

this.name = name; 네임이라는 프로퍼티를 추가하고 할당함 (프로퍼티 동적생성,동적추가)

this.sayHello = function () {

console.log('hello ${this.name}'); ->이 this는 나중에, 함수 호출 되었을때의 this

};

}

변수일때 할당 assignment 식별자일땐 바인딩(binding)

new Person(); 생성자함수가 생성할 객체를 생성

const me = new Person('lee'); 그것을 me객체에 할당

console.log(me);

me.sayHello(); 메소드 호출 /리턴문이 생략되면 암묵적 undefined이지만 , 콘솔은 찍긴한다

const you = new Person('kim');

함수 객체만 갖고있는 메소드 constructor, call

화살표함수, 메소드 축약표현은 new연산자로 호출못한다

생성자 함수 내부에선 return문 안쓴다 (쓰면, 원시값은 무시되고 객체는 리턴된다 꼬이니까 무시)

new.target 안전장치를 만들 수 있다

Object, fucntion은 안전장치가 내부적으로 있지만 string은 없다 동작이 틀리다

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ함수와 일급객체

객체도(일급객체라는 말이있다) 값처럼 쓸 수 있는

const cb = function(){

console.log('aaaa');

};

setTimeout(cb,100); 참조값을 줬다(pass by reffence)

setTimeout(function(){

console.log('aaaa'); setimeout이 호출되면, 값으로 만들어서 참조값을 준다

},100);

function square(number){

console.log(arguments);

return number * number ;

}

square(2, 10);

함수 객체가 가지고 있는 프로퍼티의 종류

유사배열 종류 : String, arguments,

arguments를 생각하면 가변인자함수를 떠올려야함,apply,call,bind 메소드

arguments 객체(인수를 갖고 있다)

arguments 객체는 매개변수 개수를 확정할 수 없는 가변 인자 함수를 구현할 때 유용하게 사용된다.

-가변인자함수 입사시험에 자주나온다

caller 스킵-비표준

length 프로퍼티

argument의 length는 인수의 개수 , 함수 객체의 length는 매개변수의 개수

name 프로퍼티 (반스킵)

var namedFunc = function foo() {}; 식별자 / 함수명 (함수 내부에서 재귀할때 사용)

console.log(namedFunc.name); //foo

재귀할려면 함수명을 사용해야한다

__proto__접근자 프로퍼티

접근자 프로퍼티란? 프로퍼티는 두종류 (데이터 프로퍼티, 접근자 프로퍼티)

const obj = {

a:1

};

console.log(Object.getOwnPropertyDescriptor(obj, 'a'));

{value: 1, writable: true, enumerable: true, configurable: true}

value가 있냐 없냐로 데이터냐 접근자냐를 구분함

obj.hasOwnProperty('a'); // 있다 프로토 타입

console.log(obj.__proto__ === Object.prototype); //true

console.log(Object.getOwnPropertyDescriptor(obj, '__proto__')); //undefined obj객체에 얘가 없다

getOwnPropertyDescriptor 첫번째에 인자안에 있는 , 프로퍼티를 반환

console.log(Object.getOwnPropertyDescriptor(Object.prototype, '__proto__'));

{get: ƒ, set: ƒ, enumerable: false, configurable: true}

value가 없고 ,함수를 두개 갖고 있다 다른 데이터 프로퍼티의 값을 겟하거나, 셋할때 쓰는것 (자신은 값이 없음)

데이터프로퍼티 : value 어트리뷰트 실제 값을 가지고 있음

접근자프로퍼티 : 자기는 값이 없고, 다른애가 갖고 있는 값을 변형해서줌

[[]] 내부슬롯 ,내부메소드 (공개x접근x터치x엔진이 내부에서씀)이 친구가 갖고 있는게 프로토타입?

__proto__ 얘는 모든 객체가 가진 프로퍼티 (함수 객체 포함)

프로토타입이란 무엇이냐? 객체 자신의 부모 역할을 할 부모 상속을 해준다

prototype: 함수객체만이 가지고 있는 프로퍼티

__proto__ 모든 객체들이 가지고 있는 프로퍼티

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 함수와일급객체

const obj = {

x: 1

};

obj

내가선언하지도 않은 함수들이 많다

모든 객체는 , 부모역할을 하는 프로토타입과 연결되어있다

연결이 되야 볼수 있다

prototype

ㅁ → → → ㅁ Object.prototype

↑ __proto__

ㅁ 자식객체인 애가 상속받아 사용한다

부모객체는 자식의 자산을 사용할 수 없지만, 자식은 사용할 수 있다 자산(프로퍼티,메소드)

생성자함수가 만들었다

function Person(name){

this.name = name;

this.getName = function(){

return this.name;

};

}

const me = new Person('Lee');

const you = new Person('Kim');

function Person(name){

this.name = name;

}

위를 아래로 바꿔주는것 이 차이를 아는것

Person.prototype.getName = function(){

return this.name;

};

const me = new Person('Lee');

const you = new Person('Kim');

프로토타입 체인은 상속을 하기위한 메커니즘

me.hasownproperty 일단 식별자를 스코프체인에서 찾고, 프로퍼티는 프로토타입 체인에서 찾고, 찾으면 호출

식별자와 프로퍼티는, 찾는 위치가 다르다 스코프는 상속되지 않는다 ( 보이냐 보이지 않느냐)

객체지향을 자바스크립트가 구현하는 방식(프로토 타입) Object.prototype(단군)

모든객체는 Object.prototype의 자식 모든 객체는 hasownproperty 호출가능

prototype은 함수 객체가 갖고있다

constructor는 prototype이 갖고있다

__proto__는 객체가 갖고있다

식별자 검색 따로 이루어짐

프로퍼티 검색

자바스크립트는 프로토타입 기반 객체지향이다

클래스 기반언어는 클래스를 만들어서 ,상속관계를 미리 정해놓음 (템플릿을 미리 만들고 객체를 뽑아냄)

자바스크립트는 자유로움 (객체를 동적으로, 런타임에 만들 수 있음), 객체가 생성된 이후에도 프로퍼티를 생성하고 추가가 가능하다

유연하다 단, 퍼포먼스가 떨어진다

'차이'

객체를 생성하는방법

리

O

생

O.c

class - > 문법적설탕 새로운패러다임이 아니고 문법만 설탕만 감싼것이고 , 내부 동작은 똑같다

프로퍼티를 상태값이라고 하는 이유: 메소드가 동작해서 값이 변화할것이기 때문 ( 상태와 동작의 그룹화)

객체는 __proto__를 갖고있는게 아닌, 사용할 수 있는것이다 (상속에의해 Object.prototype 최상단위치)

상속을 하기위한 prototype의 단방향 링크드 리스트, 종점은 Object.prototype

Object.prototype의 prototype은 null

.