자바스크립트 이해-JS 튜토리얼-php.cn

소개

프로그래밍 세계에는 두 가지 기본 요소만 있습니다. 하나는 데이터이고 다른 하나는 코드입니다. 프로그래밍의 세계는 데이터와 코드의 뗄 수 없는 얽힘 속에서 무한한 생명력과 생명력을 보여줍니다.

데이터는 본질적으로 조용하고 항상 고유한 특성을 유지하려고 하는 반면, 코드는 본질적으로 활발하며 항상 세상을 바꾸고 싶어합니다.

아시다시피 데이터 코드의 관계는 놀랍게도 물질과 에너지의 관계와 유사합니다. 데이터에도 관성이 있습니다. 외력을 가하는 코드가 없으면 항상 원래 상태를 유지합니다. 코드는 에너지와 같습니다. 코드의 유일한 존재 목적은 데이터의 원래 상태를 변경하기 위해 열심히 노력하는 것입니다. 코드가 데이터를 변경하면 데이터의 저항으로 인해 코드의 원래 추세에도 영향을 미치거나 변경됩니다. 어떤 경우에도 데이터는 코드로 변환될 수 있고, 코드는 데이터로 변환될 수 있으며, E=MC2와 유사한 디지털 변환 방정식이 있을 수 있습니다. 그러나 컴퓨터 세계의 법칙이 항상 반영될 수 있는 것은 데이터와 코드 사이의 모순적이면서도 통일된 작동입니다. 이러한 법칙이 바로 우리가 작성하는 프로그램 논리입니다.

하지만 프로그래머마다 세계관이 다르기 때문에 이러한 데이터와 코드도 다르게 보입니다. 결과적으로, 서로 다른 세계관을 가진 프로그래머들은 자신만의 방법론을 사용하여 프로그래밍 세계의 진화와 발전을 촉진합니다.

우리 모두 알고 있듯이 오늘날 가장 인기 있는 프로그래밍 아이디어는 객체 지향 프로그래밍입니다. 객체 지향 아이디어가 프로그래밍 세계에서 빠르게 인기를 얻을 수 있는 이유는 무엇입니까? 객체지향 사고는 최초로 데이터와 코드를 하나로 묶어 프로그래머에게 단순한 객체 개념으로 제시하기 때문입니다. 이는 원래의 지저분한 알고리즘과 서브루틴, 얽혀 있던 복잡한 데이터 구조를 갑자기 명확하고 질서정연한 객체 구조로 나누어 우리 마음속의 지저분한 데이터와 코드의 매듭을 명료하게 만듭니다. 우리는 다시 한 번 더 명확한 사고를 갖고 또 다른 사고 수준에서 더 넓은 프로그래밍 세계를 탐험할 수 있습니다.

어느 날, 오조 홍인께서 '대상진경'을 설법하신 후 모든 제자들에게 말씀하셨습니다. . 장수 신수(沈秀)는 가장 높은 이해력을 지닌 형으로 인정받는다. 그의 시는 다음과 같다. 무미 건조한!" 이 구절이 나오자마자 형제들 사이에서 모두가 이 구절이 너무 잘 쓰여졌다고 말했습니다. 불머리 승려인 혜능만이 그것을 보고 조용히 한숨을 쉬며 벽에 이렇게 썼다. "물체에는 뿌리가 없고 글자도 보이지 않는다. 애초에 아무것도 없는데 어디에 먼지가 생길 수 있는가?" 그러다가 그는 고개를 저으며 걸어갔다. 혜능 게타를 읽은 사람들은 모두 “너무 엉망으로 쓰여 있어서 이해할 수 없다”고 말했다. 홍인 선사는 신수의 시를 읽고 고개를 끄덕이며 칭찬한 다음, 혜능의 시를 보고 조용히 고개를 저었습니다. 그날 밤, 홍인은 조용히 혜능을 자신의 명상실로 불러 그가 오랫동안 소중히 간직해 온 소프트웨어 경전을 가르친 뒤 달빛 아래서 하룻밤을 보내달라고 부탁했는데...

나중에 혜능은 정말 그렇지 않았다. t 스승님의 높은 기대에 부응하여 그는 남쪽에 선불교를 위한 또 하나의 광활한 하늘을 창조했습니다. Huineng이 가져간 소프트웨어 경전 중 하나는 "JavaScript Bible"이었습니다!

단순함으로 돌아가기

자바스크립트를 이해하려면 먼저 객체와 클래스의 개념을 버리고 데이터와 코드의 근원으로 돌아가야 합니다. 앞서 언급했듯이 프로그래밍 세계에는 데이터와 코드라는 두 가지 기본 요소만 있으며 이 두 요소는 서로 얽혀 있습니다. JavaScript는 데이터와 코드를 가장 원시적인 수준으로 단순화합니다.

JavaScript의 데이터는 매우 간단합니다. 단순 데이터에는 정의되지 않음, null, 부울, 숫자, 문자열의 다섯 가지 유형만 있고, 복합 데이터에는 객체라는 한 가지 유형만 있습니다. 이는 세상의 가장 기본적인 원소를 금속, 나무, 물, 불, 흙으로 분류하고, 기타 복합물질은 이 다섯 가지 기본원소로 구성되어 있다는 중국의 단순유물론과 같다.

JavaScript의 코드는 함수라는 한 가지 형태로만 반영됩니다.

참고: 위 단어는 모두 소문자이므로 숫자, 문자열, 개체, 함수 등과 같은 JavaScript 내장 함수와 혼동하지 마세요. 아시다시피 JavaScript 언어는 대소문자를 구분합니다.

모든 JavaScript 식별자, 상수, 변수 및 매개변수는 unfined, null, bool, number, string, object 및 function 유형 중 하나일 뿐입니다. typeof의 반환 값으로 표시됩니다. 이 외에 다른 유형은 없습니다.

먼저 단순 데이터 유형에 대해 이야기해 보겠습니다.

정의되지 않음: 알려지지 않은 것, 아무것도 없는 것, 상상할 수 없는 모든 것을 나타내며 코드가 이를 처리할 수 없습니다.
참고: Typeof(정의되지 않음) 반환도 정의되지 않았습니다.
어떤 변수나 속성에나 정의되지 않음을 할당할 수 있지만 이는 변수가 지워진다는 의미가 아니라 추가 속성이 추가된다는 의미입니다.

null: 개념은 있지만 아무것도 없습니다. 무 속에 유가 있는 듯하고 유 속에 무도 있는 듯하다. 상상하기 어렵지만 이미 코드로 처리할 수 있습니다.
~ 참고: typeof(null)는 객체를 반환하지만 null은 객체가 아니며 null 값을 가진 변수는 객체가 아닙니다.

부울: 예, 아니오, 의심의 여지가 없습니다. 옳은 것은 옳고, 그른 것은 그르다. 절대적으로 분명하다. 코드로 처리할 수 있고 코드의 흐름을 제어할 수도 있습니다.

수: 선형적인 것, 크기와 순서가 명확하고 수가 많지만 혼란스럽지 않습니다. 이는 코드의 일괄 처리를 용이하게 하고 코드의 반복 및 반복을 제어합니다.
참고: Typeof(nan) 및 Typeof(Infinity)는 모두 숫자를 반환합니다.
NaN이 수치 계산에 참여하는 구조는 NaN이며, NaN != NaN입니다.
무한대 / 무한대 = NaN.

문자열: 기계 신호가 아닌 인간을 위한 합리적인 것입니다. 인간-컴퓨터 정보 통신, 인간 의도에 대한 코드 이해 등이 모두 여기에 의존합니다.

단순 유형은 객체가 아니며 JavaScript는 이러한 단순 유형에 객체화 기능을 제공하지 않습니다. 단순형의 상수값이 직접 할당된 식별자, 변수, 매개변수는 객체가 아닙니다.

소위 "객관화"란 데이터와 코드를 복잡한 구조로 구성하는 능력입니다. JavaScript에서는 객체 유형과 함수 유형만 객체화 기능을 제공합니다.

수업 없음

Object는 객체의 종류입니다. JavaScript에서는 데이터와 코드가 아무리 복잡하더라도 객체 형태로 객체로 정리할 수 있습니다.

하지만 JavaScript에는 "클래스"라는 개념이 없습니다!

많은 객체 지향 프로그래머에게 이것은 아마도 JavaScript에서 가장 이해하기 어려운 것일 것입니다. 네, 거의 모든 객체지향 책에서 가장 먼저 이야기하는 것은 객체지향의 기둥인 '클래스' 개념입니다. 갑자기 "범주"가 사라지고, 우리는 영적 지원을 잃은 것처럼 느끼고 주인이 없다고 느낍니다. 객체와 클래스를 놔두고 '객체에 뿌리가 없고 유형도 보이지 않는' 상태에 도달하는 것은 쉽지 않은 것 같습니다.

먼저 JavaScript 프로그램을 살펴보겠습니다.
var life = {};
for(life.age = 1; life.age <= 3; life.age++)
{
스위치(life.age)
{
사례 1: life.body = "egg cell";
life.say = function(){alert(this.age+this.body)};
                                                                                     蚪";
life.say = function() {alert(this.age+this.body+"-"+this.tail+","+this.gill)};
                                                                    ;
life.legs = "네 다리";              Life.say = function(){alert(this.age+this.body+"-"+this.legs+","+this.lung)};
                                                break 🎜> 이 JavaScript 프로그램은 처음에 생명 개체인 life를 생성했습니다. 생명이 탄생했을 때 그것은 어떤 속성이나 메서드도 없는 단순한 개체였습니다. 첫 번째 생명 과정에서는 "계란 세포"처럼 보이는 body 속성과 say 메서드를 갖습니다. 두 번째 생애 동안에는 "꼬리"와 "아가미"가 자랐으며, 꼬리와 아가미 특성을 보아 분명히 "올챙이"였습니다. 세 번째 생애에는 꼬리와 아가미 속성이 사라졌으나 '네 다리'와 '폐'가 자라나 다리와 폐 속성을 획득해 마침내 '개구리'가 됐다. 상상력이 풍부하다면, 그것을 잘생긴 '왕자'로 만들어 아름다운 '공주'와 결혼할 수도 있을지도 모른다. 하지만 이 프로그램을 읽은 후 다음 질문에 대해 생각해 보세요.

꼭 수업이 필요한가요?

아직도 어린 시절 동화 '엄마를 찾는 올챙이'를 기억하시나요? 아마도 어젯밤에 여러분의 아이는 우연히 이 아름다운 동화 속에서 잠이 들었을 것입니다. 귀엽고 작은 올챙이는 자신의 유형이 계속해서 진화하는 과정에서 점차 어미와 같은 '종류'가 되어 어미를 찾았습니다. 이 동화에 담긴 프로그래밍 철학은 사물의 '클래스'가 처음부터 시작되고, 계속해서 진화하고, 결국 사라지게 된다는 것입니다...

'클래스'는 실제로 우리가 복잡한 현실 세계를 이해하는 데 도움이 될 수 있습니다 , 이 혼란스러운 현실 세계는 분류될 필요가 있습니다. 하지만 우리의 생각이 '범주'에 얽매이면 '범주'는 '피곤'해집니다. 살아있는 물체에 처음부터 고정된 "클래스"가 할당되어도 여전히 진화할 수 있다고 상상해 보세요. 올챙이가 개구리로 변할 수 있나요? 또한 아이들에게 엄마를 찾는 올챙이의 이야기를 들려줄 수 있나요?

따라서 JavaScript에는 "클래스"가 없습니다. 클래스는 보이지 않고 객체와 통합되었습니다. 자바스크립트 객체가 다른 프로그래밍 언어에는 없는 생명력을 갖게 된 것은 바로 '클래스'라는 개념을 버린 덕분이다.

이 때 마음 속 깊은 곳에서 무엇인가를 느끼기 시작했다면 점차적으로 JavaScript의 Zen을 이해하기 시작한 것입니다.

함수의 마법

다음으로 JavaScript 함수의 마법에 대해 이야기해 보겠습니다.

JavaScript 코드에는 함수라는 한 가지 형식만 있으며, 함수는 함수 유형입니다. 어쩌면 다른 프로그래밍 언어에는 프로시저나 메소드 같은 코드 개념이 있을 수도 있지만, 자바스크립트에는 함수의 형태가 한 가지뿐입니다. 함수를 작성할 때 함수 유형의 엔터티를 만듭니다. 다음 프로그램을 살펴보세요:
function myfunc()
{
Alert("hello");
};

Alert(typeof(myfunc));

이 코드를 실행하면 typeof(myfunc)가 함수를 반환하는 것을 볼 수 있습니다. 위의 함수 작성 방법을 "정의식"이라고 합니다. 다음의 "변수식"으로 다시 작성하면 이해가 더 쉬울 것입니다.
var myfunc = function ()
{
Alert(" hello");
};

Alert(typeof(myfunc));

여기서 변수 myfunc는 명확하게 정의되고 해당 초기 값은 함수 엔터티에 할당됩니다. 따라서 typeof(myfunc)도 함수를 반환합니다. 실제로 이 두 함수의 작성 방법은 동일하며 몇 가지 사소한 차이점을 제외하면 내부 구현은 완전히 동일합니다. 즉, 우리가 작성하는 자바스크립트 함수는 그냥 변수라고 합니다. 변수 유형은 함수이고, 변수의 값은 우리가 작성한 함수 코드 본문입니다.

똑똑하다면 즉시 추가 질문을 할 수도 있습니다. 함수는 변수일 뿐이므로 변수에 값을 임의로 할당하고 어디에서나 사용할 수 있습니다???/p>

다음 코드를 살펴보세요.
var myfunc = function ()
{
Alert("hello");
};
myfunc() //처음으로 myfunc가 호출됩니다. , 출력 hello

myfunc = function ()
{
Alert("yeah");
}
myfunc(); //myfunc에 대한 두 번째 호출은 yes를 출력합니다.

이 프로그램을 실행한 결과는 다음과 같습니다. 대답은 '예'입니다! 함수가 처음 호출된 후 함수 변수에 새로운 함수 코드 본문이 할당되므로 함수가 두 번째 호출되면 다른 출력이 나타납니다.

좋습니다. 위 코드를 처음 정의된 함수 형식으로 변경해 보겠습니다.
function myfunc ()
{
Alert("hello");
};
myfunc (); //여기서 myfunc를 호출하고 hello 대신 yes를 출력합니다

function myfunc ()
{
Alert("yeah");

myfunc(); //Myfunc이 여기에서 호출되고 물론 출력도 그렇습니다.

정확히 동일한 서명을 가진 두 함수가 다른 프로그래밍 언어에서는 불법이어야 한다는 것은 당연한 일입니다. 하지만 JavaScript에서는 이것이 사실입니다. 그런데 프로그램을 실행한 후 이상한 현상이 발견되었습니다. 두 번의 호출은 마지막 함수에서 출력된 값들뿐이었습니다! 분명히 첫 번째 함수는 아무 것도 수행하지 않습니다. 왜 이런가요?

JavaScript 실행 엔진은 프로그램을 한 줄씩 분석하고 실행하는 것이 아니라, 한 줄씩 분석하고 실행하는 것으로 나타났습니다. 또한, 동일한 프로그램을 분석하고 실행하는 동안 정의하는 함수문이 먼저 추출되어 실행됩니다. 함수 정의가 실행된 후 다른 명령문 코드가 순차적으로 실행됩니다. 즉, myfunc이 처음으로 호출되기 전에 첫 번째 함수 문으로 정의된 코드 논리가 두 번째 함수 정의 문으로 덮어쓰여졌습니다. 따라서 두 호출 모두 마지막 함수 논리를 실행합니다.

예를 들어 이 JavaScript 코드를 두 부분으로 나눈다면 HTML로 작성하고

저자별 최신 기사