자바스크립트 학습서 추천_자바스크립트 스킬

Aaron Gustafson이 집필하고 Li Songfeng, Li Yawen 등이 번역했습니다. 확실히 읽어볼만한 책이라는 생각이 듭니다. 관심있는 친구들이 살펴볼 수 있습니다. 다음은 제가 추출한 일반적인 JavaScript 함정과 객체 개념의 모음입니다. 모든 사람에게 도움이 되기를 바랍니다.

Ø Javascript 구문의 일반적인 트랩

² 대소문자 구분

² 실제로는 작은따옴표와 큰따옴표 사이에 특별한 차이가 없습니다. 이 책을 읽고 나서 알았습니다. 이전에 프로그램을 작성할 때 ''라는 문자열 형식을 작성했지만 '아, 이게 가능하구나'라는 걸 미리 깨닫지 못했습니다. 대부분의 경우 ''는 문자열을 나타내는 데 사용됩니다. XHTML 사양에서는 모든 XHTML 속성 값을 ""로 묶어야 하기 때문입니다. 이는 코드를 혼합할 때 명확성을 제공합니다.

² 줄바꿈, 무시하지 마세요. 문자열에서 줄바꿈을 하기 위해 캐리지 리턴을 사용하면 죄송합니다. 브라우저는 문자열을 인식할 수 없다고 말할 것입니다. 캐리지 리턴을 자동으로 ";"로 변환하기 때문입니다. 그러나 이 문제를 해결하기 위해 다행히도 이스케이프 문자를 대체 문자로 제공합니다. 아래와 같이:

var='
목록

1. 
   '
   

어떤 사람들은 더하기 기호를 사용할 수 있다고 말할 것입니다. 나는 이것을 알고 있습니다. 더하기 기호를 문자열 연산자로 사용합니다. 하단 레이어에서는 숫자(?!)를 리로드한 것으로 추정됩니다.

² 선택적 세미콜론 및 중괄호

내 말을 믿을 수 없다면 괜찮다고 말씀드리겠습니다. 이 JavaScript는 매우 똑똑하다고 말할 수 있습니다. 하지만 앞서 언급한 책의 저자처럼 저는 프로그래머로서 우리가 좀 더 규율을 지키는 것이 더 낫다고 생각합니다.

² 오버로딩

가끔 변덕스러워서 JavaScript 오버로드 함수를 만들 수도 있는데 이때는 마지막 함수만 실행할 수 있고 이전 함수는 허용되지 않는 것을 볼 수 있습니다. . 가능성. 그 이유는 무엇입니까?

이전의 누구누구가 이후의 누구로 교체된 것으로 밝혀졌습니다. 이를 일반적으로 적용 범위라고 합니다. 추가 단계는 프로그램이 범위 체인에서 동일한 이름을 가진 마지막 함수만 참조한다는 것입니다.

² 익명 기능

이 녀석은 정말 유용하다고 말씀드리고 싶습니다.

² 범위 확인 및 종료

모든 프로그래밍 언어에는 이러한 개념이 있기 때문에 모두가 이 범위에 익숙하다고 생각합니다.

스코프 체인은 변수의 값(또는 함수 호출 시 사용되는 메서드)을 결정할 수 있는 경로를 설명하는 데 사용됩니다.

클로저는 개념입니다. 범위와 관련됩니다. 이는 외부 함수가 실행을 완료하고 종료된 후에도 내부 함수가 외부 함수의 속성에 계속 액세스할 수 있다는 사실을 나타냅니다. 변수나 메소드가 참조되면 JavaScript는 객체의 실행 경로에 의해 형성된 범위 체인을 따라 구문 분석하여 가장 최근에 정의된 변수 값을 찾습니다. 일단 발견되면 해당 값이 사용됩니다.

² Iterable 객체

잘 사용하지 않으면 오류가 발생할 수 있다는 사실을 의심하지 마세요. 믿을 수 없다면 다음 예를 살펴보세요.

var all=document.getElementsByTagName('*')

for(i in all){

//모든[i ] 요소가 동작하도록 합니다.

}

반환되는 값은 각각 length, item,namedItem과 동일하므로 코드에 예상치 못한 오류가 발생할 수 있습니다.

이때 뭔가 조치를 취해야 합니다. 속성 필터링에는 hasOwnProperty를 사용합니다. 이 함수는 객체의 속성이나 메서드가 상속되지 않은 경우 true를 반환합니다. 방법은 다음과 같습니다.

var all=document.getElementsByTagName('*');

for(i in all){

if(!all.hasOwnProperty( i)) {계속;}

//모든[i] 요소에 대한 작업입니다.

}


² 함수 호출 및 참조.
참고로 이것은 다릅니다. 호출이 실행되고 참조는 변수에 대한 복사본만 제공합니다(이해할 수 있는 것 같죠?)

이것을 보세요:

var foo=exampleFunction();

var foo=exampleFunction;

두 문장 패턴이 다릅니다. 전자는 exampleFunction 함수를 실행하고 반환 값을 foo 변수에 할당하는 반면, 후자는 exampleFunction 함수의 참조를 foo에 할당합니다.


Ø Javascript 객체
프로퍼티와 메소드의 개념은 다들 알고 계시리라 믿습니다. JavaScript의 개체와 그 신비한 의미(무술과 비슷함)에 대해 이야기해 보겠습니다.

1. 상속

Javascript의 상속이 묘한 느낌이 들지만, 생각해보면 여전히 이해가 됩니다. 그리고 그것은 여전히 ​​다른 사람들과 같은 생각입니다. 실제로 자바스크립트는 복사 작업만 수행합니다. 더 이상 고민하지 않고 예를 살펴보면 모두가 이해할 것이라고 믿습니다.

//사람 객체의 인스턴스 생성

var person={};

person.getName=function(){……}; person.getAge=function(){……};

//직원 객체의 인스턴스 생성

var 직원={};

employee.getTitle=function( ){…};

enployee.getSalary=function(){…};
//person 개체에서 메서드 상속

employee.getName=person.getName;

employ.getAge=person.getAge;

2. 나만의 개체 만들기

두 가지 방법으로 나만의 개체를 만들 수 있습니다.

첫 번째 way :var myObject =new Object();

두 번째 유형: var myObject={};//첫 번째 유형의 약어입니다. 실제로 위에서도 사용되었습니다.

3. 생성자 만들기

첫 번째 유형: function myConstructor(a){

//Code

}

놀라지 않음 , 약간 과장되기는 하지만 위에서 언급한 자바스크립트의 모든 곳에 객체가 있다고 상상해 보세요. 이 함수는 한 번에 개체입니다.

두 번째 유형:

아마도 똑똑한 독자라면 이미 다른 두 가지 유형의 함수 정의라고 추측했을 것입니다.

var myConstructor=function(a){}; 🎜>
세 번째도 함께 작성해 보겠습니다. var myConstructor=new Function('a',/*some code*/);

그러나 이 방법의 경우 성능 문제가 발생하므로 기능을 사용하는 것이 더 적합합니다.

마지막으로 책의 예를 들어주세요.

function myConstructor(message){

alert(message)

this.myMessage=message ;

}

var myObject =new myConstructor('Instantiating myObject!')

4. 정적 메서드 추가

var myObject={};

//속성 추가

myObject.name=”Jeff”

//메소드 추가

myObject.alertName=function(){

alert(this.name);

}

//실행 방법

myObject.alertName()

누구나 가능하다고 믿습니다. 더 이상 이해하지 마세요.

5. 프로토타입에 공개 메소드를 추가하고 싶습니다.

공개 메소드를 추가하는 방법은 프로토타입을 사용하는 것입니다. 여기서 프로토타입은 js 라이브러리가 아닙니다.

//생성자 생성

function myConstructor(message){

alert(message)

this.myMessage=message; >}

//공개 메소드 추가

myConstructor.prototype.clearMessage=function(string){

this.myMessage ='' string; >}

여기서 언급할 점은 생성자에서 var로 시작하는 모든 변수는 모두 비공개 변수라는 것입니다. . 및 프로토타입으로 추가되지 않고 생성자에 직접 작성된 변수는 비공개 함수입니다.

6. 마지막으로 객체 리터럴에 대해 언급하겠습니다.

객체 리터럴은 코드 재구성 및 중복성 감소에 매우 유용합니다. 따라서 가능하다면 이

을 사용하는 것이 가장 좋습니다. 다음 예를 살펴보세요.

var myObject={

propertyA:'value',

propertyB :'value',

methodA:function(){}

}

저자의 말에 동의합니다. 이 방법은 매우 우아합니다.

어때요? Javascript의 객체와 트랩에 대한 기본적인 이해가 있습니까? 이 기사가 도움이 되기를 바랍니다.