JS のトップ 10 エラーを回避する方法

まえがき:

コードを書く過程では、さまざまなエラーが必然的に発生し、送信されたコードはユーザーによって閲覧されることもあります。デバイスから報告されたさまざまなエラーを調査する必要があります。これらのエラーの理由とエラーが表示されるブラウザを理解すると、バグをより早く見つけることができます。トップ 10 の JS エラーとそれらを回避する方法を見てみましょう。

1. Uncaught TypeError: プロパティを読み取れません

このエラーは、Chrome ブラウザによって報告されます。未定義変数のプロパティを読み取ろうとするか、未定義変数のメソッドを呼び出そうとすると、エラーが報告されます。これは Chrome ブラウザで簡単に再現できます。

回避方法: 変数の属性値を取得するときは、その変数が定義されていることを確認してください。たとえば、次のように記述できます。

foo && foo.bar

2. TypeError: 'unknown' is not an object (evaluating

このエラーの理由は次のとおりです。最初のものは、これが safari ブラウザによって報告されたエラーであることを除いて、safari ブラウザで再現できます。

#3. TypeError: null はオブジェクトではありません (評価中)

このエラーは、変数が undefine から null に変更されたことを除いて、同じ理由で Safari からも発生します。したがって、null 属性またはメソッドを呼び出すと、このエラーが報告されます。

4. (不明): スクリプト エラー

これは素晴らしいです。通常、監視システムでもこの種のエラーが発生します。エラーの種類はスクリプト エラーのみを報告します。具体的な情報は提供されないため、確認するのは困難です。

なぜスクリプト エラーが報告されるのですか? セキュリティ上の理由から、ブラウザは意図的に、スクリプト エラーがスローされる特定のエラー メッセージを非表示にします。機密性を避けるために他のドメインにある JS ファイル 情報は、悪意のあるスクリプトによって誤ってキャプチャされます。言い換えれば、ブラウザは、同じドメイン名のスクリプトのみが特定のエラー情報をキャプチャすることを許可します。これは本質的にブラウザのクロスドメイン エラーです。

たとえば、Web サイトがサードパーティ CDN の js ファイルでホストされているサーバーを実行する場合、この js スクリプトにエラーがある場合、有用な情報ではなくスクリプト エラーが報告されます。 #解決策:

Access-Control-Allow-Origin: * // 或者是指定网站www.example.com

ステップ 1: クロスドメイン HTTP 応答ヘッダーを追加します

<script src="http://another-domain.com/app.js " crossorigin="anonymous"></script>

ステップ 2:crossorigin="anonymous" 属性を追加します

var Person = {
    name : "daisy",
    getName : function() {
        console.log(this.name)
    },
    print: function() {
      this.getName()
    }
};

これはブラウザに通知するのと同じですこの scipt ファイルをリクエストするときに匿名メソッドを使用するには、スクリプト中に潜在的なユーザー ID 情報 (Cookie、HTTP 証明書など) がサーバーに送信されないことを意味します。 Crossorigin="anonymous" 属性を設定する前に、http 応答ヘッダーが設定されていることを確認してください。 Access-Control-Allow-Origin:* はクロスドメインが許可されていることを意味します。それ以外の場合、このスクリプト タグは Firefox では実行されません。

5. TypeError: オブジェクトはプロパティ

このエラーは IE で報告されます。このエラーは、定義されていないメソッドを呼び出すときに報告されます。 .

このエラーはchromeの「TypeError: 'unknown' is not a function」と同じです。ブラウザごとに報告されるエラー単語が異なるだけです。

この種のエラーは、名前空間を使用する IE でよく発生します。 99.9% の場合、IE がこれが指す正しい名前空間を解決できないことが原因です。次に例を示します。

var Person = {
    name : "daisy",
    getName : function() {
        console.log(Person.name)
    },
    print: function() {
      Person.getName()
    }
};

たとえば、 Person 名前空間では、印刷時に this.getName() メソッドを呼び出すことができます。ただし、IE では機能しないため、名前空間を明示的に指定する必要があります。

function clearBoard(){
  alert("Cleared");
}
document.addEventListener("click", function(){
  this.clearBoard(); // what is “this” ?
});

(注: 私は Windows コンピュータを持っていませんし、== を見つけるのが面倒なので検証していません。原文の翻訳によると、これは次のとおりだと理解しています)意味. 興味があれば確認してコメント欄で教えてください. 結論~)

#6. TypeError: 'unknown' は関数ではありません

これが上記の理由で、Chrome/Firefox は未定義のメソッドを呼び出します。詳細に入る必要はありません。

もちろん、過失がない限り、未定義のメソッドを直接呼び出す人はいないでしょうが、これは主にコールバック関数や必要なパッケージでの理解が不十分なことが原因です。例:

var self=this;  // save reference to 'this', while it's still this!
document.addEventListener("click", function(){
  self.clearBoard();
});

この場合、コールバック関数の this は実際にはドキュメントを指しており、外側の層で定義されている clearBoard 名前空間のスコープはウィンドウ内にあるため、「Uncaught TypeError: this.clearBoard」 「これは関数ではありません」というエラーが報告されます。

上記の問題を解決するには多くの方法があります:

1. 外側の this を保存して、self が引き続き Windows を指すようにすることができます。

document.addEventListener("click",this.clearBoard.bind(this));

2.bind を使用してこの方向を変更することもできます。

document.addEventListener("mousemove", function (event) {
  console.log(event);
})

7. Uncaught RangeError

このエラーは、Chrome の多くのシナリオで表示されます。その 1 つは、停止条件を使用せずに再帰を使用することです。

八、TypeError: Cannot read property ‘length’

这个错误是调用了undefined的length属性，发生在Chrome中。

所以我们在取一个变量的length时候，一般都是string或者array，要注意他们是有值的。

九、Uncaught TypeError: Cannot set property

给undefined设置属性的时候会报错。

十、ReferenceError: event is not defined

访问一个没有定义或者不在当前作用域的变量会报这个错。

什么时候容易出这个错呢？在事件的回调中，如果要使用event要注意传入event。

document.addEventListener("mousemove", function (event) {
  console.log(event);
})

因为有些浏览器不会自动帮你传，比如火狐，就会报错。所以最好还是自己传。

推荐教程：《JS教程》

以上がJS のトップ 10 エラーを回避する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。