オブジェクト指向プログラミング (OOP) とは何ですか?オブジェクト指向プログラミングの特徴-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

オブジェクト指向プログラミング (OOP) とは何ですか?オブジェクト指向プログラミングの特徴

零下一度

Jun 24, 2017 pm 02:48 PM

javascript 物体プログラミングのために

オブジェクト指向プログラミング (OOP) とは何ですか?オブジェクト思考でコードを書くのがオブジェクト指向プログラミングです。

オブジェクト指向プログラミングの特徴

抽象化: 核心的な問題を把握する
カプセル化: メソッドはオブジェクトを通じてのみアクセス可能
継承ance: 既存のオブジェクトから継承します。新しいオブジェクト
ポリモーフィズム: 複数のオブジェクトの異なる形式

オブジェクトの構成

属性: オブジェクトの下の変数はオブジェクトのプロパティと呼ばれます
メソッド: オブジェクトの下にある関数はオブジェクトメソッドと呼ばれます

var arr = [];
arr.number = 10;  //对象下面的变量：叫做对象的属性//alert( arr.number );//alert( arr.length );arr.test = function(){  //对象下面的函数 : 叫做对象的方法alert(123);
};

arr.test();//方法arr.push();//方法arr.sort();

ログイン後にコピー

オブジェクトを作成します

var obj=new Object();//创建一个空的对象obj.name='小明';  //属性obj.showName=function(){   //方法alert(this.name);//this指向obj }
 obj.showName();//小明

ログイン後にコピー

2つ以上のオブジェクトを作成する必要がある場合

var obj1=new Object();//创建一个空的对象obj1.name='小明';  //属性obj1.showName=function(){   //方法alert(this.name);//this指向obj }
 obj1.showName();//小明var obj2=new Object();//创建一个空的对象obj2.name='小灰';  //属性obj2.showName=function(){   //方法alert(this.name);//this指向obj }
 obj2.showName();//小灰

ログイン後にコピー

を使用してくださいオブジェクト関数またはオブジェクトリテラルはオブジェクト指向オブジェクトを作成できますが、複数のオブジェクトを作成する必要がある場合、この問題はファクトリメソッド

Factory メソッドを使用することで解決できます。 ------ ----------

オブジェクト指向のカプセル化関数

//工厂方式 : 封装函数function createPerson(name){var obj = new Object();
    obj.name = name;
    obj.showName = function(){
        alert( this.name );
    };return obj;    
}var p1 = createPerson('小明');
p1.showName();var p2 = createPerson('小强');
p2.showName();

ログイン後にコピー

オブジェクトの作成は工場出荷時の方法で実装されており、オブジェクトの作成はパラメータを渡すことができます。 Object のネイティブコンストラクターを使用して実装されているため、

オブジェクトの型を認識できません

コンストラクターパターン --------------------------

オブジェクトにメソッドを追加します

//new 后面调用的函数叫构造函数function CreatePerson(name){this.name=name;this.showName=function(){
                alert(this.name);
            }
        }var p1=new CreatePerson('小明');//当new去调用一个函数时，函数中的this就是创建出来的对象而函数中的返回值就是this        p1.showName();var p2=new CreatePerson('小强');
        p2.showName();

ログイン後にコピー

カスタムコンストラクターを使用して、オブジェクト型のプロパティとメソッドを定義します。ファクトリメソッドとの違い:

オブジェクトの明示的な作成はありません。

コンストラクターは上記のファクトリメソッドの問題を解決しますが、欠点もあります。つまり、オブジェクトを作成するときに、各オブジェクトが独自のメソッドのセットを持ちます

定義された各関数がオブジェクトをインスタンス化します

。例: テスト例の

function CreatePerson(name){    this.name = name;this.showName = function(){
        alert( this.name );
    };
    
}var p1 = new CreatePerson('小明');//p1.showName();var p2 = new CreatePerson('小强');//p2.showName();alert( p1.showName == p2.showName );  //false  它们的值相同，地址不同

ログイン後にコピー

p1 .showName と p2.showName が等しいかどうかにかかわらず、ポップアップ結果は false となり、p1 インスタンスと p2 インスタンスの両方に異なる showName インスタンスが含まれていることを示します。さらにいくつかの例を挙げます:

对比上面的几个例子，不难看出基本类型和对象类型的区别了，对象类型的赋值不仅是值的复制，也是引用的传递；提到了对象的引用应该很清楚上述p1.showName==p2.showName为何会返回结果是false

原型模式（prototype） -------------------- 给一类对象添加方法

原型（prototype）：重写对象下面公用的属性或方法，让公用的属性或方法在内存中只存在一份（提高性能），也就是说所有在原型对象中创建的属性或方法都直接被所有对象实例共享。

原型：类比css中的class
普通方法：类比css中的style

var arr = [1,2,3,4,5];var arr2 = [2,2,2,2,2];

Array.prototype.sum = function(){//原型prototype : 要写在构造函数的下面var result = 0;for(var i=0;i<this.length;i++){
        result += this[i];
    }return result;
};

alert( arr.sum() );  //15alert( arr2.sum() );  //10

ログイン後にコピー

原型优先级：如果在实例中添加了一个属性，而该属性与实例原型中的一个属性同名，该属性将会屏蔽原型中的那个属性

例子1：

var arr = [];
arr.number = 10;
Array.prototype.number = 20;

alert(arr.number);//10

ログイン後にコピー

例子2：

Array.prototype.a=12;//原型属性var arr=[1,2,3];
alert(arr.a);//12arr.a=5;//实例属性alert(arr.a);//5

ログイン後にコピー

工厂方式之原型

function CreatePerson(name){//普通方法this.name=name;
}
CreatePerson.prototype.showName=function(){//原型alert(this.name);
}var p1=new CreatePerson(&#39;小明&#39;);
p1.showName();var p2=new CreatePerson(&#39;小强&#39;);
p2.showName();
alert( p1.showName== p2.showName);//true

ログイン後にコピー

由上述例子中：p1.showName== p2.showName弹出的结果是true，可见原型解决了构造函数中“每定义一个函数都实例化了一个对象”的问题

原型的运用

选项卡实例：

<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>选项卡</title><style>#div1 div{width:400px;height:300px;border:1px solid #ccc;overflow: hidden;display: none;margin: 15px 0;}#div1 input{color: #fff;width:100px;height:40px;background: darkseagreen;border:none;font-size: 14px;letter-spacing: 5px;}#div1 p{font-size: 20px;line-height: 24px;text-align: center;color:darkgreen;}#div1 .title{padding: 0;font-weight: bold;}#div1 .active{background:sandybrown;color:#fff;}</style><script>window.onload=function(){var oDiv=document.getElementById('div1');var aInput=oDiv.getElementsByTagName('input');var aDiv=oDiv.getElementsByTagName('div');var i=0;for(i=0;i<aInput.length;i++){
                aInput[i].index=i;
                aInput[i].onmousemove=function(){for(var i=0;i<aInput.length;i++){
                        aInput[i].className=&#39;&#39;;
                        aDiv[i].style.display=&#39;none&#39;;
                    }
                    aInput[this.index].className=&#39;active&#39;;
                    aDiv[this.index].style.display=&#39;block&#39;;
                }
            }
        }</script></head><body><div id="div1"><input class="active" type="button" value="五言律诗"><input type="button" value="七言律诗"><input type="button" value="五言绝句"><input type="button" value="七言绝句"><div style="display: block;"><p class="title">落 花</p><p class="author">李商隐</p><p>高阁客竟去，小园花乱飞。</p><p>参差连曲陌，迢递送斜晖。</p><p>肠断未忍扫，眼穿仍欲归。</p><p>芳心向春尽，所得是沾衣。</p></div><div><p class="title">蜀 相</p><p class="author">杜甫</p><p>丞相祠堂何处寻，锦官城外柏森森。</p><p>映阶碧草自春色，隔叶黄鹂空好音。</p><p>三顾频烦天下计，两朝开济老臣心。</p><p>出师未捷身先死，长使英雄泪满襟。</p></div><div><p class="title">八阵图</p><p class="author">杜甫</p><p>功盖三分国，名成八阵图。</p><p>江流石不转，遗恨失吞吴。</p></div><div><p class="title">泊秦淮</p><p class="author">杜牧</p><p>烟笼寒水月笼沙，夜泊秦淮近酒家。</p><p>商女不知亡国恨，隔江犹唱后庭花。</p></div></div></body></html>

ログイン後にコピー

效果（鼠标经过按钮时选项卡切换）：

面向对象选项卡：

<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>选项卡</title><style>#div1 div,#div2 div{width:400px;height:300px;border:1px solid #ccc;overflow: hidden;display: none;margin: 15px 0;}#div1 input,#div2 input{color: #fff;width:100px;height:40px;background: darkseagreen;border:none;font-size: 14px;letter-spacing: 5px;}#div1 p,#div2 p{font-size: 20px;line-height: 24px;text-align: center;color:darkgreen;}#div1 .title,#div2 .title{padding: 0;font-weight: bold;}#div1 .active,#div2 .active{background:sandybrown;color:#fff;}</style><script>window.onload=function(){var t1=new TabSwitch('div1');
            t1.switch();           var t2=new TabSwitch('div2');//面向对象的复用性            t2.switch();
            t2.autoPlay();/*alert(t2.switch==t1.switch);//ture*/}function TabSwitch(id){this.oDiv=document.getElementById(id);this.aInput=this.oDiv.getElementsByTagName('input');this.aDiv=this.oDiv.getElementsByTagName('div');this.iNow=0;//自定义属性}
        TabSwitch.prototype.switch=function(){//原型for(var i=0;i<this.aInput.length;i++){var This=this;//将指向面向对象的this保存下来this.aInput[i].index=i;this.aInput[i].onmousemove=function(){
                    This.tab(this);//This指向面向对象           this指向this.aInput[i]                }
            }
        }
        TabSwitch.prototype.tab=function(obj){//原型for(var i=0;i<this.aInput.length;i++){this.aInput[i].className=&#39;&#39;;this.aDiv[i].style.display=&#39;none&#39;;
            }this.aInput[obj.index].className=&#39;active&#39;;this.aDiv[obj.index].style.display=&#39;block&#39;;
        }//自动播放        TabSwitch.prototype.autoPlay=function(){var This=this;
            setInterval(function(){if(This.iNow==This.aInput.length-1){
                    This.iNow=0;
                }else{
                    This.iNow++;
                }for(var i=0;i<This.aInput.length;i++){
                    This.aInput[i].className=&#39;&#39;;
                    This.aDiv[i].style.display=&#39;none&#39;;
                }
                This.aInput[This.iNow].className=&#39;active&#39;;
                This.aDiv[This.iNow].style.display=&#39;block&#39;;
            },1000);
        }</script></head><body><div id="div1"><input class="active" type="button" value="五言律诗"><input type="button" value="七言律诗"><input type="button" value="五言绝句"><input type="button" value="七言绝句"><div style="display: block;"><p class="title">落 花</p><p class="author">李商隐</p><p>高阁客竟去，小园花乱飞。</p><p>参差连曲陌，迢递送斜晖。</p><p>肠断未忍扫，眼穿仍欲归。</p><p>芳心向春尽，所得是沾衣。</p></div><div><p class="title">蜀 相</p><p class="author">杜甫</p><p>丞相祠堂何处寻，锦官城外柏森森。</p><p>映阶碧草自春色，隔叶黄鹂空好音。</p><p>三顾频烦天下计，两朝开济老臣心。</p><p>出师未捷身先死，长使英雄泪满襟。</p></div><div><p class="title">八阵图</p><p class="author">杜甫</p><p>功盖三分国，名成八阵图。</p><p>江流石不转，遗恨失吞吴。</p></div><div><p class="title">泊秦淮</p><p class="author">杜牧</p><p>烟笼寒水月笼沙，夜泊秦淮近酒家。</p><p>商女不知亡国恨，隔江犹唱后庭花。</p></div></div><div id="div2"><input class="active" type="button" value="五言律诗"><input type="button" value="七言律诗"><input type="button" value="五言绝句"><input type="button" value="七言绝句"><div style="display: block;"><p class="title">落 花</p><p class="author">李商隐</p><p>高阁客竟去，小园花乱飞。</p><p>参差连曲陌，迢递送斜晖。</p><p>肠断未忍扫，眼穿仍欲归。</p><p>芳心向春尽，所得是沾衣。</p></div><div><p class="title">蜀 相</p><p class="author">杜甫</p><p>丞相祠堂何处寻，锦官城外柏森森。</p><p>映阶碧草自春色，隔叶黄鹂空好音。</p><p>三顾频烦天下计，两朝开济老臣心。</p><p>出师未捷身先死，长使英雄泪满襟。</p></div><div><p class="title">八阵图</p><p class="author">杜甫</p><p>功盖三分国，名成八阵图。</p><p>江流石不转，遗恨失吞吴。</p></div><div><p class="title">泊秦淮</p><p class="author">杜牧</p><p>烟笼寒水月笼沙，夜泊秦淮近酒家。</p><p>商女不知亡国恨，隔江犹唱后庭花。</p></div></div></body></html>

ログイン後にコピー

效果（第二个选项卡加了一个自动切换功能）：

面向对象中this的问题

一般会出现问题的情况有两种：

定时器
事件

例子1：

//定时器function Aaa(){          var _this=this;//将当前this值保存this.a=12;
          setInterval(function(){//定时器中this指向window                _this.show();
           },1000);
}
Aaa.prototype.show=function(){
           alert(this.a);
 }var obj=new Aaa();//12

ログイン後にコピー

例子2：

<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>面向对象中this的问题-----事件</title><script>function Bbb(){var _this=this;this.b=5;
            document.getElementById('btn1').onclick=function(){//点击事件                _this.show();
            }}

ログイン後にコピー

        Bbb.prototype.show=function(){ alert(this.b); } window.onload=function(){var p2=new Bbb();
        }</script></head><body><input id="btn1" type="button" value="按钮"></body></html>

ログイン後にコピー

上面两个是分别对定时器和事件中this问题的解决方法，即将指向对象的this保存到了_this中，在嵌套函数中调用对象的方法或属性时用 _this.属性或 _this.方法

再来个实例：

拖拽效果：

<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>最初写的拖拽效果</title>
   <style>   #div1{   width:100px;   height:100px;   background: red;   position: absolute;   }
   </style><script>window.onload=function(){var oDiv=document.getElementById('div1');
            oDiv.onmousedown=function(ev){var oEvent=ev||event;var disX=0;var disY=0;var disX=oEvent.clientX-oDiv.offsetLeft;var disY=oEvent.clientY-oDiv.offsetTop;
                document.onmousemove=function(ev){var oEvent=ev||event;
                    oDiv.style.left=oEvent.clientX-disX+'px';
                    oDiv.style.top=oEvent.clientY-disY+'px';
                };
                document.onmouseup=function(){
                    document.onmousemove=null;
                    document.onmouseup=null;
                };return false;
            }
        }</script></head><body><div id="div1"></div></body></html>

ログイン後にコピー

面向对象的拖拽

<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>面向对象写的拖拽效果</title><style>#div1{width:100px;height:100px;background: red;position: absolute;}</style><script>window.onload=function(){var p=new Darg('div1');
            p.init();

        }function Darg(id){this.oDiv=document.getElementById(id); //属性this.disX=0;//属性this.disY=0;//属性}
        Darg.prototype.init=function(){//原型  方法var This=this;this.oDiv.onmousedown=function(ev){var oEvent=ev||event;
                This.fnDown(oEvent);return false;
            }
        }
        Darg.prototype.fnDown=function(ev){//原型   方法var This=this;this.disX=ev.clientX-this.oDiv.offsetLeft;this.disY=ev.clientY-this.oDiv.offsetTop;
            document.onmousemove=function(ev){var oEvent=ev||event;
                This.fnMove(oEvent);
            };
            document.onmouseup=function(){
                This.fnUp();
            };
        }
        Darg.prototype.fnMove=function(ev){//原型this.oDiv.style.left=ev.clientX-this.disX+'px';this.oDiv.style.top=ev.clientY-this.disY+'px';
        }
        Darg.prototype.fnUp=function(){//原型            document.onmousemove=null;
            document.onmouseup=null;
        }</script></head><body><div id="div1"></div></body></html>

ログイン後にコピー

以上がオブジェクト指向プログラミング (OOP) とは何ですか?オブジェクト指向プログラミングの特徴の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7723

Java チュートリアル

1643

CakePHP チュートリアル

1396

Laravel チュートリアル

1290

PHP チュートリアル

1233

Related knowledge

正規表現を使用してPHP配列から重複した値を削除します Apr 26, 2024 pm 04:33 PM

正規表現を使用して PHP 配列から重複値を削除する方法: 正規表現 /(.*)(.+)/i を使用して、重複値を照合して置換します。配列要素を反復処理し、preg_match を使用して一致をチェックします。一致する場合は値をスキップし、一致しない場合は重複値のない新しい配列に追加します。

MySQLクエリ結果の配列をオブジェクトに変換するにはどうすればよいですか? Apr 29, 2024 pm 01:09 PM

MySQL クエリ結果の配列をオブジェクトに変換する方法は次のとおりです。空のオブジェクト配列を作成します。結果の配列をループし、行ごとに新しいオブジェクトを作成します。 foreach ループを使用して、各行のキーと値のペアを新しいオブジェクトの対応するプロパティに割り当てます。新しいオブジェクトをオブジェクト配列に追加します。データベース接続を閉じます。

PHP 関数はどのようにオブジェクトを返すのでしょうか? Apr 10, 2024 pm 03:18 PM

PHP 関数は、return ステートメントに続いてオブジェクトインスタンスを使用してオブジェクトを返すことにより、データをカスタム構造にカプセル化できます。構文: functionget_object():object{}。これにより、カスタムプロパティとメソッドを使用してオブジェクトを作成し、オブジェクトの形式でデータを処理できるようになります。

PHP における配列とオブジェクトの違いは何ですか? Apr 29, 2024 pm 02:39 PM

PHP では、配列は順序付けられたシーケンスであり、要素はインデックスによってアクセスされます。オブジェクトは、new キーワードによって作成されたプロパティとメソッドを持つエンティティです。配列へのアクセスはインデックス経由で、オブジェクトへのアクセスはプロパティ/メソッド経由で行われます。配列値が渡され、オブジェクト参照が渡されます。

C++ 関数がオブジェクトを返すときは何に注意する必要がありますか? Apr 19, 2024 pm 12:15 PM

C++ では、関数がオブジェクトを返すときに注意する点が 3 つあります。オブジェクトのライフサイクルは、メモリリークを防ぐために呼び出し元によって管理されます。ぶら下がりポインタを回避し、動的にメモリを割り当てるかオブジェクト自体を返すことにより、関数が戻った後もオブジェクトが有効なままであることを確認します。コンパイラーは、パフォーマンスを向上させるために、返されたオブジェクトのコピー生成を最適化する場合がありますが、オブジェクトが値セマンティクスによって渡される場合、コピー生成は必要ありません。

プログラミングは何のためにあるのか、それを学ぶと何の役に立つのか? Apr 28, 2024 pm 01:34 PM

1. プログラミングは、Web サイト、モバイルアプリケーション、ゲーム、データ分析ツールなど、さまざまなソフトウェアやアプリケーションの開発に使用できます。その応用分野は非常に幅広く、科学研究、医療、金融、教育、エンターテイメントなど、ほぼすべての業界をカバーしています。 2. プログラミングを学ぶことは、問題解決スキルと論理的思考スキルを向上させるのに役立ちます。プログラミング中、問題を分析して理解し、解決策を見つけてコードに変換する必要があります。この考え方は、分析能力と抽象能力を養い、実際的な問題を解決する能力を向上させることができます。