ホームページ > ウェブフロントエンド > jsチュートリアル > オブジェクトを定義するJavaScriptコンストラクターメソッド_基礎知識

オブジェクトを定義するJavaScriptコンストラクターメソッド_基礎知識

WBOY
リリース: 2016-05-16 16:22:38
オリジナル
1535 人が閲覧しました

JavaScript は、実行時にオブジェクトに属性を追加したり、オブジェクトから属性を削除したりできる動的言語です

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


<頭>
<スクリプトタイプ="text/javascript">
/*
//01. オブジェクトを定義する最初の方法
var オブジェクト =new Object();
アラート(オブジェクト.ユーザー名);
//01.1 属性ユーザー名を追加
オブジェクト["ユーザー名"]="liijianglong";
//object.username="liujl";
アラート(オブジェクト.ユーザー名);
//01.2 属性ユーザー名を削除
delete object.username;//ユーザー名属性がオブジェクト object
から削除されました アラート(オブジェクト.ユーザー名);
*/
//02. オブジェクトを定義する 2 番目の方法 - JavaScript でオブジェクトを定義する最も一般的な方法
var object={name:"zhangsan",age:10,sex:"fale"};
アラート(オブジェクト名);
アラート(オブジェクト.年齢);
アラート(オブジェクト.セックス);





関数自体がオブジェクトであるため、属性名:メソッド名も使用できます。

JavaScript 配列の並べ替え

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


<頭>
<スクリプトタイプ="text/javascript">
var array=[1,3,25];
//////////////////////////////////
var Compare=function(num1,num2){
var temp1=parseInt(num1);
var temp2=parseInt(num2);
If(temp1 return -1;
}else if(temp1==temp2){
return 0;
}その他{
1 を返します;
}
}
//array.sort(compare);//01. 関数名はオブジェクト参照です
/////////////////////////////////
//02.匿名関数メソッド///////////////////

array.sort(function c(num1,num2){
var temp1=parseInt(num1);
var temp2=parseInt(num2);
If(temp1 return -1;
}else if(temp1==temp2){
return 0;
}その他{
1 を返します;
}
});
//////////////////////////////////
アラート(配列);






JavaScript でオブジェクトを定義するいくつかの方法 (JavaScript にはクラスの概念はなく、オブジェクトのみがあります)

最初の方法: 既存のオブジェクトに基づいてプロパティとメソッドを拡張します

コードをコピーします コードは次のとおりです:
<スクリプトタイプ="text/javascript">
//01. 既存のオブジェクトに基づいてプロパティとメソッドを拡張します
var object=new Object();
object.username="zhangsan";
object.sayName=関数 (名前){
This.username=name;
アラート(この.ユーザー名);
}
アラート(オブジェクト.ユーザー名);
object.sayName("lisi");
アラート(オブジェクト.ユーザー名);



JavaScript には Java のようなクラスの概念がないため、クラスを作成すると、これらのプロパティとメソッドを含むオブジェクトを新規に取得できます。

現時点で object2 を所有したい場合は、上記のコードの別のコピーを記述することしかできませんが、これは良くありません。

2 番目のメソッド: ファクトリメソッド

Java の静的ファクトリー メソッドに似ています。

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



<頭>
<スクリプトタイプ="text/javascript">
//オブジェクトファクトリーメソッド
var createObject=function(){
var object=new Object();
object.username="zhangsan";
object.password="123";
object.get=function(){
アラート(この.ユーザー名 " , " オブジェクト.パスワード); }
オブジェクトを返します;
}
var obj1=createObject();
var obj2=createObject();
obj1.get();
//オブジェクト 2 のパスワードを変更します
obj2["パスワード"]="123456";
obj2.get();






上記のオブジェクト作成方法には欠点があります (各オブジェクトには get メソッドがあるため、メモリを無駄に消費します)。改善されたファクトリ メソッド (すべてのオブジェクトが get メソッドを共有します):

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

<頭>
<スクリプトタイプ="text/javascript">
//すべてのオブジェクトで共有されるメソッドを取得
var get=function(){
alert(this.username " , " this.password);
}
//オブジェクトファクトリーメソッド
var createObject=function(ユーザー名,パスワード){
var object=new Object();
object.username=ユーザー名;
object.password=パスワード;
object.get=get;//注意: ここにメソッド括弧
を書かないでください オブジェクトを返します;
}
// ファクトリ メソッドを通じてオブジェクトを作成します
var object1=createObject("zhangsan","123");
var object2=createObject("lisi","345");
// get メソッドを呼び出します
object1.get();
object2.get();







3 番目の方法: オブジェクトを定義するコンストラクター メソッド

コードをコピーします コードは次のとおりです:
<頭>
<スクリプトタイプ="text/javascript">
var get=function(){
alert(this.username " , " this.password);
}
関数 Person(ユーザー名,パスワード){
//コードの最初の行を実行する前に、JS エンジンがオブジェクトを生成します
This.username=ユーザー名;
This.password=パスワード;
This.get=get;
//ここには、以前に生成されたオブジェクトを返すために使用される隠しの return ステートメントがあります [これはファクトリー モードとは異なります]
}
var person=新しい人("zhangsan","123");
person.get();







4 番目の方法: プロトタイプ メソッドを使用してオブジェクトを作成する
プロトタイプはオブジェクトオブジェクトの属性であり、すべての人物オブジェクトもプロトタイプ属性を持つことができます。

オブジェクトのプロトタイプにいくつかの属性とメソッドを追加できます。

単純にプロトタイプメソッドを使用してオブジェクトを作成する場合の欠点: ①パラメーターを渡すことができず、オブジェクトの作成後にのみその値を変更できます

② プログラムエラーが発生する可能性があります

コードをコピー

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



<頭>
<スクリプトタイプ="text/javascript">
関数 人(){
}
Person.prototype.username="zhangsan";
person.prototype.password="123";
Person.prototype.getInfo=function(){
    alert(this.username " , " this.password);
}
var person1=新しい人();
var person2=新しい人();
person1.username="lisi";
person1.getInfo();
person2.getInfo();

        



复制代 代码如下:



<頭>
<スクリプトタイプ="text/javascript">
関数 人(){
}
Person.prototype.username=new Array();
person.prototype.password="123";
Person.prototype.getInfo=function(){
    alert(this.username " , " this.password);
}
var person1=新しい人();
var person2=新しい人();
person1.username.push("wanglaowu");
person1.username.push("wanglaowu2");
person2.password="456";
person1.getInfo ();
person2.getInfo();

        



原型を使用して、オブジェクトの再構築関数内のプロパティ値を最初のプロパティに設定し、オブジェクトの生成後にのみプロパティ値を再変更できます。

第 5 の方法: 原型構築関数を使用してオブジェクトを決定します----推荐を使用します

对オブジェクト之间のプロパティ互不干扰

それぞれのオブジェクトの間で同じメソッドを共有します

复制代 代码如下:


<頭>
<スクリプトタイプ="text/javascript">
// 原型構築関数数方式を使用して定義オブジェクト
関数 人(){
    // プロパティ定义在构造関数数中
    this.username=new Array();
    this.password="123";
}
    // メソッドを決定する原型中
Person.prototype.getInfo=function(){
    alert(this.username " , " this.password);
}
var p1=新しい人();
var p2=新しい人();
p1.username.push("zhangsan");
p2.username.push("lisi");
p1.getInfo();
p2.getInfo();

        




第六の方式: アニメーション原型方式----推荐使用

構造関数では、すべてのオブジェクトが 1 つの方法を共有し、各オブジェクトが独自の属性を持ちます。

复制代 代码如下:


<頭>
<スクリプトタイプ="text/javascript">
var person=function (ユーザー名,パスワード){
    this.username=ユーザー名;
    this.password=パスワード;
    if(typeof Person.flag=="未定義"){
        alert("呼び出された");
        Person.prototype.getInfo=function(){
            alert(this.username " , " this.password);
        }
        人物.flag=true;   
    }
}
var p1=新しい人("zhangsan","123");
var p2=新しい人("lisi","456");
p1.getInfo();
p2.getInfo();

        




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