Javascript_js オブジェクト指向のクラスとクロージャ

JavaScript もオブジェクト指向であると言う人もいますが、もちろん、これは概念的な違いにすぎません。重要なのは、JavaScript がオブジェクト指向であるかどうかを説明することではありません。クラスは他の言語のクラスと非常によく似た動作をします。ただし、内部実装メカニズムは確かに一貫性がありません。JavaScript のクラスを他の言語のクラスと盲目的に比較すると、混乱することがあります。

まず、簡単なコードを見てみましょう。一般に、教科書では次のような新しいクラスの作成方法が説明されています (もちろん、より複雑なメソッドもありますが、本質的には同じです)。 >

コードをコピー コードは次のとおりです:

function MyClass(x) {

this.x = x ;
}
var obj = new MyClass('Hello class');
alert(obj.x);


obj に x があることは間違いありません。このときの属性、現在の値 Hello クラスですが、obj とは一体何でしょうか。 MyClass は単なる関数であり、それをコンストラクターと呼びます。他の OO 言語では、コンストラクターを class キーワード内に配置する必要があります。つまり、クラスを最初に宣言する必要があります。また、関数本体のこれは何でしょうか？他の OO 言語では、この概念は非常に明確であり、コンストラクターが実行される前にクラスが宣言されており、クラス内のいくつかのフィールドが定義されているため、これは現在のオブジェクトです。

まず説明します。JavaScript 関数では、this キーワードは呼び出される関数のスコープを表します。スコープの概念は理解するのが簡単ではありません。ただし、単純に呼び出し関数のオブジェクトとして考えることができます。 MyClass 関数をもう一度見てみると、この中にあるものは何でしょうか?

コードを次のように変更すると:

コードをコピーします コードは次のとおりです:

var obj = MyClass('Hello class');

これは完全に文法的です。このコードをブラウザで実行すると、デバッグ後にこれがウィンドウ オブジェクトであることがわかります。 obj とは何の関係もありません。obj はまだ未定義であり、alert の結果はありません。元のコードが機能するのは new キーワードのおかげです。 new キーワードは、通常の関数をコンストラクターに変換します。言い換えれば、MyClass は依然として通常の関数であり、obj を構築できるのは基本的に new によるものです。関数の前に新しいキーワードがある場合、JavaScript は匿名オブジェクトを作成し、現在の関数のスコープをこの匿名オブジェクトに設定します。そして、これがその関数内で参照される場合、それは参照されている匿名オブジェクトになります。最終的に、関数が返さなくても、匿名オブジェクトが返されます。すると、obj には当然 x 属性が付きます。

この MyClass はクラスに少し似ています。ただし、これが新しい仕事のすべてではありません。 Javascript は、プロトタイプに依存して簡単に継承を実装することもできます。結局のところ、プロトタイプも、関数を含むすべてがオブジェクトです。さらに重要なのは、前述したように、JavaScript はプロトタイプベースです。つまり、JavaScript にはクラスの概念が存在しません。関数がクラスのように動作する理由は、プロトタイプに依存するためです。関数を含むプロパティ。オブジェクトを構築するプロセスでは、前の段落で説明した new も、最終的に匿名オブジェクトを返す前に、その関数のプロトタイプ内の属性をオブジェクトに 1 つずつコピーします。ここでのコピーはコピーされた参照であり、新しく作成されたオブジェクトではありません。コンテンツをコピーすることは、それを構築した関数のプロトタイプへの参照を保持することと同じです。一部の教科書では、「すべてのオブジェクトはプロトタイプ属性を持っている」と漠然と書かれていますが、これは不正確です。内部的にはプロトタイプ属性がありますが、外部からは見えません。関数オブジェクトのみがプロトタイプ属性を持ち、関数オブジェクトのプロトタイプはデフォルトでコンストラクター属性を持ちます。

次のコードを見てください:

コードをコピーします コードは次のとおりです:

function MyClass(x) {

this.x = x;
var proObj = new MyClass('x');
InheritClass.prototype = proObj; .prototype.protox = 'xxx';
function InheritClass(y) {
this.y = y;
}
var obj = new InheritClass('Hello class'); .prototype.protox = '変更されました';
proObj.x = '変更されました'
alert(obj.x);
The output results are changed and Changed Too. This code shows that the reference to the prototype of the constructor is retained inside the object. It should be noted that the reference to the prototype of its constructor is also retained in proObj. If you change the code to:

Copy the code The code is as follows:

var obj = new InheritClass( 'Hello class');
proObj.protox = 'I am winner';
MyClass.prototype.protox = 'changed';
proObj.x = 'Changed Too';
alert(obj .protox);
alert(obj.x);

The output is I am winner and Changed Too. In fact, these prototypes are referenced layer by layer, forming a prototype chain. When reading the attributes of an object, first look for the attributes defined by yourself. If there are no attributes, it will look for the internal implicit prototype attributes layer by layer. But when writing an attribute, its reference will be overwritten and will not affect the value of the prototype.
Introducing closure again, first of all, the closure here is not the same concept as the transitive closure of relations in discrete mathematics. I thought they were related, but after thinking about it carefully, it seems that they are not the same. There is no connection, they just have the same names. Let’s look at the definition first:
Closure
A "closure" is an expression (typically a function) that can have free variables together with an environment that binds those variables (that "closes" the expression).
Be complete Understanding closures requires a thorough understanding of the mechanism of Javascript functions, and this mechanism is a bit complicated and cannot be explained clearly in a few words. Friends who are interested can read here Javascript clousures. Even this article only briefly explains it. The following principle. The general idea is that any function call is executed in an execution context (Execution Context). This context has a scope object, which includes the local variables, parameters, etc. of the function. Additionally, if a function is an inner function, its scope contains the scope of its outer function. When the inner function encounters a variable name, it starts from the inner scope and continues to the outer scope. Therefore, if the inner function returns an object as an object to the outer function, even if the outer function has finished executing, since its inner function still has a reference pointing to it, the inner function will not be released, because the inner function has the scope of the outer function. Therefore, the local variables of the external function will not be released. This constitutes a closure.