ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript オブジェクト指向 - 単純なオブジェクトと JSON オブジェクトの作成

JavaScript オブジェクト指向 - 単純なオブジェクトと JSON オブジェクトの作成

黄舟
リリース: 2017-01-19 15:03:42
オリジナル
1245 人が閲覧しました

JavaScript はオブジェクトベースのプログラミング言語であり、その本質は実際にはオブジェクト指向です。オブジェクト指向言語の特徴は、すべての言語にクラスの概念があり、それによって同じプロパティとメソッドを持つオブジェクトをいくつでも作成できることです。ただし、JavaScript にはクラスの概念がありません。通常、JavaScript のオブジェクトはプロトタイプ オブジェクトと呼ばれます。オブジェクトを介して直接オブジェクトを作成できます。たとえば、次のコード:

var person = new Object();
person.name = "张三";
person.age = 20;
person.say = function(){
  alert(this.name+","+this.age);
}
ログイン後にコピー

上記のコードでは、Object を通じて person オブジェクトを単純に作成し、その person オブジェクトに対して 2 つのプロパティと 1 つのメソッドを設定します。

上記の方法で作成したオブジェクトの最大の問題点は、クラス制約がないため再利用できず、合意も得られず運用上問題が生じることです。

Json オブジェクト

JavaScript オブジェクトをネットワーク経由で送信することはできません。ネットワーク経由で送信できるのは文字列のみです。オブジェクトを送信する実現可能な方法は、送信用に XML 形式でオブジェクトを記述することです。たとえば、

<?xml version="1.0" encoding="utf-8"?>
<preson>
  <id>1</id>
  <name>张三</name>
  <age>20</age>
</person>
ログイン後にコピー

ただし、データ送信に XML 形式を使用する場合、送信プロセス中に大量の追加のタグ文字列が生成されるため、伝達効率は高くありません。これらの問題を解決するために、人々は別の文字列オブジェクト形式、つまり Json オブジェクト形式を開発しました。

Json の正式名は JavaScript Simple object notation で、単純なデータ交換形式です。 Json オブジェクトは JavaScript オブジェクトですが、xml 内のタグが省略され、{} を使用してオブジェクトの説明が完了します。

Json 形式では、属性名:属性値で属性を定義します。異なる属性はカンマ (,) で区切られます。最後の属性にはカンマを追加する必要はありません。たとえば、次のコードは Json 形式で person オブジェクトを定義します。

var person = {
  name : "张三",
  age:23,
  say:fuction(){
    alert(this.name+","+this.age);
  }
}
ログイン後にコピー

person オブジェクトのプロパティとメソッドを呼び出す方法は、通常の JavaScript オブジェクトと同じです。例:

// 调用person的say方法
person.say();
ログイン後にコピー

Json を通じてオブジェクト配列を作成することもでき、作成方法は JavaScript 配列と同じです。

var ps = [
  {name:"Leon",age:22},
  {name:"Ada",25}
];
ログイン後にコピー

配列の作成が完了したら、配列内の Json オブジェクトを反復処理することもできます。

for(var i = 0; i < ps.length; i++){
  alert(ps[i].name);
}
ログイン後にコピー

上記は JavaScript オブジェクト指向です - 単純なオブジェクトの作成と JSON オブジェクトのコンテンツの詳細については、PHP 中国語 Web サイト (m.sbmmt.com) に注目してください。


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