ホームページ > ウェブフロントエンド > jsチュートリアル > エラーが起こりやすいJavaScriptの知識ポイントを詳しく解説

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

黄舟
リリース: 2017-03-03 14:47:14
オリジナル
1199 人が閲覧しました

前書き

この記事は、私が 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(&#39;p&#39;); // 如果页面上有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: &#39;xiaoming&#39;,
    age: 23
};

var newObj = obj;

newObj.name = &#39;xiaohua&#39;;

console.log(obj.name); // &#39;xiaohua&#39;
console.log(newObj.name); // &#39;xiaohua&#39;
ログイン後にコピー

上記では、obj オブジェクトを newObj オブジェクトに割り当て、それによって newObj の name 属性を変更しましたが、実際には newObj オブジェクトが変更されているため、obj オブジェクトの name 属性も改ざんされました。実際のコピーではなくメモリアドレスのみが取得されるため、obj オブジェクトは改ざんされます。

var obj2 = {
    name: &#39;xiaoming&#39;,
    age: 23
};

var newObj2 = Object.assign({}, obj2, {color: &#39;blue&#39;});

newObj2.name = &#39;xiaohua&#39;;

console.log(obj2.name); // &#39;xiaoming&#39;
console.log(newObj2.name); // &#39;xiaohua&#39;
console.log(newObj2.color); // &#39;blue&#39;
ログイン後にコピー

上記の Object.assign() メソッドを使用してオブジェクトのディープ コピーを実行すると、ソース オブジェクトが改ざんされる可能性を回避できます。 Object.assign() メソッドは、ソース オブジェクト自体の列挙可能なプロパティを任意の数でターゲット オブジェクトにコピーし、ターゲット オブジェクトを返すことができるためです。

var obj3 = {
    name: &#39;xiaoming&#39;,
    age: 23
};

var newObj3 = Object.create(obj3);

newObj3.name = &#39;xiaohua&#39;;

console.log(obj3.name); // &#39;xiaoming&#39;
console.log(newObj3.name); // &#39;xiaohua&#39;
ログイン後にコピー

Object.create() メソッドを使用してオブジェクトをコピーすることもできます。Object.create() メソッドは、指定されたプロトタイプ オブジェクトとプロパティを使用して新しいオブジェクトを作成できます。

結論

JavaScript の学習は長いプロセスであり、一夜にして達成できるものではありません。この記事で紹介したポイントが、JavaScript を学習している学生の皆さんが JavaScript 構文をより深く理解して習得し、寄り道を避けるのに役立つことを願っています。

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート