• JavaScript的进阶之路(四)理解对象1


    • 对象是JavaScript的基本数据类型。简单的名值对组成了对象,BUT:还可以从一个被称为原型的对象继承属性,对象的方法通常就是继承的属性。

    • 对象最常见的用法有:创建、设置、查找、删除、检测、枚举它的属性。

    • 三类对象

      • 内置对象:Array Function Date RegExp
      • 宿主对象:HTMLElement对象
      • 自定义对象:由运行中的JavaScript代码创建的对象
    • 两大属性

      • 自有属性(own property)直接在对象中定义的属性
      • 继承属性(inherited property)从原型对象中继承的属性
    • 创建对象

      //简单的创建对象
                  var o={};
                  var o1={x:1,y:2};
                  var o3={x:o1.x,y:o1.y+1};
                  var o4={x:1,y:2,z:{x:3,y:4}};
                  var books={
                      "main title":"main title",
                      ah:"jack",
                      name:"name"
                  };
                  var o5= new Object();
                  var o6=Object.create({x:1,y:2,z:function(){}});
      //通过原型继承创建一个新对象
                  function inherit(p){
                      if(p==null){
                          throw TypeError();
                      }
                      if(Object.create){
                          return Object.create(p);
                      }else{
                          var t= typeof(p);
                          if(t!=="object" && t!== "function"){
                              throw TypeError();
                          }else{
                              function f(){};
                              f.prototype=p;
                              return new f();
                          }
                      }                
                  }
      //通过继承设置对象的属性
                  var o7=inherit(o6);   //这里o7继承了o6
                  o7.y=3;
                  console.log(o7.y);  //覆盖了继承的属性 3
                  console.log(o6.y);  //原型中的属性不变 2
                  console.log(o7.x);  //继承了原型的属性 1
    • 查询和设置属性

      var books={
                      "main title":"main title",
                      ah0:"Jack",
                      ah1:"Dava",
                      name:"name"
                  };
                  var title=books["main title"];
                  var ah=books.ah;
                  books.time="2017-05-01";
                  books.ah="Dava";
                  console.log(ah);   //jack
                  console.log(books.time);
                  //var lens=books.subtitle.length;  //这里会报错
                  var len=books && books.subtitle && books.subtitle.length; //短路写法不报错
                  console.log(len);  //undefined
                  //数组写法相对灵活
                  var ah = "";
                  for(var i=0;i<2;i++){
                      ah +=books["ah"+i]+" "; 
                  }
                  console.log(ah);
    • 删除属性

      //删除属性
                  console.log(books.name);
                  delete books["name"];
                  delete books["main title"];
                  console.log(books["main title"]);
                  console.log(books.name);
                  var x = 1;
                  function f(){};
                  delete f; //不能删除全局函数
                  delete x;  //不能删除var全局变量
                  console.log(x);
                  console.log(f);
    • 检测属性

      //检测属性
                  var obj = {x:1};
                  console.log("x" in obj);  //不管继承的还是自有的 都返回true
                  console.log(obj.x !== undefined);     //同in方法,但不能区分x=undefined这种情况
                  //常见的用法
                  if(o.x!=null){}  //如果o中含有x属性,且x的不是null和undefined
                  if(o.x){}         //如果o中含有x属性,且不是null、undefined、0、NaN、false。即o.x不能转换成false
                  console.log(obj.hasOwnProperty("x"));  //检测自有属性
                  console.log(obj.propertyIsEnumerable("x")); //检测可枚举的自有属性
    • 枚举属性

      //枚举属性
                  var o6={x:1,y:2,z:{x:1,y:2},f:function(){}};
                  var o11 = inherit(o6);
                  for(var p in o6){
                      if(!o6.hasOwnProperty(p)) continue;  //这里跳过继承的属性
                      if(typeof o6[p]==="function") continue; //这里跳过方法
                      console.log(p);   //for in 方法遍历对象所有可枚举的属性 包括自有属性和继承属性
                  }
                  console.log(Object.keys(o6)); //返回一个数组,由对象中可枚举的自有属性的名称组成
                  console.log(Object.getOwnPropertyNames(o6)); //返回一个数组,由对象中所有自有属性的名称组成
    • 属性getter和setter

      //属性getter和setter
                  
                  var v={
                      Name:"吴琼",
                      Age:28,
                      set r(name){this.Name = name;},
                      get r(){return this.Name;},
                      set s(age){this.Age = age;},
                      get s(){return this.Age;},
                      get f(){return this.Age;}
                  }
                  //读取get
                  console.log(v.Name);  //吴琼
                  console.log(v.Age);  //28
                  console.log(v.r);  //吴琼
                  console.log(v.f);  //28
                  //设置set
                  v.r="张红";
                  v.s=27;
                  console.log(v.Name);  //张红
                  console.log(v.Age);  //27
                  console.log(v.r);  //张红
                  console.log(v.f);  //27
    • 属性的特性

      //属性的特性:值value(get) 可写性writable(set)  可枚举性enumerable 可配置性configurable
                  //得到自有属性的描述符,想要获得继承属性的描述符,需要遍历原型链Object.getPrototypeOf()
                  //返回一个对象{value: "张红", writable: true, enumerable: true, configurable: true}
                  //对不存在的属性和继承属性返回undefined
                  console.log(Object.getOwnPropertyDescriptor(v,"Name"));  
                  //设置属性的描述符Object.defineProperty Object.defineProperties()
                  Object.defineProperty(v,"Name",{value:"欧红",writable:true,numerable:false,configurable:true});    
                  Object.defineProperties(v,
                      {
                          "Name":{value:"欧红",writable:true,numerable:false,configurable:true},
                          "Age":{value:18,writable:true,numerable:false,configurable:true}
                      }
                  );
                  console.log(v.Name);
                  console.log(v.Age);
                  //不能随便修改属性的特性,必须遵循某些规则 如果属性是不可配置的
    仅此杂文,留待后用。
  • 相关阅读:
    10 个让人惊讶的 jQuery 插件
    URL编码方法比较
    Java大文件分片上传/多线程上传源码
    Java大文件分片上传/多线程上传代码
    Java大文件分片上传/多线程上传插件
    Java大文件分片上传/多线程上传控件
    python函数
    关于言谈
    Sql语句之select 5种查询
    openstack之网络基础
  • 原文地址:https://www.cnblogs.com/wow1314/p/8393723.html
Copyright © 2020-2023  润新知