JavaScript_javascript スキルでクラス/オブジェクトを作成するためのいくつかの方法の概要

WBOY
リリース: 2016-05-16 17:11:50
オリジナル
988 人が閲覧しました

JS では、オブジェクトの作成 (オブジェクトの作成) は、一般的にクラス オブジェクトの作成と呼ばれるものではありません。JS でのオブジェクトの作成とオブジェクトへのアクセスは非常に柔軟です。

JS オブジェクトは複合型であり、変数名を使用して保存したりアクセスしたりできます。別の言い方をすると、オブジェクトは順序付けされていないプロパティのコレクションであり、コレクション内の各項目は名前と値で構成されます。よく聞く HASH テーブル、ディクショナリ、キーと値のペアに似ていますか? )、値の型は組み込み型 (数値、文字列など) またはオブジェクトである可能性があります。

1. 中かっこで囲みます

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

var emptyObj = {};
var myObj =
{
'id': 1, //属性名は引用符で囲まれ、属性はカンマで区切られます
' name': 'myName'
};
//var m = new myObj() //サポートされていません

オブジェクトが次のように宣言されていることにお気づきでしょうか。 var? 上記のコードと同様に、オブジェクトのコピーは 1 つだけあります。上記のコードのコメント部分のように、クラス オブジェクトをインスタンス化するような new 操作は使用できません。これにより、オブジェクトの再利用が大幅に制限されます。作成するオブジェクトのコピーが 1 つだけ必要な場合を除き、他の方法を使用してオブジェクトを作成することを検討してください。

オブジェクトのプロパティとメソッドにアクセスする方法を見てみましょう。

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

var myObj =
{
'id':1、
'fun':function(){
'name': 'myobj'、
'fun1':function(){
document.writeln(this ['id'] ' ' this['name']);//コレクションモードでアクセス
}
};
myObj.fun();
myObj.fun1();
// Result
// 1-myObj 1 myObj


2. 関数キーワードを使用してクラス
をシミュレートします。 関数内で this を使用して現在のオブジェクトを参照し、値を代入してプロパティを宣言します。変数が var で宣言されている場合、その変数はローカル変数であり、クラス定義内でのみ呼び出すことができます。


function myClass() {
this .id = 5;
this.name = 'myclass';
this.getName = function() {
return this.name;
}
}
var my = new myClass() ;
alert(my.id);
alert(my.getName());
// result
// 5
// myclass


3. 関数本体でオブジェクトを作成し、そのプロパティを宣言して
を返します。 関数本体でオブジェクトを作成するには、最初のポイントでメソッドを使用するか、最初に new Object(); を使用してから各属性に値を割り当てます。

ただし、この方法で作成されたオブジェクトには、VS2008 SP1 ではスマート プロンプトがありません。


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

function myClass() {
var obj =
{
'id':2,
'name':'myclass'
};
return obj ;
}
function _myClass() {
var obj = new Object();
obj.id = 1;
obj.name = '_myclass';
オブジェクトを返します。
}
var my = new myClass();
var _my = new _myClass();
アラート(my.id);
アラート(my.name);
アラート(_my.id);
アラート(_my.name);

// 结果
// 2
// myclass
// 1
// _myclass

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート