オブジェクト指向プログラミング (OOP) とは何ですか?オブジェクト指向プログラミングの特徴
オブジェクト指向プログラミング (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();
オブジェクトの型を認識できません
コンストラクター パターン --------------------------オブジェクトにメソッドを追加します
//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
原型模式(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('小明'); p1.showName();var p2=new CreatePerson('小强'); 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=''; aDiv[i].style.display='none'; } aInput[this.index].className='active'; aDiv[this.index].style.display='block'; } } }</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='';this.aDiv[i].style.display='none'; }this.aInput[obj.index].className='active';this.aDiv[obj.index].style.display='block'; }//自动播放 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=''; This.aDiv[i].style.display='none'; } This.aInput[This.iNow].className='active'; This.aDiv[This.iNow].style.display='block'; },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 サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











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

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

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

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

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

Python は、学習の容易さと強力な機能により、初心者にとって理想的なプログラミング入門言語です。その基本は次のとおりです。 変数: データ (数値、文字列、リストなど) を保存するために使用されます。データ型: 変数内のデータの型 (整数、浮動小数点など) を定義します。演算子: 数学的な演算と比較に使用されます。制御フロー: コード実行のフロー (条件文、ループ) を制御します。

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

Java をシンプルに: プログラミング能力の初心者向けガイド はじめに Java は、モバイル アプリケーションからエンタープライズ レベルのシステムに至るまで、あらゆるもので使用される強力なプログラミング言語です。初心者にとって、Java の構文はシンプルで理解しやすいため、プログラミングの学習に最適です。基本構文 Java は、クラスベースのオブジェクト指向プログラミング パラダイムを使用します。クラスは、関連するデータと動作をまとめて編成するテンプレートです。簡単な Java クラスの例を次に示します。 publicclassperson{privateStringname;privateintage;
