JavaScript のクロージャ、プロトタイプ、匿名関数を学ぶ旅

この記事では、例を通じて JavaScript クロージャー、プロトタイプ、匿名関数を紹介します。詳細については、以下を参照してください。

1. クロージャについて

クロージャを理解するために必要な知識

1. 変数の範囲

例 1:

var n =99; //建立函数外的全局变量
function readA(){
  alert(n); //读取全局变量
}

readA() // この関数を実行します

例 2 :

function readB(){
  var c = 9;
  function readC(){
    console.log(c); //ok c可见
  }
  return readC;
}
alert(c); //error c is not defined.

注: 関数内で変数 c を宣言するときは、必ず var を追加してください。追加しない場合、c はグローバル変数になります

したがって、グローバル変数は関数内で表示されます、関数内のローカル変数は外部からは見えません

jsのスコープは連鎖されており、親オブジェクトの変数は常に子オブジェクトから見えますが、子オブジェクトのオブジェクトは親からは見えません。 object

関数内の内部変数を取得したい場合

したがって、例 3 があります:

function readB(){
  var c = 9;
  function readC(){
    console.log(c);
  }
  return readC();
}
readB();

クロージャは非常に似ており、バリエーションは次のとおりです。これに基づいて作成されました

function readB(){
  var c = 9;
  function readC(){
    console.log(c);
  }
  return readC;
}
var res = readB();
res();

注:

1. クロージャは慎重に使用し、メモリ使用量に注意してください。親関数の状態を保存します

2. 親関数の内部変数の値を自由に変更しないでください

クロージャーについて

注: これは、実行時にそれを含む関数が属するオブジェクトを指します

例 1:

var name = "The Window";

var object = {
  name : "My Object",

　　getNameFunc : function(){  //此时this (这个执行函数)是属于object对象的,是object对象下的一个属性的值
　　  return function(){   //此时this (这个执行函数)是一个匿名函数,从根对象window生成,是属于window
　　　　  return this.name;
　　　　};
　　}
};
console.log(object.getNameFunc()()); //the window

例2:

var name = "The Window";

var object = {
  name : "My Object",

  getNameFunc : function(){
    var that = this;
  　　return function(){
  　　  return that.name;
  　　};

  }
};
console.log(object.getNameFunc()());  //My Object

2. 匿名関数 匿名関数を直接定義して呼び出します匿名関数。この形式は、jquery プラグインの定義で非常に一般的です。

1. 最初に関数アルファベット メソッドを渡し、次にそれを実行します。

( function(){
  console.log('excute self');
}) ();

2. Javascript は式を実行するため、式を優先することにより、括弧の内側から外側に向かって実行されるため、括弧を使用して宣言された関数を強制的に実行できます

(
  function () {
    alert(2);
  }
  ()
);

3. void 演算子 void 演算子を使用して実行します 括弧で囲まれていない単一のオペランド

void function(){ console.log('void') } ();

3. プロトタイプについて

プロトタイプ プロトタイプ

js でプロトタイプを理解するには、まずjs のオブジェクト指向設計を理解する必要があります

function People(name){
  this.name = name;

  console.log(this); //Window 或者 object { name: 'xxx' }
  this.introduce = function(){  //实例对象方法
    console.log(this.name);
  }
}
new People('leon').introduce();
//这里有一个非常有趣的现象,结合前面的来看的话,
//首先function people里的this指向的默认是Window对象
//当 调用 People();时 this 输出为 Window对象
//但一旦调用new People('xx')时, this 输出为 {name:'xx'}
//其实也很好理解,一旦new ,便新建了一个对象

インスタンス オブジェクト メソッドは次のようにする必要があります。 new People('leon').introduce() は静的メソッドを呼び出します。

クラス

var People = {}; //等于一个对象 {} 或者 function 数组都可以 此时People需要是引用类型
People.sayhi = function(to_who){
  console.log('hi '+ to_who);
}
People.sayhi('lee'); //调用时这样调用

のオブジェクトのプロトタイプ メソッドです。

を使用する前に初期化する必要があります。

var People = function(){};       // People 必须为一个 function(){} 即为一个类,不能是对象或值类型或其他引用类型
People.prototype.meet = function(meet_who) {
  console.log('I am '+this.name + ',going to meet ' + meet_who);
};
new People('lee').meet('xx');

プロトタイプ メソッドは、このクラスのオブジェクトによってのみ呼び出すことができます。

A.prototype = new B();

プロトタイプ これは継承によく似ていますが、そうではありません。これはクローンに似ており、より正確です。

親クラスとサブクラスに同じ名前の属性がある場合、近接の原則を採用します。見つからない場合は、一度に 1 レベルずつ上がります。検索、上位を呼び出す属性を指定したい場合はcallメソッドを使用します

extendClass.prototype = new baseClass();
var instance = new extendClass();
var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);
obj1.func.call(obj);

上記の内容はJavaScriptクロージャ、プロトタイプ、匿名関数を学ぶ旅です。編集者によって共有されました。他の関連チュートリアルについては、

JavaScript ビデオ チュートリアル

をご覧ください。