JS를 배울 때 Aha-moment는 무엇입니까? [닫은]


16

JavaScript를 배울 때 기억하십니까? 당신이 갑자기 "그것을"얻은 순간은 무엇입니까? (예를 들어, 상자 모델에 대해 배웠을 때 CSS aha-moment가있었습니다 ...)

내가 묻는 이유는 6 주 동안 JS를 배우고 있기 때문에 여전히 혼란 스럽습니다. 여기 SO에서 최근에 읽은 내용의 인용문이 있습니다.

".. 함수는 메소드가 함수의 값을 갖는 객체의 속성이기 때문에 값과 유사하게 작동합니다."

처음에 혼란스러워서 이해하게 된 것이 궁금합니다.

(저는 Sitepoints "Simply JavaScript", "Eloquent JavaScript"책을 읽고 Lynda의 Essential JavaScript tutorial을 따르고 있습니다. 프로그래밍 경험이 없으며 수학에 끔찍했습니다.)

감사!


1
나는 인용문이 혼란스럽고 불명확 한 것으로 판명되었으며, 오랫동안 자바 스크립트를 사용하여 수년간 분노 해 왔기 때문에 언어에 익숙하지 않은 사람에게 혼란을 주더라도 놀라지 않을 것입니다 :)
Russ Cam

따옴표는 함수가 자바 스크립트의 첫 번째 클래스 객체라고 말하려고하기 때문에 따옴표와 혼동이오고 있습니다. 두근 두근을 유지하면 'a-ha'모멘트의 출처를 제공 할 것입니다 : 추가 참조 프레임.
chiggsy

답변:


15

제게 가장 큰 "AHA"순간은 다음을 완전히 파악했을 때였습니다.

변수 값은 함수를 포함한 모든 것이 될 수 있습니다

var person = {
    name: 'Sean',
    getName: function() { return this.name; },
    numbers: [7, 11, 41]
}

var myvar = person.name;
alert(myvar); //prints name
alert(myvar()); //"myvar" is not a function error
alert(myvar.length); //undefined

myvar = person.getName;
alert(myvar); //prints the contents of the function as a string
alert(myvar()); //calls the function
alert(myvar.length); //undefined

myvar = person.numbers;
alert(myvar); //prints contents of array
alert(myvar()); //"myvar" is not a function error
alert(myvar.length); //prints 3


10

나는 다른 답변 중 일부가 무엇을 만졌는지에 동의합니다. 나를위한 A-ha 순간 은 폐쇄가 무엇인지 이해 했을 때였 다 .

폐쇄 란 무엇입니까? 에 대한 답변을 게시했습니다 . 이것을 설명하는 데 도움이됩니다.

클로저를 이해하지 못하면 Javascript는 []배열 및 JSON ( {}객체) 및 브라우저 컨텍스트에서 DOM ( window/ document) 과 같은 몇 가지 간단한 구문 기능이있는 상당히 제한된 언어 입니다.

그러나 클로저를 이해 하면 많은 이해가 이루어집니다 .

  • 프로토 타입이 실제로 무엇입니까 ( 여기 참조 )
  • Javascript에서 프로토 타입이 OOP핵심 인 이유 ( 여기 참조 )
  • Javascript의 대부분의 이벤트 핸들러실제로 작동하는 방식 (클로저를 이해하지 않고 마술처럼 보일 수 있음)
  • 콜백 으로 많은 코드 및 / 또는 시간을 절약하는 방법

자원


4

Javascript에서 가장 필수적인 언어 'Aha'는

  • 객체로서의 기능
  • 폐쇄
  • 프로토 타입 기반 객체 지향
  • 자바 스크립트로 범위 지정

이 모든 주제에 대해 웹에서 많은 자료를 찾아야합니다.

(그리고 모든 것이 완전히 논리적이 될 것이라고 생각하지 마십시오 : JavaScript 혼란 스럽습니다)


정말? JavaScript 혼란 스럽습니까? 나에게 그것은 모두 자연스럽게 보인다. 그러나 그것은 단지 나입니다 :-P.
Htbaa

3

몇 년 전에 처음 배우기 시작했을 때 자바 스크립트는 어려웠습니다. 서버 쪽 끝 (php 및 perl)에서 웹 개발을 처음 배우기 시작했기 때문입니다.

구문이나 OOP가 아니거나 자바 스크립트의 생동감과 이벤트 위주 성을 뛰어 넘는 것은 아니 었습니다. 그리고 이것과 이것 그리고 우리는 사용자가 페이지를 떠날 때까지 무언가 일어나기를 기다리는 일정한 상태에 있습니다. " 그것은 정말로 루프를 던졌습니다.

나는 실제로 그것을 침몰하게 만든 어떤 것도 말할 수 없다고 생각한다. 그러나 IMO는 임의적입니다)하지만 결국 차이점을 파악했을 때 모든 것이 훨씬 쉬워졌습니다. :)


여기 정말 좋은 지침이 있습니다. 모두 감사합니다!

1

마지막으로 언어의 일부를 내가 원하는 쓰레기로 재정의 할 수 있다는 아이디어를 파악했을 때. 이와 관련하여 C보다 강력합니다. 예를 들어 표준을 좋아하지 않는 경우toString() 기능이 직접 구현할 것입니다.

x.toString = function () {
    return "this is MY toString function biatch!";
}

이것이 재정의와 어떻게 다른가요?
Nicole

1

함수 객체에서 속성을 설정할 수 있음을 깨달았습니다.

또한 프로토 타입이 무엇인지 마침내 이해했을 때.

function Alpha(){
    return 'aplha';
}
Alpha.Beta = function(){
    return 'beta';
}
Alpha.prototype.Delta = function(){
    return 'delta';
}

Alpha(); // 'alpha'
Alpha.Beta(); // 'beta'
new Alpha().Delta(); // 'delta'

0
function Obj() {
    this.x = 42;
    this.value = function() {
        return this.x;
    };
}

var o = new Obj();
o.value();        // 42
var f = o.value;
f();              // undefined??

그리고 A-HA의 순간 때 마지막으로 이러한 결과를 잡을 수있어.


0

Aha 순간 # 1 : 저를위한 언어 인 JavaScript는 동적 HTML 및 클라이언트 측 웹 프로그래밍과 같은 주요 용도와 구별됩니다. 나는 DOM과 브라우저 비 호환성에 정말로 좌절했을 때 JavaScript에 좌절 할 것입니다.

Aha moment # 2 : 상속은 여러 가지 방법으로 실행될 수 있다는 것을 이해합니다. 전형적인 클래스 기반 상속은 단지 하나입니다. 프로토 타입 기반 (자바 스크립트에서 사용되는 스타일)도 있습니다.

# 1과 관련하여 JavaScript 권장 사항 : The Good Parts를 거부 할 수 없습니다 . JavaScript는 그 자체로 훌륭한 언어로 취급합니다.


0

블록 범위 지정 및 호이스트가 없습니다.

foo(); // function executes, no error

if (...) {
  function foo(){
    ...
  }
}


-1

jQuery는 기본적으로 'a-ha'순간이었습니다. 이 구문은 C #에서 LINQ / lambda 구문에 대해 많은 경험을 쌓은 후 익숙해졌습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.