JavaScript 오류가 발생하기 쉬운 지식 포인트에 대한 자세한 설명

서문

이 글은 제가 자바스크립트를 배우면서 수집하고 정리한 오류가 발생하기 쉬운 지식 포인트들입니다. 변수 범위, 타입 비교, 이 포인터, 함수에 대해 다룰 것입니다. 매개변수, 클로저 문제와 객체 복사 및 할당이 얕은 것부터 깊은 것까지 소개되고 설명되며, 여기에는 ES6 지식 포인트도 포함됩니다.

JavaScript 지식 포인트

1. 변수 범위 a는

var a = 1;
function test() {
    var a = 2;

    console.log(a); // 2
}

test();

위의 함수 범위에서 선언 및 할당되며 콘솔 위에 있으므로 출력은 근접성을 따릅니다. 원칙 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를 다시 선언하는 데 사용됩니다. 그러나 let은 var와 달리 변수 승격 기능이 없으므로 출력 오류 b가 정의되지 않습니다.

function test5() {
    let a = 1;

    {
        let a = 2;
    }

    console.log(a); // 1
}

test5();

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

2. 유형 비교

var arr = [],
    arr2 = [1];

console.log(arr === arr2); // false

위의 두 가지 배열을 비교하면 console은 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'

를 가리킵니다. 위의 객체 메소드에서 this는 객체 자체를 가리키므로 샤오밍이 출력됩니다.

var obj = {
    myName: 'xiaoming',
    getName: function () {
        return this.myName
    }
};

var nameFn = obj.getName;

console.log(nameFn()); // undefined

객체의 메소드는 위의 변수에 할당됩니다. 이때 메소드의 this는 더 이상 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'

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

4. 함수 매개변수

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

test6(1, 2);

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

function test7 () {
    return function () {
        console.log(Array.prototype.slice.call(arguments)); // 未执行到此，无输出
    }
}

test7(1, 2);

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

var args = [1, 2];

function test9() {
    console.log(Array.prototype.slice.call(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('p'); // 如果页面上有5个p

for(var i = 0; i < elem.length; i++) {
    elem[i].onclick = function () {
        alert(i); // 总是5
    };
}

위는 매우 일반적인 클로저 문제입니다. p를 클릭하면 나타나는 값은 항상 5입니다. i의 값은 이미 5입니다. 다음과 같은 방법으로 해결할 수 있습니다.

var elem = document.getElementsByTagName('p'); // 如果页面上有5个p

for(var i = 0; i < elem.length; i++) {
    (function (w) {
        elem[w].onclick = function () {
            alert(w); // 依次为0,1,2,3,4
        };
    })(i);
}

바운드 클릭 이벤트 외부에 즉시 실행 함수를 캡슐화하고 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의 name 속성을 변경했지만 obj 객체의 name 속성도 변조되었습니다. 이는 실제로 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 구문을 더 깊이 이해하고 숙달하고 우회를 피할 수 있도록 도움이 되기를 바랍니다.

위 내용은 자바스크립트 오류가 발생하기 쉬운 지식 포인트에 대한 자세한 설명입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!