Javascriptを指向(ベース)オブジェクト指向プログラミング - JavaScriptの研究では、(5)締結しました

まず、コンセプトを明確にします

  1.JS「ターゲット=基づいてオブジェクト指向」

  何のクラス(クラス)2.JSないが、それは、新しい名前、「プロトタイプオブジェクト」を取ったので、「クラス=プロトタイプオブジェクト」

第二に、タイプ(プロトタイプオブジェクト)とオブジェクト(インスタンス)とその接続

  1.クラス(プロトタイプオブジェクトは)物事のクラスを表す、抽象的、概念です。

  2.オブジェクトは、特定のものに代わって、実用的、具体的なです。

  クラス3(プロトタイプオブジェクト)は、テンプレートオブジェクト、クラスの個々のオブジェクトインスタンスの一例です。

第三に、抽象定義

  あなたがクラスを定義すると、実際には、共通の属性と物理モデル(テンプレート)を形成するために、抽出されたもののクラスの動作は、このメソッドは抽象的研究課題と呼ばれています。

四、JavaScriptのオブジェクト指向機能3

  4.1。パッケージング

  パッケージは、プロパティ内で、プログラムの唯一の他の部分を保護し、一緒にパッケージの抽象的属性や属性操作にあり、属性認可操作(機能)によって操作することができます!

梱包例:

コードをコピー
 1 <script type="text/javascript">
 2     /*定义一个Person类*/
 3     function Person(_name,_age,_salary){
 4         //Person类的公开属性,类的公开属性的定义方式是:”this.属性名“
 5         this.Name=_name;
 6         //Person类的私有属性,类的私有属性的定义方式是:”var 属性名“
 7         var Age=_age;
 8         var Salary=_salary;
 9 
10         //定义Person类的公开方法(特权方法),类的公开方法的定义方式是:”this.functionName=function(){.....}“
11         this.Show=function(){
12             alert("Age="+Age+"\t"+"Salary="+Salary);//在公开方法里面访问类的私有属性是允许的
13         }
14         /*
15         定义Person类的私有方法(内部方法),
16         类的私有方法的定义方式是:”function functionName(){.....}“,
17         或者 var functionName=function(){....}
18         */
19         function privateFn(){
20             alert("我是Person类的私有函数privateFn");
21         }
22 
23         var privateFn2=function(){
24             alert("我是Person类的私有函数privateFn2");
25         }
26     }
27     /*通过prototype给可以类的所有对象添加公共(public)方法,
28     但是这种方式定义的方法不能去访问类的私有属性和私有方法*/
29     Person.prototype.Fn=function(){
30         alert("访问公共属性this.Name="+this.Name);//访问公共属性,OK的
31         //alert("访问私有属性Aag="+Age);//访问私有属性,这里会报错“Age未定义”
32         //privateFn();//调用私有方法,这里会报错“缺少对象”
33 
34     }
35 
36     var p1 = new Person("孤傲苍狼",24,2300);
37     alert("p1.Name="+p1.Name);//访问公有属性,这是可以正常访问的
38     alert("p1.Age="+p1.Age+"\t"+"p1.Salary="+p1.Salary);//不能使用类的对象去直接访问类私有属性,这是访问不了的,结果都是undefined
39     p1.Show();//调用类的公共函数,这次允许的
40     p1.Fn();//调用类的公共函数,这次允许的
41     //alert("p1.privateFn():"+p1.privateFn()+"&nbsp;p1.privateFn2():"+p1.privateFn2());//不能使用类的对象去调用类的私有方法,这里会报错”对象不支持此属性或者方法“
42   </script>
コードをコピー

   4.2。継承

継承の例:

コードをコピー
 1 <script type="text/javascript">
 2     /*定义Stu类*/
 3     function Stu(name,age){
 4         this.Name=name;
 5         this.Age=age;
 6         this.Show=function(){
 7             window.alert("我的名字是:"+this.Name+",今年:"+this.Age);
 8         }
 9         this.SayHello = function(){
10             window.alert("Hello,"+this.Name);
11         }
12     }
13 
14     /*定义MidStu类*/
15     function MidStu(name,age){
16         this.stu=Stu;//MidStu类继承Stu类
17         this.stu(name,age);//JS中实际上是通过对象冒充来实现继承的,这句话不能少,因为JS是动态语言,如果不执行,则不能实现继承效果
18         /*
19         从父类继承下来的公共方法,可以根据实际情况选择重写
20         */
21         //在子类MidStu中重写父类Stu的Show方法
22         /*this.Show=function(){
23             alert("MidStu.Show()");
24         }*/
25         //在子类MidStu中重写父类Stu的SayHello方法
26         this.SayHello=function(){
27             alert("你好,"+this.Name);
28         }
29 
30     }
31 
32     var midStu = new MidStu("孤傲苍狼",24);//创建一个MidStu类实例对象
33     alert("访问继承下来的属性Name和Age,midStu.Name="+midStu.Name+",midStu.Name="+midStu.Age);//访问继承下来的属性
34     midStu.Show();//调用从父类Stu继承下来的Show方法
35     midStu.SayHello();//调用从父类Stu继承下来的SayHello方法,SayHello()在子类中进行了重写,这里调用的是重写过后的SayHello()方法
36   </script>
コードをコピー

結果:

 4.3。ポリモーフィズム

  いわゆる多型、異なるサブクラスで実装される方法を呼び出す親クラスへの参照によって、Javaの多型、異なる様々な状況での基準状態を指します。

  JSは、実際には状態ではない動的言語であり、変数の型は、JSエンジンによってように、JSの天然サポート多型を決定される動作です。

五、JavaScriptのカスタムクラス(プロトタイプオブジェクト)の方法

  5.1ファクトリメソッド - 新しいオブジェクトを使用してオブジェクトを作成し、関連する属性を追加します

コードをコピー
 1     //通过Object直接创建对象
 2     //var p1 = new Object();//创建一个Object对象
 3     var p1 = {};//创建一个Object对象,简写
 4     //动态增加属性、方法
 5     p1.Name = "孤傲苍狼";
 6     p1.Age = 24;
 7     p1.SayHello = function() { alert("hello,"+p1.Name); };
 8     p1.SayHello();  
 9     for(var propertyName in p1) {//对象的成员都是对象的key
10         alert(propertyName);
11     }
コードをコピー

  5.2。クラスを定義するコンストラクタを使用して(プロトタイプオブジェクト)

基本语法:
コードをコピー
 1 function 类名(){
 2      this.属性名;//公共属性
 3      var 属性名;//私有属性
 4      /*凡是定义类的公共属性和公共方法都要使用this*/
 5      //定义类的公共函数
 6      this.函数名=function(){
 7                 
 8      }
 9      //定义类的私有函数
10      function 函数名(){
11 
12      }
13 }
コードをコピー

例:

コードをコピー
 1 /*定义一个猫类,这种就是使用构造函数来定义类(原型对象)*/
 2     function Cat(){
 3         this.Name="catName";//public属性
 4         this.Age;//public属性
 5         this.Color;//public属性
 6         var weight=2;//private属性,只能在Cat类内部使用,Cat类的对象无法访问这个私有属性
 7         //public方法
 8         this.publicFunction = function(){
 9             alert(weight);
10             alert("猫叫...");
11         }
12         //private方法,只能在Cat类内部使用,Cat类的对象无法访问这个私有方法
13         var privateFunction = function(){
14             alert("私有方法");
15         }
16 
17 
18     }
19     //如果这样用,那么就当成函数来使用
20     Cat();
21     //如果这样用,那么就当成类来使用
22     var cat1 = new Cat();
23     //cat1就是一个对象(实例)
24     alert(cat1.Name);//访问公共属性,弹出默认值catName
25     cat1.Name="TomCat";//访问公共属性
26     cat1.Age=3;//访问公共属性
27     cat1.Color="白色";//访问公共属性
28     alert(cat1.weight);//访问私有属性,无法访问,弹出undefined
29     alert(cat1.Name+"\t"+cat1.Age+"\t"+cat1.Color);//访问对象的属性方式1:对象名.属性名
30     alert(cat1["Name"]+"\t"+cat1["Age"]+"\t"+cat1["Color"]);//访问对象的属性方式2:对象名["属性名"]
31     cat1.publicFunction();//调用public方法
32     cat1.privateFunction();//调用private方法,报错:对象不支持此属性或方法
33     for(var property in cat1){
34         document.writeln(property+"\t");
35     }
コードをコピー

 JSのすべてが対象で、クラス(プロトタイプオブジェクト)は実際にオブジェクトである、それは実際にはFunctionクラスのインスタンスであります

コードをコピー
 1 document.write("<pre>");
 2     function Person(){
 3     
 4     }
 5     /*Person.constructor得到的Person类的构造函数如下:
 6         function Function() {
 7             [native code]
 8         }
 9     */
10     document.writeln("Person.constructor:"+Person.constructor);//Person类的构造函数
11     document.writeln("Person:"+Person);
12     var p1 = new Person();
13     document.writeln("p1.constructor:"+p1.constructor);//”p1.constructor“是得到p1实例的构造函数
14     //如何判断某个对象是不是某个类型,采用如下两种方式
15     if(p1 instanceof Person){
16         document.writeln("p1 is Person ok1");
17     }
18     if(p1.constructor==Person){
19         document.writeln("p1 is Person ok2");
20     }
21 
22     var num1=123;
23     document.writeln("num1.constructor:"+num1.constructor);
24 
25     var str1="abc";
26     document.writeln("str1.constructor:"+str1.constructor);
27     document.write("</pre>")
コードをコピー

結果:

Person.constructor:
function Function() {
    [native code]
}

Person:function Person(){
	
	}
p1.constructor:function Person(){
	
	}
p1 is Person ok1
p1 is Person ok2
num1.constructor:
function Number() {
    [native code]
}

str1.constructor:
function String() {
    [native code]
}

ます。https://my.oschina.net/zhanghaiyang/blog/599515で再現

おすすめ

転載: blog.csdn.net/weixin_33752045/article/details/92650592