JavaScript共通基礎知識強化学習_JavaScriptスキル-jsチュートリアル-php.cn

まず、より公式なテキスト説明を使用して JavaScript を説明しましょう:

JavaScript は、型のサポートが組み込まれた、動的に型付けされた弱い型付けのプロトタイプベースの言語です。そのインタプリタは JavaScript エンジン と呼ばれ、ブラウザの一部であり、クライアント側のスクリプト言語で広く使用されています。これは HTML (標準ユニバーサルマークアップに基づくアプリケーション) で最初に使用されました。言語) HTML Web ページに動的機能を追加するために Web ページで使用されます。
JavaScript には次の特徴があります:

・スクリプト言語。 JavaScript は解釈されるスクリプト言語です。C や C などの言語は最初にコンパイルされてから実行されますが、JavaScript はプログラムの実行中に 1 行ずつ解釈されます。
・オブジェクトベース。 JavaScript はオブジェクトベースのスクリプト言語であり、オブジェクトを作成するだけでなく、既存のオブジェクトを使用することもできます。
・シンプル。 JavaScript 言語は、弱い型指定の変数型を使用し、使用されるデータ型に厳密な要件を課しません。Java の基本的なステートメントとコントロールに基づいたスクリプト言語であり、その設計はシンプルでコンパクトです。
・ダイナミック。 JavaScript は、Web サーバーを経由せずにユーザー入力に応答できるイベント駆動型のスクリプト言語です。 Web ページにアクセスしているときに、マウスがクリックされたとき、上下に移動したとき、またはウィンドウ内で移動したとき、JavaScript はこれらのイベントに直接応答できます。
・クロスプラットフォーム。 JavaScript スクリプト言語はオペレーティングシステムに依存せず、ブラウザーのサポートのみが必要です。したがって、JavaScript スクリプトを作成した後、マシン上のブラウザが JavaScript スクリプト言語をサポートしていれば、そのスクリプトを任意のマシンに持ち込んで使用できます。現在、JavaScript はほとんどのブラウザでサポートされています。

JavaScript は次の部分で構成されます:

・ECMAScript、言語の構文と基本オブジェクトを記述します。
· ドキュメントオブジェクトモデル (DOM) は、Web コンテンツを処理するためのメソッドとインターフェイスを記述します。
・ブラウザオブジェクトモデル (BOM)。ブラウザと対話するためのメソッドとインターフェイスを記述します。

JavaScript にはどのようなデータ型がありますか?

・オブジェクト object には、関数、文字列、配列、オブジェクト、日付などが含まれます。
・文字列
・番号
・ブール値
·null
・未定義

コードの次の部分は上記を証明します:
文字列と数値はオブジェクトであり、文字列と数値は異なるデータ形式です...

 var str = "abc";
 var Str = new String("abc");
 var num = 100;
 var Num = new Number(100);
 console.log(typeof str, typeof Str, typeof num, typeof Num); // string object number object

ログイン後にコピー

オブジェクトプロトタイプチェーンとは何ですか?
新しいオブジェクト (コンストラクターを使用して作成) を使用するか、Object.create を使用してオブジェクトを作成すると、オブジェクトにはプロトタイプとプロトタイプチェーンが含まれます。
例: コンストラクター _obj を作成し、その後 _obj を使用して新しい obj を作成します。このときのプロトタイプチェーンは、obj → _obj → Object.prototype → null となります。
コードを通して説明してみましょう:

 function _obj(){};
 _obj.prototype.name = "野兽"; //每个函数都包含一个prototype属性，这个属性指向一个对象的引用，这个对象就是“原型对象”。
 _obj.prototype.age = 21;
 _obj.prototype.sayHello = function(){
   console.log("Hello "+this.name);
 };
 var obj = new _obj();
 console.log(obj); //_obj{} 而其的__proto__里包含了_obj里的各个属性，包括name，age，sayHello 
 console.log(obj.__proto__ == _obj.prototype); //true
 obj.sayHello(); // Hello 野兽
 console.log(Object.prototype.__proto__); // null 当我们追究到Object(也就是object的源头时)其指向的是null

ログイン後にコピー

Object.create(null) のプロトタイプチェーンは直接 null であることに注意してください。これは、プロトタイプチェーンが非常に短いことを意味します...

JavaScript でスコープを使用するにはどうすればよいですか?
JavaScript で var を使用して変数を宣言すると、実際にはスコープが指すオブジェクトに属性と属性値を追加することになります。
JavaScript にはブロックレベルのスコープはありません。現在のスコープで宣言された変数は現在のスコープ内でのみ使用可能であり、関数内で宣言された変数は関数内でのみ使用可能です (操作が実行されない場合)。関数の外でこの変数を呼び出すと、定義されていないエラーが報告されます。
コードを実行してスコープを理解しましょう:

 var firstNum = 1;
 ~function(){
   var secondNum = 2;
   console.log("在里面打印："+firstNum ,secondNum); // 在里面打印：1 2
 }();
 console.log("在外面打印："+firstNum ,secondNum); // Uncaught ReferenceError: secondNum is not defined(…)

ログイン後にコピー

スコープにはスコープチェーンもあります:

 var firstNum = 1;
 console.log("在最外层打印："+firstNum); // 在最外层打印：1
 ~function(){
   var secondNum = 2;
   console.log("在中间层打印："+firstNum,secondNum); // 在中间层打印：1 2
   ~function(){
     var thirdNum = 3;
     console.log("在最里层打印："+firstNum,secondNum,thirdNum); // 在最里层打印：1 2 3
   }();
   console.log("在中间层打印："+firstNum,secondNum,thirdNum); // Uncaught ReferenceError: thirdNum is not defined(…)
 }();
 console,log("在最外层打印："+firstNum,secondNum,thirdNum); // 由于上面已经报错，而浏览器执行JavaScript又是单线程的，所以压根没执行到这句...

ログイン後にコピー

言い換えると、現在のスコープで宣言された変数はそのサブスコープでも引き続き使用できます。これは素晴らしいことです (笑)。

クロージャとは何ですか?遊び方は？
関数の実行は変数のスコープに依存します。このスコープは関数の呼び出し時ではなく、関数の定義時に決定されます。この種の字句スコープを実現するには、JavaScript 関数オブジェクトの内部状態に関数の論理コードが含まれるだけでなく、現在のスコープチェーンも参照する必要があります。関数オブジェクトはスコープチェーンを通じて相互に関連付けることができ、関数本体内の変数を関数のスコープに格納できます。この機能は実際には「クロージャ」です。
引き続きコードを見てみましょう:

 function counter(){
  var num = 0;
  return {
   count : function(){ return num++; },
   reset : function(){ return num = 0; }
  }
 };
 var firstNum = counter();
 var secondNum = counter();
 console.log(firstNum.count()); // 0
 console.log(secondNum.count()); // 0
 firstNum.reset();
 console.log(firstNum.count()); // 0 num已被重置，所以返回的为0
 console.log(secondNum.count()); // 1 num未被重置，所以返回的是1
 console.log(firstNum,secondNum); // 都为 Object{ count:function(),reset:function(),__proto__} 并且并不能在其中找到counter里var的n，这也实现了函数里的私有变量，只将需要暴露的两个方法给暴露在外。

ログイン後にコピー

闭包用的多的两个作用：读取函数内部的变量值；让这些变量值始终保存着(在内存中)。
同时需要注意的是：闭包慎用，不滥用，不乱用，由于函数内部的变量都被保存在内存中，会导致内存消耗大。

JavaScript中的this
在JavaScript中，this通常指向的是我们正在执行的函数本身，或者是，指向该函数所属的对象。
全局的this → 指向的是Window
函数中的this → 指向的是函数所在的对象
对象中的this → 指向其本身
验证代码：

 console.log(this); // Window {external: Object, chrome: Object, document: document, global: Window, cr: Object…} 全局下执行console.log,所以此处指向的是Window
 ~function seeThis(){
  console.log(this); // Window {external: Object, chrome: Object, document: document, global: Window, cr: Object…} 由于我是在全局下写的这个函数，所以此处指向的还是Window
 }();
 var obj = {
  name:"野兽",
  showThis:function(){
   console.log(this); // Object {name: "野兽",showThis:function(),__proto__} 此处打印的是对象本身
  }
 };
 obj.showThis();

ログイン後にコピー

arguments
在Javascript函数体内，arguments像数组一样（并不是真的数组），有length属性，可以代表传给函数的参数的个数。
简单来说，arguments函数执行时所传的实际参数。
比如：arguments[0]表示传入第一个参数。
用代码验证：

 function argumentsTest(){
  console.log(arguments[0]&#63;arguments[0]:"Hello World",arguments[1]&#63;arguments[1]:"你好 世界")
 };
 argumentsTest(); // Hello World 你好 世界
 argumentsTest("This is firstValue => arguments[0].","This is secondValue => arguments[1]."); // This is firstValue => arguments[0]. This is secondValue => arguments[1].

ログイン後にコピー

暂时就为大家分享这些JavaScript常用基础知识，希望对大家进一步学习掌握javascript程序设计有所帮助。