1. 程式人生 > >對象---聲明對象的方式

對象---聲明對象的方式

語句 直接 實現 裏的 pre return 函數聲明 問題: dom

對象可以分為:1、內建對象:由ES標準中定義的對象,在任何的ES實現中都可以使用,比如:Math String Number Boolen Function等等

       2、宿主對象:有JS的運行環境提供的對象,目前來講主要指瀏覽器提供的對象,如:BOM DOM

       3、自定義對象:由開發人員自己創建的對象

下面將對自定義對象進行講解

聲明對象的方式有:

        1、字面式聲明對象
2、new操作符後跟Object構造函數聲明對象
3、構造函數聲明對象
4、工廠方式聲明對象
5、原型模式聲明對象
6、混合模式聲明對象(構造+原型)

1、js字面式聲明對象   

var person1={
           name:"js",
           age:26,
           sex:"男",
           show:function(pl){
               console.log("js正在"+pl);
           }//註意最後一個不需要加逗號
          }
       console.log(person1.name);
       console.log(person1.age);
       person1.show("表演");

2、new操作符後跟Object構造函數聲明對象

var person2 = new Object();
      person2.name="java";
      person2.age=20;
      person2.play=function(st){
          console.log(this.age+"歲的"+this.name+"正在"+st);
      };
      console.log(person2.name);
      person2.play("打飛機");

3、構造函數聲明對象

function Obj(name,age,done){
          this.name=name;
          
this.age=age; this.done=done; this.watch=function(){ console.log(this.age+"的"+this.name+"正在看"+this.done); } } var obj1=new Obj("php",10,"美女"); obj1.watch(); var obj2=new Obj("小米",12,"野怪"); obj2.watch();

構造函數聲明對象特點:

    1、沒有顯示的創建對象
2、直接將屬性和方法賦給了this對象;this指向當前對象
3、沒有return語句
但是它存在的主要問題(缺點):每個方法都要在每個實例上重新創建一遍,這是完全沒必要的,如著裏的wath()方法,每個實例都會重新創建一次

解決方法1(不可取): 當然我們可以將watch()函數的定義放在構造函數外部,
         但這又會帶來新的問題:汙染了全局作用域的命名空間,而且定義在全局作用域也很不安全,方法1的代碼如下:

      function Objo(name,age,done){
          this.name=name;
          this.age=age;
          this.done=done;
          this.watch2=watch2;
      }
       function watch2(){
              console.log(this.age+"的"+this.name+"正在看"+this.done);
          }
      var obj3=new Objo("php",10,"美女");
       obj3.watch2();

解決方法2:我們可以采用原型模式的方法來解決以上問題;代碼如下:

  function Objo(name,age,done){
          this.name=name;
          this.age=age;
          this.done=done;
      }
      Objo.prototype.watch=function(){
          console.log(this.age+"的"+this.name+"正在看"+this.done);
      }
      var obj4=new Objo("php",10,"美女");
       obj4.watch();

4、工廠方式聲明對象

         function createObject(name,age){
             // 在方法內創建對象
             var bj= new Object();
             bj.name=name;
             bj.age=age;
             bj.run=function(){
                 return this.name+this.age;
             }
             return bj;       
         }
         var bj1=createObject("張三",15);
         var bj2=createObject("李斯",18);
         console.log(bj1.name);
         bj1.run();

工廠模式
作用:按照這種模式可以不斷的創建對象
任何模式下創造出來的對象都是獨立存在的
構造函數聲明對象方式與工廠模式的區別:
1、構造方式不會顯示創建對象,將屬性值賦值給this,不需要return對象
2、工廠方式 在方法內創建Object對象,返回Object對象,屬性和方法都是賦給Object對象

5、原型模式聲明對象

  第一種聲明方式:

function proto(){
        };
        proto.prototype.color = "red";
        proto.prototype.height = "2.7";
        proto.prototype.width = "20";
        proto.prototype.say=function(){
            console.log(this.color+"----"+this.height+"----"+this.width); 
        }
        var pro1 = new proto();
        pro1.say();

   第二種聲明方式:json數據定義屬性和方法

         function proto2(){
         };
         proto2.prototype={
             color: "red",
             height: "20",
             width: "50",
             sayby:function(){
                 console.log(this.color+"----"+this.height+"----"+this.width); 
             }
         }
         var pro2 = new proto2();
         pro2.sayby();

6、混合模式聲明對象(構造+原型)

function blog(name,age,friend){
             this.name=name;
             this.age=age;
             this.friend=friend;
         }
         blog.prototype={
             gets:function(){
                 console.log(this.name+"----"+this.age+"----"+this.friend);
             }
         }
         var blog1 = new blog("張三",24,"李斯");
         console.log(blog1.name);
         blog1.gets();

在實際應用中我們使用混合模式聲明對象的方式居多

對象---聲明對象的方式