JavaScript はオブジェクトの 3 つの主要な特性 (カプセル化、継承、ポリモーフィズム) に基づいています_JavaScript スキル

WBOY
リリース: 2016-05-16 15:22:09
オリジナル
1640 人が閲覧しました

JavaScript の 3 つの主要なオブジェクトベースの特性は、C++ および Java の 3 つの主要なオブジェクト指向特性 (カプセル化、継承、ポリモーフィズム) と同じです。実装方法が異なるだけで、基本的な考え方はほぼ同じです。実際、オブジェクト指向の 3 つの主要な特徴に加えて、抽象と呼ばれるもう 1 つの共通の特徴があり、書籍によってはオブジェクト指向の 4 つの主要な特徴を見かけることがあります。
1. カプセル化
カプセル化とは、抽象化されたデータとそのデータに対する操作を一緒にカプセル化することです。データは内部的に保護されており、プログラムの他の部分は承認された操作 (メンバー メソッド) を通じてのみデータを操作できます。
ケース:

<html> 
  <head> 
    <script type="text/javascript"> 
      function Person(name, agei, sal){ 
        // 公开 
        this.name = name; 
        // 私有 
        var age = agei; 
        var salary = sal; 
      } 
      var p1 = new Person('zs', 20, 10000); 
      window.alert(p1.name + p1.age); 
    </script> 
  </head> 
  <body> 
  </body> 
</html> 
ログイン後にコピー

追記: JS カプセル化には 2 つの状態しかなく、1 つはパブリック、もう 1 つはプライベートです。

コンストラクターを使用したメンバー メソッドの追加とプロトタイプ メソッドを使用したメンバー メソッドの追加の違い
1. プロトタイプメソッドで割り当てられた関数は、すべてのオブジェクトで共有されます。 2. プロトタイプメソッドで割り当てられた属性は独立しています (属性を変更しない場合は共有されます)
3. すべてのオブジェクトで同じ関数を使用する場合は、プロトタイプ メソッドを使用して関数を追加するのが最善であり、メモリを節約することができます。

ケース:


function Person(){
  this.name="zs";
  var age=20;
  this.abc=function(){
    window.alert("abc");
  }
  function abc2(){
    window.alert("abc");
  }
}
Person.prototype.fun1=function(){
  window.alert(this.name);//ok
  //window.alert(age);//no ok
  //abc2();//no ok
  this.abc();//ok
}
var p1=new Person();
p1.fun1();
ログイン後にコピー
特別な強調: プロトタイプを通じてすべてのオブジェクトにメソッドを追加する方法を以前に学習しましたが、このメソッドはクラスのプライベート変数やメソッドにアクセスできません。

2. 継承
継承はコードの再利用を解決し、プログラミングを人間の思考に近づけることができます。複数のクラスが同じ属性 (変数) とメソッドを持つ場合、これらのクラスから親クラスを抽象化し、同じ属性とメソッドを親クラスで定義することができます。すべてのサブクラスはこれらの属性とメソッドを再定義する必要はありません。および親クラスのメソッド。
JS で継承を実装する方法

1. オブジェクトのなりすまし
ケース:

<html> 
  <head> 
    <script type="text/javascript"> 
      function Stu(name, age){ 
        this.name = name; 
        this.age = age; 
        this.show = function(){ 
          window.alert(this.name + " " + this.age); 
        } 
      } 
      function MidStu(name, age) { 
        this.stu = Stu; 
        // 通过对象冒充来实现继承的 
        // 对象冒充的意思就是获取那个类的所有成员,因为js是谁调用那个成员就是谁的,这样MidStu就有了Stu的成员了 
        this.stu(name, age); 
        this.payFee = function(){ 
          window.alert("缴费" + money * 0.8); 
        } 
      } 
      function Pupil(name, age) { 
        this.stu = Stu; 
        // 通过对象冒充来实现继承的 
        this.stu(name, age); 
        this.payFee = function(){ 
          window.alert("缴费" + money * 0.5); 
        } 
      } 
 
      var midStu = new MidStu("zs", 13); 
      midStu.show(); 
      var pupil = new Pupil("ls", 10); 
      pupil.show(); 
    </script> 
  </head> 
  <body> 
  </body> 
</html> 
ログイン後にコピー

2. 電話または申し込みを通じて
ケース:

<html> 
<head> 
<script type="text/javascript"> 
  //1. 把子类中共有的属性和方法抽取出,定义一个父类Stu 
  function Stu(name,age){ 
    // window.alert("确实被调用."); 
    this.name=name; 
    this.age=age; 
    this.show=function(){ 
      window.alert(this.name+"年龄是="+this.age); 
    } 
  } 
  //2.通过对象冒充来继承父类的属性的方法 
  function MidStu(name,age){ 
    //这里这样理解: 通过call修改了Stu构造函数的this指向, 
    //让它指向了调用者本身. 
    Stu.call(this,name,age); 
    //如果用apply实现,则可以 
    //Stu.apply(this,[name,age]); //说明传入的参数是 数组方式 
    //可以写MidStu自己的方法. 
    this.pay=function(fee){ 
      window.alert("你的学费是"+fee*0.8); 
    } 
  } 
  function Pupil(name,age){ 
    Stu.call(this,name,age);//当我们创建Pupil对象实例,Stu的构造函数会被执行,当执行后,我们Pupil对象就获取从 Stu封装的属性和方法 
    //可以写Pupil自己的方法. 
    this.pay=function(fee){ 
      window.alert("你的学费是"+fee*0.5); 
    } 
  } 
  //测试 
  var midstu=new MidStu("zs",15); 
  var pupil=new Pupil("ls",12); 
  midstu.show(); 
  midstu.pay(100); 
  pupil.show(); 
  pupil.pay(100); 
</script> 
</html> 
ログイン後にコピー
概要:

1. JS オブジェクトはオブジェクトを通じて偽装され、多重継承を実現できます
2. Object クラスはすべての Js クラスの基本クラスです

3. ポリモーフィズム JS 関数のオーバーロード
これはポリモーフィズムの基礎です。前述の Javascript の紹介で述べたように、JS 関数はポリモーフィズムをサポートしません。しかし実際には、JS 関数はステートレスであり、任意の長さと型のパラメーター リストをサポートします。同じ名前の関数が同時に複数定義されている場合は、最後の関数が優先されます。
ケース:

<html> 
<head> 
<script type="text/javascript"> 
  //*****************说明js不支持重载***** 
  /*function Person(){ 
    this.test1=function (a,b){ 
      window.alert('function (a,b)');  
    } 
    this.test1=function (a){ 
      window.alert('function (a)'); 
    } 
  } 
  var p1=new Person(); 
  //js中不支持重载. 
  //但是这不会报错,js会默认是最后同名一个函数,可以看做是后面的把前面的覆盖了。 
  p1.test1("a","b"); 
  p1.test1("a");*/ 
   
  //js怎么实现重载.通过判断参数的个数来实现重载 
  function Person(){ 
    this.test1=function (){ 
      if(arguments.length==1){ 
        this.show1(arguments[0]); 
      }else if(arguments.length==2){ 
        this.show2(arguments[0],arguments[1]); 
      }else if(arguments.length==3){ 
        this.show3(arguments[0],arguments[1],arguments[2]); 
      } 
    } 
    this.show1=function(a){ 
      window.alert("show1()被调用"+a); 
    } 
    this.show2=function(a,b){ 
      window.alert("show2()被调用"+"--"+a+"--"+b); 
    } 
    function show3(a,b,c){ 
      window.alert("show3()被调用"); 
    } 
  } 
  var p1=new Person(); 
  //js中不支持重载. 
  p1.test1("a","b"); 
  p1.test1("a"); 
</script> 
</html> 
ログイン後にコピー
1. ポリモーフィズムの基本概念

ポリモーフィズムとは、さまざまな状況における参照 (型) の複数の状態を指します。これは、次のように理解することもできます。 ポリモーフィズムは、親クラスを指す参照を通じて、さまざまなサブクラスに実装されたメソッドを呼び出すことを指します。
ケース:

<script type="text/javascript"> 
  // Master类 
  function Master(name){ 
    this.nam=name; 
    //方法[给动物喂食物] 
  } 
  //原型法添加成员函数 
  Master.prototype.feed=function (animal,food){ 
    window.alert("给"+animal.name+" 喂"+ food.name); 
  } 
  function Food(name){ 
    this.name=name; 
  } 
  //鱼类 
  function Fish(name){ 
    this.food=Food; 
    this.food(name); 
  } 
  //骨头 
  function Bone(name){ 
    this.food=Food; 
    this.food(name); 
  } 
  function Peach(name){ 
    this.food=Food; 
    this.food(name); 
  } 
  //动物类 
  function Animal(name){ 
    this.name=name; 
  } 
  //猫猫 
  function Cat(name){ 
    this.animal=Animal; 
    this.animal(name); 
  } 
  //狗狗 
  function Dog(name){ 
    this.animal=Animal; 
    this.animal(name); 
  } 
  //猴子 
  function Monkey(name){ 
    this.animal=Animal; 
    this.animal(name); 
  } 
  var cat=new Cat("猫"); 
  var fish=new Fish("鱼"); 
 
  var dog=new Dog("狗"); 
  var bone=new Bone("骨头"); 
 
  var monkey=new Monkey("猴"); 
  var peach=new Peach("桃"); 
 
  //创建一个主人 
  var master=new Master("zs"); 
  master.feed(dog,bone); 
  master.feed(cat,fish); 
  master.feed(monkey,peach); 
</script> 
ログイン後にコピー
ポリモーフィズムは、コードの保守と拡張に役立ちます。同じタイプのツリーでオブジェクトを使用する必要がある場合、新しいオブジェクトを作成することなく、異なるパラメーターを渡すだけで済みます。

以上がオブジェクトに基づく Javascript の 3 つの主な特徴です。皆さんの学習に役立つことを願っています。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート