JavaScriptオブジェクト向けについて

4269 ワード

JavaScriptの中のオブジェクト向けにはいくつかの独自の場所があります.例えば、すべてのものがオブジェクトであり、オブジェクトを構築する方法などです.オブジェクトの継承,カプセル化,情報隠蔽など,オブジェクト向けのすべての言語に通じるところもある.JavaScriptの名前はJavaと似ていますが、継承と多態を実現する方法、オブジェクトを構築する方法はjavaとは雲泥の差があります.次にJSが対象になることを学びましょう.
一)まずJSオブジェクトを定義する方法を見てみましょう.広義には2つに分けることができます.1つ目は一般的な定義とオブジェクトインスタンスの作成、2つ目は関数コンストラクタによってオブジェクトを構築します.1つ目の方法は、コードから見ると、一目瞭然で、非常に簡単です.
var person=new Object();
person.name="tom";
person.age="22";
person.tel="12345869";

または、属性間をカンマで区切る構文を持つもう1つのより簡潔な書き方です.
var person={
    name:"   ",
    age:"22",
    tel:"123456789",
}
alert(person.name+person.age+person.tel);

次に、関数を使用してオブジェクトを定義し、オブジェクトインスタンスを作成する方法を見てみましょう.
function people(name,age,tel){
    this.name=name;
    this.age=age;
    this.tel=tel;
}

var someOne=new people("Tom",30,12345678);
document.write(someOne.name+someOne.age+someOne.tel);

あるいはその属性(メンバー変数、メンバーメソッド)はこのように書くことができます.
function people(){

}
people.prototype={
    name:"  ",
    age:"22",
    tel:"12345678"
}
var me=new people();
document.write(me.name);

これが基本的なオブジェクトを構築する方法で、ユニークですが、簡単で分かりやすいです.
二)JavaScriptではどのように継承を実現しますか?
Javaではキーワードextendsとimplementsで親クラスと実装インタフェースを継承してマルチステートを実現できることを知っていますが、JavaScriptにはありません.では、どのように継承を実現しますか?次は一歩一歩勉強しましょう
まず、親peopleを書き、メンバーメソッドsay()を書きます.
 function people(name){
        this.myName=name;
    }
    people.prototype.say=function(){
        alert("people"+this.myName);
    }

次に、親を継承するためにサブクラスstudentを書きます.prototypeプロパティをすべて親から取得するだけです.
function student(name){
        this.myName=name;
    }
    student.prototype=new people();//  

親クラスのsay()メソッドを書き換えることができます
 student.prototype.say=function(){
        alert("student"+this.myName);
    }

最後にstudentを生成するオブジェクト
var me=new student("   ");
me.say();

親のメソッドを参照したい場合はどうすればいいですか?答えはcall()メソッドを使用してコールバックします
 var superPeople=student.prototype.say;
    superPeople.call(this);

コードをすべて一緒に置いて観察しやすいようにします
  function people(name){
        this.myName=name;
    }
    people.prototype.say=function(){
        alert("people"+this.myName);
    }


function student(name){
        this.myName=name;
    }
    student.prototype=new people();//  
    var superPeople=student.prototype.say;
    superPeople.call(this);//      
    student.prototype.say=function(){
        alert("student"+this.myName);//  
    }


var me=new student("   ");
me.say();

三)JSでどのようにパッケージを実現するか.JSでは、あるコードブロックや機能ブロックをカプセル化する方法がユニークで、次のような文法を用いて、最後のセミコロンが少なくないように注意し、最後の括弧はそのコードブロックを実行することを表し、漏らすこともできない
このパッケージに外部からアクセスできるようにするには、外部と連絡するインタフェースをwindowオブジェクトに割り当てるだけです.
(function(){
    ......
    //   
}());

例えば上のpeopleクラスをカプセル化します
(function(){
        function people(name){
            this.myName=name;
        }
    people.prototype.say=function(){
        alert("people"+this.myName);
    }
    window.people=people;//       
    }());
このようにすれば、このパッケージに定義された変数は、そのパッケージのみが使用可能である.
四)JSではこのような継承を実現する方法に加えて、オブジェクトを直接サブクラスに付与する方法で継承の目的を達成することができる.JSではすべてオブジェクトであるため、オブジェクトの属性と方法はすべてオブジェクトとしてサブクラスに付与される.
コードで見ると,say()メソッドは空のオブジェクトmyThisを与え,一時保存と見なすことができ,最後に親に戻る.子クラスで親クラスを変数に割り当て、子クラスに返すと、親クラス全体が実質的に子クラスに割り当てられます.
function people(){
    var myThis={};
    myThis.say=function(){
        alert("people hello");
    };
    return myThis;
}

function student(){
    var my=people();// people   ,       
    return my;
}

var me=new student();
me.say();

親メソッドを呼び出したり、親メソッドを書き換えたり、パッケージの実装をしたりするには、前の(3)の方法と同じです.
function student(){
    var my=people();// people   ,       
    var superPeople=my.say;
    superPeople.call(this);//      
    my.say=function(){
        //......  
    }
    return my;
}

以上の学習を通じて、JavaScriptのオブジェクト向けの使い方が明らかになったのではないでしょうか.JSには多くの内蔵オブジェクト、ブラウザオブジェクトが提供されています.HTMLやCSSを操作するのに便利です.その本質も普通のオブジェクトですが、その多くの属性と方法はすでにできているだけで、私たちは楽しむだけです.で説明している各メニュー項目からアクセスしてください.