개발 노트

Javascript// 5일차 [메서드, 생성자 함수] 본문

Javascript

Javascript// 5일차 [메서드, 생성자 함수]

Meter216 2022. 11. 3. 18:33

목차

1. 메서드

2. 생성자 함수


 

1. 메서드

 

메서드 = 함수

 

기본 함수 식

function showMessage(){}
const showMessage = function (){}
const showMessage = () => {}

메서드

const user = {
	name: ''
    sum: function(a,b){
    	return a + b
    }
}

user. sum()
user. sum(1,2) // = 3

객체 안에도 함수를 넣을 수 있다. (함수도 값이다)
객체 안에 들어가있는 함수 = 메서드

 

**This

메서드에는 This라는 것이 있다.  점 표기법 앞에 있는 객체를 가르킨다.

**this

const user = {
	name:'이름',
	sayhi:function(){
		console.log(this.name + "님 안녕하세요.")
	},
}

user.sayHi()

this = user 객체를 뜻함. (일단은)

This.firstName >> 앞 객체의 firstName 을 가르킨다.

 

.속성

 


let str = " 자바스크립트 " 
console.log(str.length) 총 몇개로 이루어져있는지 
console.log(str.trim()) 글자만 출력시키는거
console.log(str)
console.log(str.replace("스크립트",""))  // 자바 뜸

앞에 str이라는 객체가 들어오는데 replace(찾을단어, 바꿀값)

console.log(str.replace("스크립트","")) = 자바 만 나오게 된다.

메서드는 . 표기법을 알아야 해석 할 수 있다.

 

활용

const user = {
    name: "",
    lastName: "",
    firstName: "",
    set _name(value){
        const arr = value.split("")
        this.name = value
        this.lastName = arr[0]
        this.firstName = arr[1] + arr[2]
    },
    get _name(){
        return this.firstName + " " + this.lastName
    }
}

user._name = "이름표"
console.log(user)

this.name >> name  = name은 "이름표" 값을 가짐. & 스트링 타입 // .split 속성을 사용 할 수 있다.
(" ") 빈칸 기준으로 배열을 나누겠다는 의미  [이, 름표]로 나뉜 값을  arr
firstName 에다가 arr 배열의 1 번째 값을 입력

 

**split  = 구분자로 구분하고 그 값을 배열로 각각 뽑아내서 저장한다. **많이씀
배열로 바꿔 줄 수 있다. 배열로 바꾸면 내가 원하는 데이터만 뽑아 올 수 있다.

 

setter , getter

set _name(value){
// this.name = value // 생략된  
}
getter 
get _name(){ 여기에 값을 입력해 놓으면
}

setter 값을 넣는다는 의미 객체안의 속성값에 값을 채워넣을 수 있는 함수
user._name = "이름표" 라는 글자로 매개변수가 바뀜 

>>>> name 에 가기전에 한 번 조작이 가능해진다.
>>>> set name에 이름라는 값을 받음  =함수 set name에 대입 


 

생성자 함수

 

객체를 찍어내는 함수

객체 틀을 만드는 함수가 존재한다.

function user(_name, _lastName, _fistName, _age){
	return {
		name: _name,
		lastName: _lastName,
        firstName:_fistName,
        age: _age,
	}
}

const ingoo = user('이름표', '이' , '름표', 20)
const jy = user('표름이' , '표', '름이', 10)

console.log(ingoo)
console.log(jy)

이 방식대로 하면

 

똑같은 user 함수를 만들어두고 인자값을 부여해서 객채들을 만드는 방법이다.

return에 객체를 생성해놨기 때문에, 다른 객체를 생성, 참조를 해서 새로운 객체를 만들 수 있다.

 

간편하게 새로운 함수를 만드는 방법.

function User(name,age) {
    // this = {} // 생략가능
    this.name = name
    this.age = age
    // return this //생략가능
}

const 이름 = new User('이름표' , 20)
const 름표 = new User('표름이' , 10)

new 를 붙여야함 
thus = {}
return this 를 생략하는것
인스턴스 ... > 새로운 객체

 

첫 글자 대 문 자

 

자바 사용자들을 위해 만들어둔 생성자 함수

==
class User {
    constructor(name,age){
        this.name = name
        this.age = age
    }
}