JavaScript 関数、オブジェクトの作成、カプセル化、プロパティとメソッド、inheritance_javascript スキル

1. 関数
js に触れた当初からとても柔軟に感じます。例えば、関数
の書き方は N 種類あります。 例: function showMsg(){ }, var showMsg=function( ){}, showMsg=function(){}
違いはないようですが、本当に同じですか?

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

///-------- ------------ -------------------------------------- ------------ -------

-------
//関数定義: 名前付き関数 (宣言型)、匿名関数 (参照式)
//宣言型、関数実行コードの前に定義コードが解析されます。
function t1(){
dwn("t1"); >}
t1();
function t1(){
dwn("new t1")
}
//実行中に動的に解析される参照型関数操作
var t1=function (){
dwn("新しい新しい t1");
}
t1();
var t1=function(){
dwn( "new new new t1");
}
t1()
//上記の出力: new t1、new t1、new new t1


おそらく出力 t1、new t1、new newt1、new new new t1 になるはずですが、結果は次のようなものではないことを理解してください: 宣言

式、定義コードは関数の前に解析されます。実行コード
もう一歩深く言えば、スコープチェーンの問題と言えます。実際、最初の 2 つのメソッドは window.t1 に相当します。t1 は window のパブリック プロパティに割り当てられていることがわかります。 >後の 2 つのメソッドは t1 が変数であると理解でき、var を削除した後の 4 番目のメソッドの結果は変わりません
ただし、4 番目のメソッドの場合はfunction t1(){} のような文に変更されます。式を実行すると、結果は new new new t1,new new new

t1,new new t1,new new t1
私の理解によれば、最初の 2 つは、この答えがなぜそうなのかよく理解できます。 3 つ目も理解できますが、最後の出力は

よりも混乱します。それに答えられる専門家がいることを願っています
さらに、 (function(){...})() などの匿名関数 書き方としては、最後の括弧がパラメータ入力
に使われており、var t1=new function(){..} のような記述があります。実際、t1 はすでにオブジェクトです
例:




コードをコピー

コードは次のとおりです: var t2 = new function() { var temp = 100; //パブリック メンバー、これら 2 つの概念は 3 番目で説明します。以降

return temp this.temp;

alert (typeof(t2)) //object
alert(t2.constructor()); >さらに、システム組み込み関数オブジェクトを使用して関数を構築することもできます。例:
var t3 = new Function('var temp = 100; this.temp = 200; return temp this.temp ;'); //この位置に new が追加されているかどうかに関係なく、結果は同じです。なぜ
alert(typeof(t3)) //function
alert(t3()); 🎜>

2 番目に、オブジェクトを作成します
まず、オブジェクト指向プログラミング (OOP) について理解します。OOP テクノロジでは、多くの

コード モジュールが使用されます。各モジュールは、それぞれ特定の機能を提供します。他のモジュール
から隔離されているか、完全に独立している場合もあります。このモジュール式プログラミングのアプローチにより、優れた多様性が提供され、コードを再利用する機会が大幅に増加します。この問題

をさらに詳しく説明するために、コンピューター上の高性能アプリケーションが一流のレーシング カーであると仮定します。従来のプログラミング手法を使用すると、自動車は
単一ユニットになります。車を改善したい場合は、ユニット全体を交換するか、メーカーに送り返して車の専門家にアップグレードしてもらうか、新しい

車を購入する必要があります。 OOP テクノロジーを使用すると、弓のこで車体を切断する必要がなく、メーカーから新しいエンジンを購入し、指示に従って自分で交換するだけで済みます。
しかし、議論のほとんどは、JavaScript は直接的なオブジェクト指向言語ではないが、シミュレーションを通じてオブジェクト指向言語が実行できる多くのこと (継承など) を実行できるというものです。

ポリモーフィズム、カプセル化、JavaScript ならできます (不可能ではありません。思いつかないだけです)




コードをコピー


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

///--------------------------------- ---------------- ---------------------------------- ----------- - ------ //オブジェクトを構築する次の 3 つのメソッド //新しいオブジェクト、オブジェクトのインスタンスを作成します var a=new Object(); a.x=1,a.y= 2;

//オブジェクトの直接量

var b={x:1,y:2};
function Point(x,y){ //C# クラスと同様
this.x=x;
}
var p=new Point(1, 2); //クラスをインスタンス化します


最初のメソッドは、基本オブジェクトを構築し、属性を直接追加することによって実装されます。2 番目のメソッドは、最初のメソッドと同様であり、最初のメソッドのショートカット表現とみなすことができます。


3 番目の方法では、「クラス」に基づいて同じタイプの複数のオブジェクトを作成できます

3. オブジェクト属性 (パブリックおよびプライベート) のカプセル化
例付きの図
function List (){
var m_elements=[]; //ここで var 宣言がない場合は、m_elements がグローバル変数

になり、alert などの外部から直接アクセスできます。 (m_elements[0])

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

m_elements=Array .apply(m_elements,arguments);
//使用時にゲッターをシミュレートします。 alist.length;
//getName() メソッドと同等: this.length=function(){return m_elements .length;},使用時

alist.length();
//パブリック プロパティには、「.」演算子または添え字
this.length={
valueOf:function(){
return m_elements.length;
},
toString:function(){
return m_elements.length;
}
}
//このメソッドは、alert( alist) は、alert(alist.toString()) と同等です。
this.toString=function(){
return m_elements.toString();
}
// パブリック メソッド
this .add=function(){
m_elements.push.apply(m_elements,arguments);
}
//プライベートメソッドはクロージャの概念を含む次の形式です。続きの説明を続けましょう
//var add=function() または function add()
//{
//m_elements.push.apply(m_elements,arguments)
//}
}
var alist=new List(1,2,3);
dwn(alist); //=alert(alist.toString())、出力 1,2,3
dwn(alist.length); //出力 3
alist.add(4,5,6);
dwn(alist); //出力 1,2,3,4,5,6
dwn(alist.length); //出力 6

4. プロパティとメソッドの種類
JavaScript では、オブジェクトのプロパティとメソッドは、プライベート プロパティ (プライベート プロパティ)、動的パブリック

の 4 つの異なるタイプをサポートします。プロパティ (動的パブリック プロパティ)、静的パブリック プロパティ/プロトタイプ プロパティ (静的パブリック プロパティまたはプロトタイプ プロパティ)、
静的プロパティ (静的プロパティまたはクラス プロパティ)。プライベート プロパティは外部からは完全にアクセスできず、内部ゲッターと

セッターを介してアクセスできます (どちらもシミュレーションです)。動的パブリック プロパティは外部からアクセスでき、各オブジェクト インスタンスはコピーを保持します。相互に影響しません。プロトタイプ
の属性は、各オブジェクト インスタンスと一意のコピーを共有します。インスタンスの属性としては使用されず、クラスの属性としてのみ使用されます。
以下は例です:

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

///-- ------------------------------------------- ----- -------------------------------------

-- ----
//動的パブリック型、静的パブリック型 (プロトタイプ プロパティ)
function myClass(){
var p=100; //プライベート プロパティ
this.x=10; /dynamic public property
}
myClass.prototype.y=20; //static public プロパティまたはプロトタイプ プロパティ。

プロパティを myClass のプロトタイプに動的に追加し、インスタンス化されたすべてのオブジェクトに適用されます。ここではプロトタイプが使用されていることに注意してください。これは非常に便利です。
//高度な JavaScript ステージになるには、プロトタイプとクロージャーを理解し、適切に適用する必要があります。
myClass.z=30; //static property
var a=new myClass();
dwn(a.p) //未定義
dwn(a.x) //10
dwn(a.y) //20
a.x=20; 🎜>a.y=40;
dwn(a.x); //20
dwn(a.y); // オブジェクト a の属性 x を削除します。 a.y); //オブジェクト a の属性 y を削除します
dwn(a.x); //未定義
dwn(a.y); //20 静的パブリック属性 y をプロトタイプ属性 y
dwn に戻します(削除後 a.z); //未定義のクラス属性にはオブジェクトを通じてアクセスできません


5. プロトタイプ (prototype)
の一部のみです。ここで説明する、プロトタイプとクロージャは両方ともです。これは、ほんの数語で明確に説明できるものではありません。これがあなたに何らかの啓発を与えることができれば、あなたは幸運です
「猫を撮って虎を描く」という慣用句のように、ここでの猫はプロトタイプ、トラはタイプであり、次のように表現できます: Tiger.prototype=someone cat または

tiger.prototype=new cat()
プロトタイプのプロパティは固有のオブジェクト インスタンスごとにコピーします。インスタンスの 1 つがプロトタイプ プロパティの値を調整すると、すべてのインスタンスが調整されます

この属性を使用するたびに、これに注意する必要があります
次は型チェーンですプロトタイプ関係の:




コードをコピー

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

関数 ClassA(){
}
ClassA.prototype=new Object();
関数 ClassB(){
}
ClassB.prototype=new ClassA() ;
function ClassC(){
}
ClassC.prototype=new ClassC();
var obj=new ClassC(); //true
dwn(objinstanceofClassB); //true
dwn(objinstanceofObject); //true
デフォルト値のポイントオブジェクト:
function Point2(x,y){
if (x) this.x=x;
if (y) this.y=y;
}
//Point2 オブジェクトの x を設定します、y のデフォルト値は 0 です
Point2.prototype.x=0
//p1 はデフォルト (0,0) オブジェクトです
var p1 = new Point2(); //var p1=new Point2 はエラーなく書けますが、なぜ
//P2 割り当て
var p2=new Point2(1,2); ," p1.y); //0,0
dwn(p2.x "," p2.y); //1,2
オブジェクトのプロパティを削除すると、プロトタイプのプロパティは に戻ります。初期化された状態:
function ClassD(){
this.a=100;
this.c=300
}
ClassD.prototype=new ClassD() ; //その値を含む、ClassD の元のプロパティをプロトタイプとして設定します
ClassD.prototype.reset=function(){ //(この中の var each) の非プロトタイプ プロパティを削除します{
これを削除します
}
}
var d=new ClassD()
d.a); //100
d.a*=2; >d.b*= 2;
dwn(d.a) //400
dwn(d.c); d.reset( ); //非プロトタイプ属性を削除し、すべてのプロトタイプを返します。
dwn(d.b); //200
dwn(d.c);


6. 継承
2 つのクラスが同じインスタンス型である場合、それらの間には特定の関係が存在します。

その関係。を継承といいます。これは C# と JAVA の両方で利用できるため、具体的な理解には立ち入りません。
JavaScript ではメソッドからの継承は直接サポートされていませんが、前述したように、メソッドは構築継承、プロトタイプ継承、インスタンス継承、コピー継承の 4 つのタイプに要約できます。マスターした後は、混合継続

方法もあります。これは何ですか? 前の 4 つからいくつかを選択して混合する方法です。
次の例は、Return of the King からのものです。これには、apply、call などが含まれます。Array の使用法に興味がある場合は、庭
1 で

を検索してください。構築継続方法の例:




コードをコピー


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


//コレクション型を定義します
関数 Collection(size)
{

this.size = function(){return size} ; //パブリック メソッド、継承可能} Collection.prototype.isEmpty = function(){ //静的メソッド、継承不可継承return this.size() == 0; }

//コレクション型を「継承」する ArrayList 型を定義します

関数 ArrayList()
{
var m_elements = []; //プライベートメンバーは継承できません
m_elements = Array.apply(m_elements, argument);

//ArrayList 型はコレクションを継承します
this.base = Collection ;
this.base.call(this, m_elements.length );

this.add = function()
{
return m_elements.push.apply(m_elements, argument); 🎜>}
this.toArray = function()
{
return m_elements;
}
}

ArrayList.prototype.toString = function()
{
return this.toArray().toString();
}
//ArrayList 型を継承する SortedList 型を定義します。
関数 SortedList()
{
// SortedList 型は ArrayList を継承します。
this.base = ArrayList;

this.sort = function()
{
var arr = this.toArray();
arr.sort.apply(arr, argument);
}
}

//ArrayList を構築します
var a = new ArrayList(1, 2,3);
dwn(a);
dwn (a.size()); //a は Collection
dwn(a.isEmpty) から継承します。 isEmpty() メソッドを継承しません

//SortedList を 1 つ作成します
var b = new SortedList(3,1,2); //b ArrayList から add() メソッドを継承
dwn(b.toArray() ); //b ArrayList から toArray() メソッドを継承
b.sort() メソッド
dwn(b.toArray());
dwn(b );
dwn(b.size()); //b はコレクション

から継承します🎜>2、プロトタイプ継承の例:




コードをコピー


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

//Define a Point type
function Point(dimension)
{

this.dimension = dimension;
}

//Define a Point2D type, "inherits" Point type
function Point2D(x, y)
{
this.x = x;
this.y = y;
}
Point2D.prototype .distance = function()
{
return Math.sqrt(this.x * this.x this.y * this.y);
}
Point2D.prototype = new Point(2) ; //Point2D inherits Point

//Define a Point3D type and also inherits Point type
function Point3D(x, y, z)
{
this.x = x;
this.y = y;
this.z = z;
}
Point3D.prototype = new Point(3); //Point3D also inherits the Point

//construction A Point2D object
var p1 = new Point2D(0,0);
//Construct a Point3D object
var p2 = new Point3D(0,1,2);

dwn( p1.dimension);
dwn(p2.dimension);
dwn(p1 instanceof Point2D); //p1 is a Point2D
dwn(p1 instanceof Point); //p1 is also a Point
dwn(p2 instanceof Point); //p2 is a Point

The above two methods are the most commonly used
3, instance inheritance method example:
Before talking about this method example, Let’s talk about the limitations of the construction inheritance method, as follows:

Copy code The code is as follows:

function MyDate ()
{
this.base = Date;
this.base.apply(this, arguments);
}
var date = new MyDate();
alert(date .toGMTString); //undefined, date does not inherit from the Date type, so there is no toGMTString method

Some methods of the core object cannot be inherited by the constructor because the core object is not as customized as ours How about

performing assignment or initialization operations
in the constructor like a normal object and replacing it with prototypal inheritance? , as follows:

Copy code The code is as follows:

function MyDate(){}
MyDate.prototype=new Date();
var date=new MyDate();
alert(date.toGMTString); //'[object]' is not a date object, and it still does not inherit the Date type!

Now, switch to instance inheritance:

Copy the code The code is as follows:

function MyDate()
{
var instance = new Date(); //instance is a newly created date object
instance.printDate = function(){
document. write("

" instance.toLocaleString() "

");
} //Extend the printDate() method to instance
return instance; //Return instance as the constructor Value return
}
var myDate = new MyDate();
dwn(myDate.toGMTString()); //The correct time string was successfully output this time. It seems that myDate is already a Date. Instance

, inheritance successful
myDate.printDate(); //If there is no return instance, it cannot be accessed with subscripts, because it is a private object method
4, copy inheritance method Example:

Copy code The code is as follows:

Function.prototype.extends = function(obj)
{
for(var each in obj)
{
this.prototype[each] = obj[each];
//Copy the properties of the object one-to-one, but It is slow and prone to problems
//So this "inheritance" method is generally not recommended
}
}
var Point2D = function(){
//...
}
Point2D.extends(new Point())
{
//...
}

This inheritance method seems to be rarely used.
5, mixed inheritance example:

Copy code The code is as follows:

function Point2D( x, y)
{
this.x = x;
this.y = y;
}
function ColorPoint2D(x, y, c)
{
Point2D .call(this, x, y); //This is construction inheritance, calling the constructor of the parent class
//From the previous example, this is equivalent to
//this.base=Point2D ;
//this.base.call(this,x,y);
this.color = c;
}
ColorPoint2D.prototype = new Point2D(); //Prototype is used here Inherit and let ColorPoint2D take the Point2D object as the prototype