일반적인 JavaScript 오류가 발생하기 쉬운 지식 포인트 모음

1. 변수 범위

var a = 1; 
function test() { 
    var a = 2; 
    console.log(a); // 2 
} 
test();

위의 함수 범위에서 A가 선언되어 할당되며 콘솔 위에 있으므로 가장 가까운 것을 따릅니다. 기본 출력 a는 2와 같습니다.

var a = 1;  
function test2() { 
    console.log(a); // undefined 
    var a = 2; 
} 
test2();

위의 함수 범위에서 a를 선언하고 할당했지만 콘솔 아래에 있습니다. a 변수가 승격되어 선언되었지만 아직 할당되지 않았으므로 "정의되지 않음"이 출력됩니다.

var a = 1; 
function test3() { 
    console.log(a); // 1 
    a = 2;  
} 
test3();

위 함수 범위의 A는 재선언되지 않고 재할당되었으며 콘솔 하위에 있으므로 전역 범위의 a가 출력됩니다.

let b = 1; 
function test4() { 
    console.log(b); // b is not defined 
    let b = 2; 
} 
test4();

ES6 let은 위의 함수 범위에서 변수 b를 다시 선언하는 데 사용됩니다. 그러나 var와 달리 let에는 변수 승격 기능이 없으므로 "b가 정의되지 않았습니다"라는 오류가 출력됩니다. 보고됩니다.

function test5() { 
    let a = 1; 
    { 
        let a = 2; 
    } 
    console.log(a); // 1 
} 
test5();

위의 함수 범위에서 let을 사용하여 a를 1로 선언하고, 콘솔이 함수 내에서 블록 수준 범위에 속하지 않기 때문에 블록 수준 범위에서는 a를 2로 선언합니다. , 즉 출력 1입니다.

2. 유형 비교

var arr = [], 
    arr2 = [1]; 
console.log(arr === arr2); // false

위의 두 가지 배열을 비교하면 콘솔이 거짓입니다.

var arr = [], 
    arr2 = []; 
console.log(arr === arr2); // false

위의 두 개의 동일한 어레이를 비교하십시오. 두 개의 개별 어레이는 결코 동일하지 않으므로 콘솔은 거짓입니다.

var arr = [], 
    arr2 = {}; 
console.log(typeof(arr) === typeof(arr2)); // true

위의 배열과 객체를 비교하려면 typeof를 사용하세요. typeof는 NULL을 얻기 때문에 배열과 객체의 유형은 모두 객체이므로 콘솔은 true입니다.

var arr = []; 
console.log(arr instanceof Object); // true 
console.log(arr instanceof Array); // true

위에서는 변수가 객체의 인스턴스에 속하는지 확인하기 위해 인스턴스를 사용합니다. 배열도 JavaScript의 객체 유형이므로 두 콘솔 모두에 해당됩니다.

3. this는

var obj = { 
    name: 'xiaoming', 
    getName: function () { 
        return this.name 
    } 
}; 
console.log(obj.getName());  // 'xiaoming'

을 가리킵니다. 위의 개체 메서드에서 개체 자체를 가리키므로 "xiaoming"이 출력됩니다.

var obj = { 
    myName: 'xiaoming', 
    getName: function () { 
        return this.myName 
    } 
}; 
var nameFn = obj.getName; 
console.log(nameFn()); // undefined

객체의 메소드는 위의 변수에 할당됩니다. 이때 메소드의 이 메소드는 더 이상 obj 객체를 가리키지 않으므로 window 객체를 가리키므로 콘솔은 다음과 같습니다. "한정되지 않은".

var obj = { 
    myName: 'xiaoming', 
    getName: function () { 
        return this.myName 
    } 
};  
var obj2 = { 
    myName: 'xiaohua'  
}; 
var nameFn = obj.getName; 
console.log(nameFn.apply(obj2)); // 'xiaohua'

위의 변수 nameFn에는 obj 객체의 메소드도 할당되어 있는데 이는 apply 메소드를 통해 obj2 객체를 가리키므로 최종 콘솔은 'xiaohua'입니다.

4. 함수 매개변수

function test6() { 
    console.log(arguments); // [1, 2] 
} 
test6(1, 2);

위의 내용은 함수에 전달된 매개변수 배열을 얻기 위해 함수의 인수 객체를 사용하므로 출력 배열은 [ 1, 2].

function test7 () { 
    return function () { 
        console.log(arguments); // 未执行到此，无输出 
    } 
} 
test7(1, 2);

위에서도 매개변수를 얻기 위해 인수를 사용하지만, test7(1, 2)는 반환되는 함수를 실행하지 않기 때문에 test7(1, 2)(3, 4)가 출력되지 않습니다. )을 실행하면 [3, 4]가 출력됩니다.

var args = [1, 2]; 
function test9() { 
    console.log(arguments); // [1, 2, 3, 4] 
} 
Array.prototype.push.call(args, 3, 4); 
test9(...args);

위에서는 Array.prototype.push.call() 메서드를 사용하여 args 배열에 3과 4를 삽입하고, ES6 스프레드 연산자(...)를 사용하여 배열을 확장하고 전달합니다. test9에 입력하므로 콘솔은 [1, 2, 3, 4]입니다.

5. 클로저 문제

var elem = document.getElementsByTagName('div'); // 如果页面上有5个div 
for(var i = 0; i < elem.length; i++) { 
    elem[i].onclick = function () { 
        alert(i); // 总是5 
    }; 
}

위는 매우 일반적인 클로저 문제입니다. 어떤 div를 클릭해도 나타나는 값은 항상 5입니다. 클릭이 발생했을 때 이벤트 발생 시점에 i의 값은 이미 5인데, 이는 다음과 같은 방법으로 해결할 수 있습니다.

var elem = document.getElementsByTagName('div'); // 如果页面上有5个div 
for(var i = 0; i < elem.length; i++) { 
    (function (w) { 
        elem[w].onclick = function () { 
            alert(w); // 依次为0,1,2,3,4 
        }; 
    })(i); 
}

바운드 클릭 이벤트 외부에 즉시 실행 기능을 캡슐화하고 통과합니다. 나는 함수에 들어간다.

6. 객체 복사 및 할당

var obj = { 
    name: 'xiaoming', 
    age: 23 
}; 
 
var newObj = obj; 
newObj.name = 'xiaohua'; 
console.log(obj.name); // 'xiaohua' 
console.log(newObj.name); // 'xiaohua'

위에서는 obj 객체를 newObj 객체에 할당하여 newObj의 이름 속성을 변경했습니다. obj 객체 속성도 변조되었습니다. 이는 newObj 객체가 실제로 실제 복사본이 아닌 메모리 주소만 가져오기 때문에 obj 객체가 변조되었기 때문입니다.

var obj2 = { 
    name: 'xiaoming', 
    age: 23 
}; 
var newObj2 = Object.assign({}, obj2, {color: 'blue'}); 
newObj2.name = 'xiaohua'; 
console.log(obj2.name); // 'xiaoming' 
console.log(newObj2.name); // 'xiaohua' 
console.log(newObj2.color); // 'blue'

위의 Object.asset() 메서드를 사용하여 객체의 전체 복사를 수행하면 소스 객체가 변조될 가능성을 피할 수 있습니다. Object.sign() 메서드는 소스 객체의 열거 가능한 속성을 원하는 만큼 대상 객체에 복사한 다음 대상 객체를 반환할 수 있기 때문입니다.

var obj3 = { 
    name: 'xiaoming', 
    age: 23 
}; 
var newObj3 = Object.create(obj3); 
newObj3.name = 'xiaohua'; 
console.log(obj3.name); // 'xiaoming' 
console.log(newObj3.name); // 'xiaohua'

Object.create() 메서드를 사용하여 객체를 복사할 수도 있습니다. Object.create() 메서드는 지정된 프로토타입 객체와 속성을 사용하여 새 객체를 생성할 수 있습니다.

결론

JavaScript를 배우는 것은 오랜 과정이며 하루아침에 성취할 수 없습니다. 이 기사에서 소개한 내용이 JavaScript를 배우는 학생들이 JavaScript 구문을 더 깊이 이해하고 숙달하고 우회를 피할 수 있도록 도움이 되기를 바랍니다.