자바스크립트 객체 정리

SunnyMoon·2020년 5월 17일
0

object

  • 함수, 클래스 (틀 ) ⇒ 객체 , 개체, object
  • 틀로부터 개체(인스턴스) 를 만들어서 사용

객체를 만들어내는 틀의 역할을 하는 함수를 생성자 함수라고 한다.

function 틀 ( ) { } = > new 틀 ( )

  • 함수를 만들어서 틀을 만들고 틀로부터 new라는 키워드를 이용해서 객체 , 즉 인스턴스를 생성
function A (){}

const a = new A();

console.log(a , typeof a);
console.log(A());

// { } 'object' 출력
// undefined 출력
  • 생성하면서 데이터 넣기
function B(name,age){
	console.log(name,age);
}

const b = new B();
const c = new B('Mark',25);
console.log(B());

// undefined, undefind 출력
//'Mark',25
//undefined, undefined 출력

Property ( 객체에 속성 추가하기)

  • { } 객체 안에 사용할 데이터 , 함수를 넣을 수 있다. 하나하나가 이름을 프로퍼티라 함
  • 프로퍼티가 특정 값을 가지고 있음
    • primitive value
    • 객체
    • 함수
// 값을 속성으로 넣기

function A(){
	this.name = 'Mark';
}

new A();

console.log(A());

//{name:'Mark'} 출력

// 함수를 속성으로 넣기

function B() {
	this.hello = function (){
		console.log('hello') 
	}
}

new B().hello();

//hello 출력

//new Function()

new Object() ⇒ 객체 생성하기

const a = new Object(); 

// { } a출력
// 타입 object 

프로토타입 체인 ( .prototype)

function Person( name, age ) {
	this.name =name;
	this.age = age;
	/* this.hello=function () {
	console.log('hello',this.name, this.age);
	}; */
}

Person.prototype.hello = function () {
	console.log('hello', this.name, this.age);
};

const p = new Person('Mark',37);
p.hello();

//hello Mark 37

프로토타입을 이용한 객체 확장

function Person () {}

Person.prototype.hello = function () {
	console.log('hello');
}

function Korean(region) {
	this.region = region;
	this.where = function() {
		console.log('where', this.region);
		};
}

korean.prototype = Person.prototype;

const k = new Korean('seoul');
k.hello();
k.where();

// hello 
// where seoul

console.log ( k instanceof Korean);
console.log ( k instanceof Person);
console.log ( k instanceof Object);

//true
//true
//true

객체 리터럴

const a = { };
console.log ( a , typeof a );
// {} , object 

const b = {
	name : 'Mark' 
};

console.log (b , typeof b);
// {name:'Mark'} , object

const c = {

	name: 'Mark',
	hello(){
		console.log('hello1',this);
	};
	hello2:function () {
		console.log('hello2',this);
	},
	hello3:()=>{
		console.log('hello3',this);
	}
};

c.hello();
c.hello(2);
c.hello(3);
// hello3 의 this값을 인지하지 못한다

표준내장객체

  • 객체가 이미 런타임 환경에 만들어진것
  • object , new function() , 이 외에도 여러가지가 있음

Array

const a = new Array ( 'red','black','white');

console.log( a, typeof a)
console.log( a instanceof Array);
console.log( a instanceof Object);

// ['red', 'balck', 'white'], object\
//true
//true

/*리터럴방식*/

const b = ['red', 'green','yellow'];

console.log( b, typeof b);
console.log( b instanceof Array);
console.log( b instanceof Object);

//['red', 'green','yellow'], Array
// true
// true

console.log(b.slice(0,1));
//0번째 부터 한개만 잘라오겠다 
//['red']
console.log(Array.prototype.slice, Object.prototype.slice);
// [Function:slice] , undefined
//object를 프로토타입을 받아온 array가 따로 구현한 함수
//표준내장객체
profile
프론트앤드 개발을 공부하는 중입니다:)

0개의 댓글