1. 程式人生 > >javascript物件基礎(使用物件)---物件、屬性、方法的基本操作

javascript物件基礎(使用物件)---物件、屬性、方法的基本操作

字串、數字、true、false、null和undefined之外,javascript的值都是物件

一、物件的分類:

           1. 原生物件:

                                   Object、Function、Array、String、Boolean、Number、Date、RegExp、

                                   Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URLError

            2.宿主物件:非javascript定義的物件,是由javascript寄宿的環境定義

                               Window、Document、History、Location、Screen、Navigator、Body、Form、Event

二、物件的常見用法是:

     建立create、設定set、查詢query、刪除delete、檢測test、列舉enumerate

     物件的基本操作:建立物件  引用物件   銷燬物件

     1、建立物件

           1.1使用建構函式建立物件

             var o=new Object();  //建立一個空物件(不包含任何屬性和方法的空物件)

             var o=new Array(); //空的陣列物件(繼承陣列的屬性和方法)

             var o=new MyClass();//自定義物件

            1.2使用直接量建立物件

             var o={};//建立的空物件直接量

             var o={x:1,y:false,name:'zhang',add:'shenzhen'}//建立包含資料的物件直接量

     2.引用物件:儲存在變數中的值只是引用物件的地址,而不是物件本身

            o={x:1,y:true}

              o1=o;

             alert(delete o);//刪除變數o,返回true

             alert(o1.x);//1,說明物件依然在

              alert(o.x);//提示沒有定義物件

     3.銷燬物件:javascript自動回收無用的儲存單元,物件沒有被任何變數引用,則處於廢除狀態,相當於o=null(對於不用的物件可習慣這樣寫成這樣,將物件廢棄節省空間)

        var  o={x:1,y:true}

        o=null;//定義物件引用變數為null,即廢除物件

         alert(o.x);//提示系統錯誤,找不到物件

        屬性基本操作:定義屬性、訪問屬性、賦值和刪除屬性

      1.定義屬性

        1.1物件結構體內定義屬性: 3層巢狀物件結構(雖然包含不同屬性名y,但屬於不同的作用域,因此不會衝突)

   var o={//一級物件

                x:1,

                y:{//二級物件

                      x:3,

                      y:{//三級物件

                            x:3,

                             y:false

                    }}}

          1.2  物件結構體外定義屬性:

                 var o={};

                 o.x=1;

                  o.y={

                         x:2,

                         y:true

                      }

          1.3建構函式定義屬性

            var o=function(){

              this.x=1;

                 this.y={                   

                          x:1,

                         y:true

                  }

               }

         2.訪問屬性:

             alert(o.y.y.y)//若讀取 屬性不存在,不會拋異常,返回undefined

             alert(o["y"]["y"]["y"])

             for(var i in o){alert(o[i])}//使用陣列操作方式讀取屬性,屬性沒有固定顯示順序,同時也只能夠列舉自定義的屬性

         3.賦值和刪除屬性

              var o={x:1,y:2}

                o.x=2;

                o["y"]=1;

               delete o.x;

          4.物件的方法:本質是一種值為函式的屬性

              4.1結構體內定義-

                var o={x:function(){alert(this.y)}}//--this訪問當前物件的屬性y的值

                o.x(); //undefined

                var f=o;

                  f.y=2; f.x();//2

              4.2結構體外定義-

                var o={}   o.x=function(a){return 10*a;}

                var f=o.x(5);alert(f);//50

         4.3構造方法

           4.3.1

  function who(){alert(this.name)}//定義一個抽象方法

      var  o=new Object();

           o.name="o";

           o.who=who;//繫結抽象方法

       var f=new Object();

           f.name="f";

           f.who=who;//繫結抽象方法

           o.who();//"o"

            f.who();//"f"

     4.3.2

        function f(){return this.x+this.y}

         function MyClass(x,y){this.x=x;this.y=y;this.add=f}

         var o=new MyClass(10,20);

         alert(o.add())//30

 

三、物件的高階用法(ECMScript5):Object  Array  Function String

    Object ------

     1.  建立物件(前面使用的是1.使用物件直接量2.通過new建立物件)

          Object.create(prototype,descriptors) //prototype為必需引數,要用作原型的物件,可以為null;第二個可選,屬性描述項物件 ,即descriptors是個javascript物件{}

           //資料屬性描述符包含value特性:writable  enumerable  configurable,若未指定 都預設為false

          //訪問器屬性描述符:設定屬性值的函式set     返回屬性值的函式get

         1.1  var newObj.create(null,{

               size:{

                   value:'large',

                   enumerable:true

                    },

              shape:{

                     value:"round",

                    enmumerable:true

                  }

            })

        newObj.size;//large    newObj.shape;//round

        Object.getPrototypeOf(newObj);//null

   1.2使用Object.create建立一個與Object物件具有相同物件的原型物件

      var first={x:undefined,y:undefined}//定義的物件直接量

         var   second=Object.create(Object.prototype,{

           x:{

                 value:undefined,

                writable:true,

               configurable:true,

               enumerable:true

              },

           

       y:{

                 value:undefined,

                writable:true,

               configurable:true,

               enumerable:true

               },

})

        Object.getPrototypeOf(first);//[object  Object]

       Object.getPrototypeOf(second);//[object  Object]

   2.1定義屬性:2個靜態函式  Object.defineProperty()、Object.defineProperties()

        Object.defineProperty(object,propertyname,desciptor)//將屬性新增到物件,或者修改現有屬性的特性

       Object.defineProperties(object,desciptors)//將多個屬性新增到物件,或者修改現有多個屬性的特性

    例:

       var obj={}

         Object.defineProperty(obj,"newDataProperty",{

           value:101,

           writable:true,

          enumerable:true,

         configurable:true

        });

        obj.newDataProperty=102;//將newDataProperty的值101修改為102

   document.write(obj.newDataProperty);//102

   

 var obj={}

         Object.defineProperties(obj,{

              newDataProperty:{

                  value:101,

                 writable:true,

                  enumerable:true,

                 configurable:true},

                 newAccessorProperty:{

                  set:function(x){this.newaccpropvalue=x},

                  get:function(){retrun this.newaccpropvalue}

              }

        });

     obj.newAccessorProperty=10;

  document.write(obj.newAccessorProperty);//10

  22.訪問屬性(前面使用的是1  .方式   2  陣列方式  3 for in)

  Object.getPrototypeOf(object);//返回指定物件object的原型

  Object.getOwnPropertyDesciptor(object,propertyname);//獲取指定物件object的私有屬性描述符

  Object.getOwnPropertyNames(object);返回指定物件object私有屬性的名稱,包括可列舉和不可列舉的屬性和方法的名稱

   Object.keys(object);返回僅可列舉的的屬性和方法的名稱,object也可以是建立的物件或現有的dom物件

  例:

  1.---   function Pasta(grain,width){

        this.grain=grain;

       this.width=width;

      }

   var spaghetti=new Pasta("wheat",0.2); var proto=  Object.getPrototypeOf(spaghetti)

   docuement.write(proto===Pasta.prototype);//true

   

 2--  function Pasta(grain,width,shape){

        this.grain=grain;

        this.width=width;

       this.toString=function(){

           return(this.grain+","+this.width+","+this.shape)

       }

      }

       var spaghetti=new Pasta("wheat",0.2,"circle");

   var arr=  Object.getOwnPropertyNames(spaghetti);

   docuement.write(arr);//grain,width,shape,toString

3--var obj={}

  obj.newDataProperty="abc",

  var descriptor=Object.getOwnPropertyDescriptor(obj,"newdataProperty");//獲得物件私有屬性的描述符

       descriptor.writable=false;//修改特性

    Object.defineProperty(obj,"newdataProperty",descriptor);//定義屬性

  var desc2=Object.getOwnPropertyDescriptor(obj,"newdataProperty");//獲得物件私有屬性的描述符

  for(var prop in des2){

      document.write(prop+':'+desc2[prop]);

      document.write("<br/>");

   }//value:abc   writable:false     enumerable:true     configruable:ture

     2.2配置屬性的特性

  Object.seal(object);//阻止修改現有屬性的特性,以及新增新屬性,但可以修改屬性的值

  Object.freeze(object);//阻止修改現有屬性的特性和值,以及新增新屬性

  Object.preventExtensions(object);//阻止新增新屬性,但修改屬性的特性和值

2.3檢測屬性的特性

  Object.isSealed(object);//如果無法再物件中修改現有屬性的特性,且無法向物件新增新屬性,則 返回true

  Object.isFrozen(object);//如果無法再物件中修改現有屬性的特性和值,且無法向物件新增新屬性,則 返回true

  Object.isExtensible(object);//如果可擴充套件(即可新增新屬性),則為true,否則返回false

 

Array---ECMAScropt5新增了9個方法

  定位:2個--array.indexOf() 、 array.lastIndexOf()

    array.indexOf(searchElement[,fromIndex]);//陣列中第一個匹配項的索引,沒找到指定值,返回-1

   array.lastIndexOf(searchElement[,fromIndex]);//陣列中最後一個匹配項的索引,沒找到指定值,返回-1

 迭代:5個---forEach()、every()、some()、map()、filter()

      1.  array.forEach(callbackfn[,thisArg])

    例1.1: function callback(value,index,arr){

                 document.write("value:"+value);

                 document.write("index:"+index);

                  document.write("arr:"+arr);

}

 var arrs=['a','b','c'];

  arrs.forEach(callback)

例1.2forEach()如何使用thisArg引數,該引數指定可對其引用this關鍵字的物件

   var obj={

        showResults:funciton(value,index){

            var squared=this.calcSquare(value);

                document.write("value:"+value);

                 document.write("index:"+index);

                  document.write("squared:"+squared);

                  document.write("<br/>")

            },

           calcSquare:function(x){return x*x}

};

var numbers=[5,6];

numbers.forEach(obj.showResults,obj);

numbers.forEach(function(value,index){this.showResults(value,index)},obj)

---every()

  function CheckIfEven(value,index,ar){

    document.write(value+" ");

      if(value%2==0){return true}else{return false}

    }

 var nums=[2,4,5,6,8];

if(nums.every(CheckIfEven)){document.write(" 都是偶數");}else{document.write(" 不全為偶數");}//2 4 5不全為偶數

   every()  thisArg的用法:

 var checkNumericRange=function(vaule){

             if (typeof value!=='number') 

                     return false

             esle 

                     return value>=this.minimum&&value<=this.maximum;

      }

var nums=[10,15,19];

var obj={minimum:10,maximum:20}

if (nums.every(checkNumericRange,obj))

        document.write("都在指定範圍內")

else  

    .write("部分在指定範圍內")

-----some()

  

  function CheckIfEven(value,index,ar){

      if(value%2==0){return true}

    }

var nums=[1,15,4,10,11,22];

var evens=nums.some(CheckIfEven);

if(evens)

       document.write("不全是奇數。")

else

    document.write("全是奇數。")

彙總:2個 reduce() reduceRight()

  array.reduce(callbackfn[,initialValue])

  function callbackfn(previousValue,currentValue,currentIndex,array)//4個引數

 

Function

   function.bind(thisArg[,arg1[,arg2[,argN]]])

 

String

stringObj.trim()