エラーが発生しやすい JavaScript のナレッジポイントをまとめたもの

この記事は、私が JavaScript を学習する過程で収集し、整理した間違いやすい知識ポイントであり、変数スコープ、型比較、このポインター、関数パラメータ、クロージャの問題、オブジェクトのコピーの 6 つの側面を取り上げます。 JavaScript のコードをより楽しく書けるように、JavaScript の間違いやすい部分を浅いところから深いところまで紹介して解説していきます。

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 を再宣言するために上記の関数スコープで使用されていますが、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('div'); // 如果页面上有5个div
for(var i = 0; i < elem.length; i++) {
    elem[i].onclick = function () {
        alert(i); // 总是5
    };
}

上記は、クリック イベントをトリガーすると、i の値が常に 5 になるため、div をクリックしたときに表示される値は非常に一般的なクロージャの問題です。はすでに 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);
}

バインドされたクリック イベントの外側に即時実行関数をカプセル化し、その関数に 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.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 オブジェクト指向定義メンバーメソッドインスタンス分析

JavaScript 例外を処理するメソッド

JavaScript の外観モード

以上がエラーが発生しやすい JavaScript のナレッジポイントをまとめたものの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。