Javascript36 [생활코딩] 객체지향 - 객체와 함수 / call / bind 자바스크립트는 객체가 다른 객체를 상속 받는데, 런타임 되는동안 또 다른 객체를 상속 받을 수 있을 정도로 굉장히 유연하다. (__proto__ / Object.create()를 통해서) sum은 어떤 객체에도 속해있지 않는다. 이 전에 살펴본 sum의 역할은 객체 안에서 first와 second를 더 해주는 역할을 했었다. sum.call()을 적어주면 sum이라고 하는 객체를 실행시키는것이다. sum() 과 똑같은거다. 모든 함수는 call 이라고 하는 메소드를 가지고 있다. call 메소드를 호출할때 첫 번째 인자로 kim을 주면 this = kim이 된다. call은 첫 번째 인자로는 그 함수의 내부적으로 this를 무엇으로 할것인지가 오고, 두 번째 인자부터는 우리가 호출하려고 하는 함수의 파라.. 2020. 8. 4. [Vanilla-JS] 3. Making a JS Clock part const clockContainer = document.querySelector(".js-clock"), clockTitle = document.querySelector("h1"); function getTime() { const date = new Date(); const hours = date.getHours(); const minutes = date.getMinutes(); const seconds = date.getSeconds(); clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ? `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`; } .. 2020. 8. 2. [Vanilla-JS] 2. 텍스트를 클릭하면 색상이 변경 클릭을 했을 때 클래스명에 따라 색상이 변경되도록 만들겠다. 기본값 클래스에서 클릭 이벤트가 발생시 클래스명이 바뀌면서 색상도 바뀌는.. 그리고 cursor: pointer도 클래스를 설정해서 효과를 줄것인데, 문제는 classList에 저장될때 clicked 상태가 돼야 색상이 변경되는데, 아래처럼 btn clicked 가 되어 색상 변경이 안된다. (한 개의 클래스만 체크가능) 그래서 필요한게 contains라는 객체이다. contain은 value가 존재 하는지 체크한다. 안녕하세요! body{ background-color: #ecf0f1; margin: 0px; } h1{ text-align: center; color: tomato; transition: color .5s ease-in-out;.. 2020. 8. 2. [생활코딩] 객체지향 - super / 객체상속 class Person{ constructor(name, first, second){ this.name = name; this.first = first; this.second = second; } sum() { return this.first + this.second } } class PersonPlus extends Person{ avg(){ return (this.first + this.second)/2; } } var kim = new PersonPlus('kim',10 ,20); console.log('kim.sum()', kim.sum()); console.log('kim.avg()', kim.avg()); 코드에서 아쉬운 부분이 있다. PersonPlus 클래스에 first와 second 외에.. 2020. 8. 1. 이전 1 2 3 4 5 6 7 ··· 9 다음
