- 오브젝트 자료 여러개를 만들고 싶습니다.
제일 잘하는게 하드코딩이기 때문에 하드코딩해봤습니다.
var 학생1 = { name : 'Kim', age : 20 }
var 학생2 = { name : 'Park', age : 21 }
var 학생3 = { name : 'Lee', age : 22 }
하드코딩해서 3개를 만들긴 했는데 앞으로 만들일이 더 많이 생길 것 같아서 constructor를 제작하려고 합니다.
constructor문법을 사용해서 위의 오브젝트와 똑같은 오브젝트 3개를 한번 뽑아보십시오.
- 여기에 학생1.sayHi()라고 사용하면 "안녕 나는 Kim이야" 라는 글자가 콘솔창에 나오도록 sayHi()라는 함수도 constructor 안에 추가해보세요.
나는 아래처럼 했다.
function 학생제조기(이름, 나이){
this.name = 이름,
this.age = 나이,
this.sayHi = function(){
console.log(`안녕 나는 ${this.name}이야.`)
}
}
let 정보 = [['Kim', 20], ['Park', 21], ['Lee', 22]]
let 학생들 = []
for(let i = 0; i < 정보.length; i++){
const 학생 = new 학생제조기(정보[i][0], 정보[i][1])
학생들.push(학생)
}
학생들[0].sayHi()
학생들[1].sayHi()
학생들[2].sayHi()답은 아래와 같더라.
function Student(이름, 나이){
this.name = 이름;
this.age = 나이;
this.sayHi = function(){
console.log('안녕 나는 ' + this.name + '이야');
}
}
var 학생1 = new Student('Kim', 20);
var 학생2 = new Student('Park', 21);
var 학생3 = new Student('Lee', 22);sayHi 함수를 prototype에 추가하셔도 전혀 상관없을 것 같습니다.
- 다음 코드의 출력 결과는 무엇일까요?
function Parent(){
this.name = 'Kim';
}
var a = new Parent();
a.proto.name = 'Park';
console.log(a.name)
답은 아래와 같다.
'Kim' 입니다.
첫 4줄에 의해서 a = { name : 'Kim' } 이 되고
a.proto.name = 'Park'; 이건 부모 prototype에 { name : 'Park' } 이걸 추가하라는 뜻입니다.
그럼 이제 a.name 이라고 사용했을 때
내가 직접 가지고 있는 { name : 'Kim' } 이걸 우선 출력해줍니다.
- 함수가 안들어가요 엉엉
위에 0번 문제에서 Student라는 부모에 sayHi라는 함수를 하나 추가하라고 했죠?
그래서 sayHi()라고 사용하면 "안녕 나는 ~~이야" 라고 내 이름을 출력해주는 함수를 prototype에 추가했습니다.
하단처럼 만들었는데 의도한 대로 이름이 출력되지 않고 있습니다.
원인은 무엇일까요?
function Student(이름, 나이){
this.name = 이름;
this.age = 나이;
}
Student.prototype.sayHi = () => {
console.log('안녕 나는 ' + this.name + '이야');
}
var 학생1 = new Student('Kim', 20);
학생1.sayHi(); //왜 이 코드가 제대로 안나오죠?
나의 답)
화살표 함수를 사용해서 this가 Student 오브젝트를 가리키는 것이 아닌 더 외부 window를 가리키게 된다.
정답)
sayHi() 라는 함수를 prototype에 추가할 때 arrow function을 사용했습니다 .
결론부터 말하자면 arrow function은 그냥 일반 function 대체품이아닙니다.
arrow function은 this를 바깥에 있는 this를 그대로 사용하고 싶을 때 쓰는 함수라고 했었습니다.
암튼 그런데 sayHi() 함수를 만들 때 arrow function을 사용해서
내부에 있던 this라는 값이 이상해진 것이었습니다.
Student.prototype.sayHi = () => { console.log(this); }sayHi 함수에 그냥 this 하나만 출력해보시면 window 같은게 출력될 것입니다. (strict mode에선 undefined)
이전 강의내용에 따르면 arrow function을 사용하시면 그냥 바깥 아무데나 있던 값을 가져와서 사용합니다.
바깥 this 값은 window이며,
그 window를 그대로 저기 함수 안에다가 적용했기 때문입니다.
그래서 this가 이상해서 그랬던 문제였습니다.
- 모든 array에 적용할 수 있는 함수를 직접 새로 만들려면 어떻게 해야할까요?
모든 array에 붙일 수 있는,
array 내에 있는 3이라는 값을 제거해주는 유용한 함수를 하나 만들고 싶습니다.
var arr = [1,2,3];
arr.remove3();
console.log(arr); //[1,2]
이렇게 array뒤에 붙이기만 하면 array 내의 3이라는 모든 숫자 자료들이 삭제됩니다.
멋있게 이름은 remove3() 이라고 하겠습니다.
remove3()함수는 어떻게, 어디에 만들어야 모든 array에 쓸 수 있을까요?
아래처럼 하면 된다.
var arr = [1,2,3];
function remove3(리스트){
for (let i = 0; i< this.length; i ++){
if(this[i] === 3){
this.splice(i,1)
}
}
}
Array.prototype.remove3 = remove3
arr.remove3();
console.log(arr); //[1,2]