エラーが起こりやすいJavaScriptの知識ポイントを詳しく解説

前書き

この記事は、私が JavaScript を学習する過程で収集し、整理した間違いやすい知識ポイントであり、変数のスコープ、型の比較、このポインター、関数のパラメーター、クロージャの問題、およびオブジェクトのコピーについて説明します。 6 つの側面が浅いところから深いところまで紹介され、説明されています。これには ES6 の知識ポイントも含まれます。

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

上記の 2 つの異なる配列の比較、コンソールは false です。

var arr = [],
    arr2 = [];

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

上の 2 つの同一の配列を比較してください。 2 つの別々の配列は決して等しくないため、そのためコンソールは 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

上記では、instanceof を使用して、変数がオブジェクトのインスタンスに属しているかどうかを判断しています。配列も JavaScript のオブジェクトの一種であるため、どちらのコンソールも当てはまります。

3.this は

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

console.log(obj.getName());  // 'xiaoming'

を指します

上記のオブジェクトメソッドの This はオブジェクト自体を指しているため、xiaoming が出力されます。

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() メソッドを使用して 3 と 4 を args 配列に挿入し、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
    };
}

上記は、クリック イベントをトリガーしたときに i の値がすでに 5 であるため、任意の p をクリックしたときに表示される値は常に 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 属性を変更しましたが、実際には newObj オブジェクトが変更されているため、obj オブジェクトの name 属性も改ざんされました。実際のコピーではなくメモリアドレスのみが取得されるため、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.assign() メソッドを使用してオブジェクトのディープ コピーを実行すると、ソース オブジェクトが改ざんされる可能性を回避できます。 Object.assign() メソッドは、ソース オブジェクト自体の列挙可能なプロパティを任意の数でターゲット オブジェクトにコピーし、ターゲット オブジェクトを返すことができるためです。

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 構文をより深く理解して習得し、寄り道を避けるのに役立つことを願っています。

上記は、エラーが発生しやすい JavaScript の知識ポイントの詳細な説明です。さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。