エラーが発生しやすい 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(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) が実行された場合、出力はありません。 ,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() メソッドを使用して 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 属性も改ざんされているためです。実際に取得されたオブジェクト これは単なるメモリアドレスであり、実際のコピーではないため、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 構文をより深く理解して習得し、寄り道を避けるのに役立つことを願っています。