オブジェクト指向プログラミング (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 alert></this.length>

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

例子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，可见原型解决了构造函数中“每定义一个函数都实例化了一个对象”的问题

原型的运用

选项卡实例：

nbsp;html><meta><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(&#39;div1&#39;);var aInput=oDiv.getElementsByTagName(&#39;input&#39;);var aDiv=oDiv.getElementsByTagName(&#39;div&#39;);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><div>
<input><input><input><input><div>
<p>落 花</p>
<p>李商隐</p>
<p>高阁客竟去，小园花乱飞。</p>
<p>参差连曲陌，迢递送斜晖。</p>
<p>肠断未忍扫，眼穿仍欲归。</p>
<p>芳心向春尽，所得是沾衣。</p>
</div>
<div>
<p>蜀 相</p>
<p>杜甫</p>
<p>丞相祠堂何处寻，锦官城外柏森森。</p>
<p>映阶碧草自春色，隔叶黄鹂空好音。</p>
<p>三顾频烦天下计，两朝开济老臣心。</p>
<p>出师未捷身先死，长使英雄泪满襟。</p>
</div>
<div>
<p>八阵图</p>
<p>杜甫</p>
<p>功盖三分国，名成八阵图。</p>
<p>江流石不转，遗恨失吞吴。</p>
</div>
<div>
<p>泊秦淮</p>
<p>杜牧</p>
<p>烟笼寒水月笼沙，夜泊秦淮近酒家。</p>
<p>商女不知亡国恨，隔江犹唱后庭花。</p>
</div>
</div>

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

面向对象选项卡：

nbsp;html><meta><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(&#39;div1&#39;);
            t1.switch();           var t2=new TabSwitch(&#39;div2&#39;);//面向对象的复用性            t2.switch();
            t2.autoPlay();/*alert(t2.switch==t1.switch);//ture*/}function TabSwitch(id){this.oDiv=document.getElementById(id);this.aInput=this.oDiv.getElementsByTagName(&#39;input&#39;);this.aDiv=this.oDiv.getElementsByTagName(&#39;div&#39;);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><div>
<input><input><input><input><div>
<p>落 花</p>
<p>李商隐</p>
<p>高阁客竟去，小园花乱飞。</p>
<p>参差连曲陌，迢递送斜晖。</p>
<p>肠断未忍扫，眼穿仍欲归。</p>
<p>芳心向春尽，所得是沾衣。</p>
</div>
<div>
<p>蜀 相</p>
<p>杜甫</p>
<p>丞相祠堂何处寻，锦官城外柏森森。</p>
<p>映阶碧草自春色，隔叶黄鹂空好音。</p>
<p>三顾频烦天下计，两朝开济老臣心。</p>
<p>出师未捷身先死，长使英雄泪满襟。</p>
</div>
<div>
<p>八阵图</p>
<p>杜甫</p>
<p>功盖三分国，名成八阵图。</p>
<p>江流石不转，遗恨失吞吴。</p>
</div>
<div>
<p>泊秦淮</p>
<p>杜牧</p>
<p>烟笼寒水月笼沙，夜泊秦淮近酒家。</p>
<p>商女不知亡国恨，隔江犹唱后庭花。</p>
</div>
</div><div>
<input><input><input><input><div>
<p>落 花</p>
<p>李商隐</p>
<p>高阁客竟去，小园花乱飞。</p>
<p>参差连曲陌，迢递送斜晖。</p>
<p>肠断未忍扫，眼穿仍欲归。</p>
<p>芳心向春尽，所得是沾衣。</p>
</div>
<div>
<p>蜀 相</p>
<p>杜甫</p>
<p>丞相祠堂何处寻，锦官城外柏森森。</p>
<p>映阶碧草自春色，隔叶黄鹂空好音。</p>
<p>三顾频烦天下计，两朝开济老臣心。</p>
<p>出师未捷身先死，长使英雄泪满襟。</p>
</div>
<div>
<p>八阵图</p>
<p>杜甫</p>
<p>功盖三分国，名成八阵图。</p>
<p>江流石不转，遗恨失吞吴。</p>
</div>
<div>
<p>泊秦淮</p>
<p>杜牧</p>
<p>烟笼寒水月笼沙，夜泊秦淮近酒家。</p>
<p>商女不知亡国恨，隔江犹唱后庭花。</p>
</div>
</div>

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

面向对象中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：

nbsp;html><meta><title>面向对象中this的问题-----事件</title><script>function Bbb(){var _this=this;this.b=5;
            document.getElementById(&#39;btn1&#39;).onclick=function(){//点击事件                _this.show();
            }}</script>

        Bbb.prototype.show=function(){ alert(this.b); } window.onload=function(){var p2=new Bbb();
        }<input>

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

再来个实例：

拖拽效果：

nbsp;html><meta><title>最初写的拖拽效果</title>
   <style>   #div1{   width:100px;   height:100px;   background: red;   position: absolute;   }
   </style><script>window.onload=function(){var oDiv=document.getElementById(&#39;div1&#39;);
            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+&#39;px&#39;;
                    oDiv.style.top=oEvent.clientY-disY+&#39;px&#39;;
                };
                document.onmouseup=function(){
                    document.onmousemove=null;
                    document.onmouseup=null;
                };return false;
            }
        }</script><div></div>

面向对象的拖拽

nbsp;html><meta><title>面向对象写的拖拽效果</title><style>#div1{width:100px;height:100px;background: red;position: absolute;}</style><script>window.onload=function(){var p=new Darg(&#39;div1&#39;);
            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+&#39;px&#39;;this.oDiv.style.top=ev.clientY-this.disY+&#39;px&#39;;
        }
        Darg.prototype.fnUp=function(){//原型            document.onmousemove=null;
            document.onmouseup=null;
        }</script><div></div>

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

声明

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

es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法：1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句，去掉数组中的重复元素，返回去重后的新数组；2、利用sort()对去重数组进行排序，语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题，包括了Symbol类型的描述、Symbol不会隐式转字符串等问题，下面一起来看一下，希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播！Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！

JavaScript对象的构造函数和new操作符（实例详解）May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于对象的构造函数和new操作符，构造函数是所有对象的成员方法中，最早被调用的那个，下面一起来看一下吧，希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于面向对象的相关问题，包括了属性描述符、数据描述符、存取描述符等等内容，下面一起来看一下，希望对大家有帮助。

javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法：1、利用“点击元素对象.unbind("click");”方法，该方法可以移除被选元素的事件处理程序；2、利用“点击元素对象.off("click");”方法，该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于BOM操作的相关问题，包括了window对象的常见事件、JavaScript执行机制等等相关内容，下面一起来看一下，希望对大家有帮助。

foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法，可以调用数组的每个元素，并将元素传给回调函数进行处理，语法“array.forEach(function(当前元素,索引,数组){...})”；该方法不处理空数组。

See all articles

ホットAIツール

ホットツール

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、