DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript如何創建對象
javascript如何創建對象
編輯:關於JavaScript     

JS是基於對象的語言,可以使用面向對象思想模擬JAVA|C++之類的面向對象語言。
 •面向過程
◦關注解決問題的步驟

 •面向對象
◦關注的是解決問題的所需要的對象(內容和角色),然後根據業務邏輯按一定規則調用相關方法

對象分為系統對象和自定義對象兩種。我們可以通過調用系統構造函數來創建出系統對象,如:array|date等。自定義對象必須自己創造,無法利用系統函數來創造。

javascript創建對象 

一、直接創建

 //直接創建
     //JS創建對象
     //1:創建空對象
         var person1 = new Object();
     //2:將該對象所需要的屬性、方法加進去
         person1.name ="ailer" ;
         console .log(person1.name);
         person1.gender = "male";
     //3:該對象添加的方法|(函數)
         person1. manager= function (){
           console .log("Ailer is my English name" );
        }
     //4:調用對象方法:對象.方法名();
         person1.manager();

     //函數|方法?函數屬於對象時,該函數屬於這個對象下的方法;通過方法名來調用該函數;
     //變量|屬性 ?當變量屬於某一個對象時候, 該變量就是這個對象下的方法。通過屬性名來調用變量。

      //增
         person1.age ="6" ;
      //改
         person1.name ="lemon" ;
      //查
         console .log(person1.name);
     //刪
         delete person1.age;
         console .log(person1.age);==> undefined

      //引用類型,存儲的是地址
      //基本類型:存儲的是值 標志位

     /*  var arr1 = [1,2,3,4]
        var arr2 = [5, 6, 7,9];
        var arr2 = arr1;//
        arr2[0]=10;//更改arr2裡面的值,arr1也更改
        alert(arr1[0]);//====>10 引用類型*/

        var per2 = new Object();
        per2.name = "Relia";
        per2.age = "18";
        per2.gender = "femal";
        per2.hobby = "lemons";

         //1:通過.(點語法)訪問屬性
         //2:通過[](方括號)訪問對象的屬性;方括號中必須是屬性字符串或保存屬性字符串的變量|遍歷屬性的時候才使用方括號
         var n = "name"
         //console.log(per2["name"]);//雙引號

         console .log(per2[n]);
         for ( var property in per2) {
//          console.log(per2[property]);
         }

雖然直觀,但是創建多個對象的時候,代碼冗余

二、使用函數創建(工廠模式)

為了解決多個類似對象聲明的問題,我們可以使用一種叫做工廠模式的方法,這種方法就是為了解決實例化對象產生大量重復的問題。

//定義構造函數      
 function createPerson ( name, age) {
//創建一個新的空對象
           var person = new Object;
//添加屬性|方法
           person.name = name;
           person.age = age;
           person. manager = function() {
              console .log("ai" );
           }
//返回
           return person;
        }

         var per1 = createPerson( "ailer", 12 );
         console .log(per1.name);

        var per2 = createPerson( "lemon", 23 );
        console .log(per2.age);
        console.log(per2 instanceof Object);//true
        console.log(per2 instanceof createPerson);//false//無法區分該對象類型
        console.log(per2.manager==per1.manager);//false 可得出per1和per2各自開閉空間

優:批量創建同類實例
缺:實例用同類屬性, 造成內存浪費無法公,且無法區分該對象的類型

三、 字面量創建

優:簡單直接
缺:無法批量構建同類對象

//字面量創建的對象使用constructor屬性不會指向實例,而是指向object
 //使用字面量創建
       var per1 = {
        name:"Ailer",
         constructor:per1,
        age:12,
        gender:"female",
        hobby:"play",
        eat:function(){
          console.log(this.name);
        }
       }
       per1.eat();//ailer
       per1.name="lemon";
       per1.eat();//lemon
       console.log(typeof per1);//Object
       console.log(per1.constructor==Object);//true

 四、new+構造函數

//構造函數創建對象,其子對象用instanceof不識別,所有采用new+obj創建
        //對象識別了,但是仍然浪費一些代碼區;==>產生原型創建
        //創建js對象 new+構造函數
        //1:創建構造函數 |通常首字母大寫
        function CreatePerson( name , age){
          //2:把對象的屬性|方法掛靠在this指針身上, 當調用該函數創建對象時,this指針就指向這個新對象;
          //這個this就添加給這個對象
          this.name = name;
          this.age = age;
          /*this.speak = function(){
            //此處this也指向創建對象
            console.log(this.name+" hello");
          }
        }

      /* CreatePerson.prototype.gender = "20";
       CreatePerson.prototype. ea = function(){
          console .log(this.name+ "sfd" );
       }*/

//      __proto__:是:實例對象中的原型屬性, 指向對應構造函數對應的原型對象
//      [[prototype]]
        //調用
        var per1 = new CreatePerson( "ailer", "20" );
        var per2 = new CreatePerson( "relia", "18" );
        console .log(per1 instanceof CreatePerson); //==true
        console .log(per2 instanceof CreatePerson); //==>true
        console .log(per1.speak== per2.speak); //==false說明系統開辟了兩個不同的代碼區,造成了內存浪費.


字面量創建一個比較方便,所以產生構造函數,普通構造函數(工廠模式),子對象instanceof不識別且內存浪費,用new+構造函數,子對象識別了,但仍有部分代碼重復,內存浪費,產生原型代碼解決。

五、原型模式

      function CreateAnimal(name, age) {
        //1.2:把外部參數綁定實例屬性
        this.name = name;
        this.age = age;
      }
      //1.3把相同的屬性,綁定在原型上(原型屬性,原型方法)
      CreateAnimal.prototype.gender = "male";
      CreateAnimal.prototype.style = function() {
        console.log(this.name + " ailers");
      };
      //2:調用構造函數創建對象
      var cat1 = new CreateAnimal("xiaohua", "2");
      var cat2 = new CreateAnimal("xiaohua", "2");
      cat1.style();

      console.log(cat1.style==cat2.style);//方法引用地址一樣,將屬性放到原型對象中,節約地址

      //instanceof可以來判斷對象屬於哪一個【函數】
      //constructor 建造者 也可以用來判斷對象屬於哪個【構造函數】 【常】 
      //實例對象保存一個 constructor屬性指向它的構造函數
      //instanceof and constructor 區別
      console.log(cat1 instanceof CreateAnimal);//true
      console.log(cat1 instanceof Object);//true

      console.log(cat1.constructor == CreateAnimal);//true
      console.log(cat1.constructor == Object); //==false

      //構造函數的原型也有constructor屬性指會構造函數
      console.log(CreateAnimal.prototype.constructor == CreateAnimal);//true

      //in判斷該屬性是否存在這個對象中,這個屬性為實例屬性或原型 
//           alert("name" in cat1)//true
//           alert("gender" in cat1);//true

      //hasOwnProperty:來判斷某一個屬性到底是實例屬性,還是繼承自原型屬性 if 是 為true, else不存在|不是返回false;
      console.log(cat1.hasOwnProperty("aaa"));//false 不存在的屬性返回為false
      console.log(cat1.hasOwnProperty("name"));//true 實例屬性
      console.log(cat1.hasOwnProperty("style"));//false 原型屬性返回為false

      //遍歷屬性找原型屬性

      //判斷參數是否為原型屬性  工具類
      console.log(isPrototype("gender", cat1));//true
      function isPrototype(proString, obj) {
        if(proString in obj) {
          if(!obj.hasOwnProperty(proString)) {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      }
      /*
function isProperty(object, property) {//判斷原型中是否存在屬性
   return !object.hasOwnProperty(property) && (property in object);
}*/

動態原型模式

//構造函數中初始化原型
function per(name, age, gender) {
        this.name = name;
        this.age = age;
        this.gender = gender;
        //只在初始化原型的時候執行一次
        if(typeof this.sayName != "function") {
          Person.prototype.sayName = function() {
            alert(this.name);
          }
        }
      }

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved