面向對象方面的一些東東

時間 2019-11-17

原文原文鏈接

<!DOCTYPE html>
<html lang="zh">
<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
   <title>Document</title>
   <style type="text/css">
       botton{
           width: 60px;
           height: 30px;
           line-height: 30px;
           text-align: center;
           display: block;
           background-color: #81858d;
           color: #FFFFFF;
           border-radius:5px ;
       }
   </style>
</head>
<body>
   <botton class="btn">計數!</botton>
   <p class="pcoun">0</p>
   <script type="text/javascript">
//       函數做爲方法的調用
       var myfonc = {
           firstName:"zhangsan",
           lastName :"lisi",
           fullName:function(){
               return this;
           }
       }
       console.log(myfonc.fullName());
       // 構造函數:
       function myFunction(arg1, arg2) {
            this.firstName = arg1;
            this.lastName = arg2;
       }
//       此處必定要new出來,對象才能夠被調用
       var x = new myFunction('11','222');
       console.log(x.firstName+" "+x.lastName);
//       一個小的計算
       var counte = 0;
       function add(){
          return counte +=1;
       }
       document.getElementsByClassName("btn")[0].onclick=function(){
          document.getElementsByClassName('pcoun')[0].innerHTML = add();
       }


       /*
          * 面向對象
          * new出來的對象都是空白的，因此須要本身添加屬性
          */
//       1.經過Object建立簡單對象：
       var obj = new Object();
//          爲改對象添加屬性
       obj.name ="zhansan";
       obj.age = 15;
       /*
       * 爲該對象添加方法
       * 方法就是一個函數，因此調用這個函數只需obj.showName();
       */
       obj.showName = function(){
           console.log("姓名："+this.name)
       }
       obj.showage = function(){
           console.log("年齡："+this.age)
       }
//       調用對象的方法
       obj.showage()
       obj.showName();
       /*
       * 2.用工廠方式來構造對象：工廠，簡單來講就是投入原料、加工、出廠。
       * 經過構造函數來生成對象，將重複的代碼提取到一個函數裏面，
       * 避免像第一種方式寫大量重複的代碼。這樣咱們在須要這個對象的時候，就能夠簡單地建立出來了。
       */
//       一、構造函數
       function createPerson(name,age){
//           建立對象
           var person = new Object();
//           添加原料
           person.name = name;
           person.age = age;

//           加工原料
           person.showname = function(){
               console.log(this.name)
           }
           person.showage = function(){
               console.log(this.age)
           }
           return person;
       }
       var wang = createPerson('wanger',55);
           wang.showname();



   </script>
</body>
</html>javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。