JSオブジェクト指向の高度な機能

ある程度の知識「のjavascirpt高度なバージョンへの鳩」の映像仕上げの研究を通じてBenpianは、一般的に次の側面が含まれています。

  1つのオブジェクトの作成方法

  Objectオブジェクト2の性質、プライベート属性、クラスの属性

  メソッドオブジェクトのオブジェクト3、プライベートメソッド、クラスメソッド

  4 javascirpt継承、カプセル化、多型および

  オブジェクトの作成方法:

  オブジェクトが最初のオブジェクトの初期化方法を介して、二つの方法で作成することができます。

var person={
                name:"xingoo",
                age:26,
                say:function(){
                    console.log("say something");
                },
                action:function(){
                    console.log("do something");
                }
            };

            console.log(person.name);
            console.log(person.age);
            person.say();
            person.action();

  コンストラクタを介して第2の方法は、作成します。

function student(name,age){
                this.name = name;
                this.age = age;
                this.say = function(){
                    console.log("say something");
                }
                this.action = function(){
                    console.log("do something");
                }
            }
            var xingoo = new student("xingoo",27);
            console.log(xingoo.name);
            console.log(xingoo.age);
            xingoo.say();
            xingoo.action();

 

  オブジェクトのプロパティ

  オブジェクトのプロパティ、私有財産およびクラス属性へのオブジェクトのプロパティ。

  オブジェクトは、オブジェクトを作成する必要が使用する属性。

  プライベートプロパティは、クロージャを使用するためには内部、外部の必要性に直接使用することができます。

  クラス属性は、オブジェクト名で直接使用することができます。

       function func(){
                this.objPro1 = "对象属性";
                func.prototype.objPro2 = "对象属性";

                var privatePro = "私有属性";
            }
            func.classPro = "类属性";

            console.log(func.classPro);

            var f = new func();
            console.log(f.objPro1);
            console.log(f.objPro2);

            <!-- 私有属性可以通过闭包获取 -->

 

  オブジェクトのメソッド

  オブジェクトの前記オブジェクトメソッド、およびプライベートメソッド上記使用特性に類似クラスメソッド、。

function demoFunc1(){
                var privateFunc = function(){
                    console.log("this is privateFunc");
                };

                privateFunc();

                this.objFunc1 = function(){
                    console.log("this is objFunc1");
                };
                demoFunc1.prototype.objFunc2 = function(){
                    console.log("this is objFunc2");
                };
            }
            demoFunc1.classFunc = function(){
                console.log("this is classFunc");
            };
            demoFunc1.classFunc();

            var f = new demoFunc1();
            f.objFunc1();
            f.objFunc2();

 

  継承、多型およびカプセル化

  継承を達成するためにJSは、適用方法やプロトタイプを実装する必要があります。

  あなたは、単に適用する方法を使用する場合は、プロトタイプのサブクラスは、サブクラスであり、プロトタイプあれば、プロトタイプのサブクラスは、親クラスを継承します。

  たとえば、次のコード:

function Animal(name,age){
                this.name = name;
                this.age =age;
                this.say = function(){
                    console.log("animal say something");
                }
            }
            function Cat(name,age){
                Animal.apply(this,[name,age]);
            }
            <!-- Cat.prototype = new Animal();-->

            var cat1 = new Cat("xingoo",3);
            console.log(cat1.name);
            console.log(cat1.age);
            cat1.say();

  上記のコードは、猫のプロトタイプはCATです。

  あなたはコメントセクションをオンにした場合は、プロトタイプの猫は動物の一種となっている見つけることができます。

  メソッドサブクラスは、多型を示した親クラスを、オーバーライドします:

function Pig(name,age){
                this.say = function(){
                    console.log("i am pig");
                }
            }
            Pig.prototype = new Animal();
            function Dog(name,age){
                this.say = function(){
                    console.log("i am dog");
                }
            }
            Dog.prototype = new Animal();

            function say(animal){
                if(animal instanceof Animal){
                    animal.say();
                }
            }
            var dog = new Dog();
            var pig = new Pig();
            say(dog);
            say(pig);

 

  すべてのコードを使用するには:

<!doctype html>
<html>
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
        <script type="text/javascript">
            <!-- 对象初始化器方式 -->
            var person={
                name:"xingoo",
                age:26,
                say:function(){
                    console.log("say something");
                },
                action:function(){
                    console.log("do something");
                }
            };

            console.log(person.name);
            console.log(person.age);
            person.say();
            person.action();

            <!-- 构造函数方式 -->
            function student(name,age){
                this.name = name;
                this.age = age;
                this.say = function(){
                    console.log("say something");
                }
                this.action = function(){
                    console.log("do something");
                }
            }
            var xingoo = new student("xingoo",27);
            console.log(xingoo.name);
            console.log(xingoo.age);
            xingoo.say();
            xingoo.action();

            <!-- 对象属性 私有属性,对象属性,类属性 -->
            function func(){
                this.objPro1 = "对象属性";
                func.prototype.objPro2 = "对象属性";

                var privatePro = "私有属性";
            }
            func.classPro = "类属性";

            console.log(func.classPro);

            var f = new func();
            console.log(f.objPro1);
            console.log(f.objPro2);

            <!-- 私有属性可以通过闭包获取 -->

            <!-- 私有方法,对象方法,类方法 -->
            function demoFunc1(){
                var privateFunc = function(){
                    console.log("this is privateFunc");
                };

                privateFunc();

                this.objFunc1 = function(){
                    console.log("this is objFunc1");
                };
                demoFunc1.prototype.objFunc2 = function(){
                    console.log("this is objFunc2");
                };
            }
            demoFunc1.classFunc = function(){
                console.log("this is classFunc");
            };
            demoFunc1.classFunc();

            var f = new demoFunc1();
            f.objFunc1();
            f.objFunc2();

            <!-- 封装性,继承性,多态性 -->
            <!-- apply()实现属性和方法的集成,prototype实现原型的继承 -->

            function Animal(name,age){
                this.name = name;
                this.age =age;
                this.say = function(){
                    console.log("animal say something");
                }
            }
            function Cat(name,age){
                Animal.apply(this,[name,age]);
            }
            <!-- Cat.prototype = new Animal();-->

            var cat1 = new Cat("xingoo",3);
            console.log(cat1.name);
            console.log(cat1.age);
            cat1.say();

            <!-- 继承 -->
            function Pig(name,age){
                this.say = function(){
                    console.log("i am pig");
                }
            }
            Pig.prototype = new Animal();
            function Dog(name,age){
                this.say = function(){
                    console.log("i am dog");
                }
            }
            Dog.prototype = new Animal();

            function say(animal){
                if(animal instanceof Animal){
                    animal.say();
                }
            }
            var dog = new Dog();
            var pig = new Pig();
            say(dog);
            say(pig);
        </script>
    </body>
</html>
コードの表示

  結果:

ます。https://my.oschina.net/u/204616/blog/545404で再現

おすすめ

転載: blog.csdn.net/weixin_34226706/article/details/91989977