연말까지 매일 웹사이트를 꾸준히 제작하는 대학생~57일째 자바스크립트의 파행기와 프로토타입을 배운다~

8224 단어 JavaScript

개시하다


안녕하세요@70days_js
나는 수영과 원형을 배웠다.
57일째.(2019/12/14)
잘 부탁드립니다.

사이트 축소판 그림


해본 일


나는 수영과 원형을 배웠다.

안에는 기어오르기와 원형을 사용했다.
html
  <body>
    <div id="text">count数:</div>
    <input type="button" id="button" value="button" />
    <div id="object">object Method:</div>
  </body>
javascript
//クロージャー

function displayText() {
  let text = document.getElementById("text");
  let count = 0;
  return function() {
    count++;
    text.innerHTML += "<br>" + count;
  };
}
let count1 = displayText();
let count2 = displayText();

count1();
count1();
count2();
count2();
count2();
//____________プロトタイプ___________

let button = document.getElementById("button");
let object = document.getElementById("object");
button.addEventListener("click", createMyObject);

function createMyObject() {
  let userName = prompt();
  if (!userName) {
    userName = "nanashi";
  }

  function Human(name) {
    this.name = name;
  }

  Human.prototype.greet = function() {
    object.innerHTML += "<br>greet: Hello!" + this.name;
  };

  Human.prototype.sayName = function() {
    object.innerHTML += "<br>sayName: I' am " + this.name;
  };

  let user = new Human(userName);
  user.greet();
  user.sayName();
}

탈의실


먼저 의상실입니다. 이 모양은 아래와 같습니다.
function displayText() {
let count = 0;
return function() {count++;}
}
함수 displayText()에는 변수 count와 무명 함수가 있습니다.
그리고 함수를 변수에 넣으세요.↓
let count1 = displayText();
let count2 = displayText();
count1();//1
count1();//2
count2();//1
count2();//2
count2();//3
이렇게 하면count의 수량은count1과count2에서 각각 계산된다.
함수displayText()에 변수count와 무명 함수를 추가하여 조작하면 외부에서count를 조작하지 않고count1과count2를 사용하여count를 각각 증가시킬 수 있습니다.
개인적으로, 복제자는'자신을 둘러싼 범위 내에서 성명된 변수가 참조할 수 있는 함수'이다.
이렇게 해석하다.
아직 완전히 이해할 자신이 없으니 잘못된 인식이라면 지적해 주세요.

원형


먼저, JavaScript의 객체는 Lenovo 정렬이라는 전제 조건이 있습니다.
그 밖에 대상의 생성 방법은 유형 유형과 원형을 바탕으로 하는 두 가지가 있다.
따라서 JavaScript는 원형 베이스에 속합니다.
다음 부분은 구조기입니다.
function Human(name) {
this.name = name;
}
new를 사용하여 대상을 생성합니다.
let user = new Human(userName);
방법의 추가는 다음과 같다.
Human.prototype.greet = function() {...};
추가 방법은 대상의 변수를 저장해서 사용할 수 있습니다.↓
user.greet();

감상


슬럼프 중...
비약 전의 쪼그리고 앉아 노력이라고 믿어라.
끝까지 읽어주셔서 감사합니다.내일도 투고할 테니 잘 부탁드립니다.

참고 자료

  • 클론 자바스크립트 | MDN
  • 야...드디어 이해했어!JavaScript의 원형 체인. - maeharin의 일기.
    • 참고하라고 했어요.감사합니다.
    str () 및 () 보고서
    LetCode 돌멩이 게임 IV(DP, 최우선 전략 이해)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage