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

猜你喜欢

转载自blog.csdn.net/wenmin1987/article/details/85019064