일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |
- js 무한루프 슬라이드
- 콜백함수
- js 댓글수정
- 배열 메서드
- js 댓글
- 3way handshake
- js 생성자 함수
- GitHub
- Object.keys
- nodejs 게시판
- js 함수 표현식
- js 게시판
- React 기본설정
- js DOM 기초
- Git
- typescript
- branck 합치기
- Rebase
- node js 기본
- 화살표함수
- js로또 만들기
- node js 설치
- Linux 기본
- js 메서드
- JS DOM
- Linux 사용자
- React 자습서
- js 함수 #함수
- js 로또
- css #css기초
- Today
- Total
개발 노트
Javascript// 5일차 [메서드, 생성자 함수] 본문
목차
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
}
}
'Javascript' 카테고리의 다른 글
Javascript // 7일차 [DOM 기초] (0) | 2022.11.07 |
---|---|
Javascript// 6일차 [상속, 날짜, 삼항연산자] (0) | 2022.11.04 |
Javascript // 4일차 [함수표현식, 콜백, 화살표함수, 객체] (0) | 2022.11.02 |
Javascript // 3일차 [함수] (0) | 2022.11.02 |
javascript// 2일차 [변수,연산자,형변환,코드블럭,데이터타입] (1) | 2022.10.31 |