JavaScript study concluded (5) - Javascript-oriented (based) object-oriented programming

2019 Unicorn Enterprises heavily recruiting engineers Python standard >>>

First, to clarify the concept

　　1.JS the "target = based object-oriented"

　　2.JS no class (Class), but it took a new name, "prototype object" and therefore "class = prototype object"

Second, the type (prototype object) and an object (instance) and their connection

　　1. class (prototype object) is an abstract, concept, representing a class of things.

　　2. The object is a concrete, practical, on behalf of a specific thing.

　　Class 3 (prototype object) is an example of template objects, an individual object instance of the class.

Third, the abstract definition

　　When you define a class, in fact, the common attributes and behavior of a class of things extracted to form a physical model (template), this method is called abstract research questions.

Four, JavaScript object-oriented features three

　　4.1. Packaging

　　Package is to abstract attributes and attribute operation of the package together, inside the property is protected, only other parts of the program, can be operated by attribute authorized operation (function)!

Packaging examples:

 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. Inheritance

Inheritance Example:

 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>

operation result:

 4.3. Polymorphism

　　The so-called polymorphism, refers to a reference state at a variety of different situations, polymorphic in Java by means of references to the parent class to call the method implemented in different subclasses.

　　JS is actually no state, is a dynamic language, the type of a variable is in operation is determined by the JS engine, so that, JS natural support polymorphism.

Five, JavaScript custom class (prototype object) way

　　5.1 factory methods - to create an object using the new Object and add the relevant attribute

 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. Using a constructor to define the class (the prototype object)

基本语法：

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

example:

 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 everything is an object, class (prototype object) is actually an object, it is actually an instance of the Function class

 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>")

operation result:

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]
}

Reproduced in: https: //my.oschina.net/zhanghaiyang/blog/599515