对象

  • 对象的创建

    • 对象字面量
    var obj = {
      "key1" : "value1",
      "key2" : " value2" 
    }
    

    如果对象的键不是javascript保留字的话可以不加引号

    • 函数对象
    function createObject(){
      this.key1 = "value1";
      this.key2 = "value2";
      // some code here 
    }
    var funcObj = new createObject();
    

    在javascript中函数也是对象,它可以通过new关键字将函数作为一个构造器创建对象。

  • 属性

    • 属性的初始化
      在上面代码中key1,key2就是属性的初始化创建,分别初始化为value1和value2。在对象被创建的同时,key1和key2也被创建。
    • 属性的读取
      无论是字面量对象还是函数对象,属性的访问都是一致的。
    // 方式一:
    console.log(obj.key1); // value1
    console.log(funcObj.key1); // value1
    
    // 方式二:
    console.log(obj["key1"]); // value1
    console.log(funcObj["key1"]); // value1 
    
    // 方式三:
    var attrName = "key1";
    console.log(obj[attrName]); // value1
    console.log(funcObj[attrName]); // value1
    

    其实,方式二和方式三是本质上是一样的,都是通过字符串进行属性访问,不过为了显示使用变量作为键名来访问属性的方式,这里将它们分开以便说明。
    注意:1. 如果读取的属性不存在,会返回undefined
       2. 如果在不存在的属性返回值undefined中再读取属性,程序会抛出TypeError异常。比如:
         obj.key3.name就会抛出异常。可以使用obj.key3 && obj.key3.name避免异常。

    • 属性的赋值(更新)
      属性的赋值很简单,就是在读取方式的基础上添加赋值语句。
    // 方式一:
    obj.key1 = "newValue1";
    funcObj.key1 = "newValue1";
    
    // 方式二:
    obj["key1"] = "newValue1";
    funcObj["key1"] = "newValue1";
    
    // 方式三:
    var attrName = "key1";
    obj[attrName] = "newValue1";
    funcObj[attrName] = "newValue1";
    

    注意:如果赋值给一个对象本身没有的属性,javascript会把它自动添加到对象的属性列表中

    • 属性的删除
    // 方式一:
    delete obj.key1;
    delete funcObj.key1;
    
    // 方式二:
    delete obj["key1"];
    delete funcObj["key1"];
    
    // 方式三:
    var attrName = "key1";
    delete obj[attrName];
    delete funcObj[attrName];
    

    注意:删除对象属性可能让来自原型链中的同名属性渗透出来

  • 原型
    每个对象都连接到一个原型对象,并且它可以从中继承属性,所有通过对象字面量创建的对象都连接到Object.prototype;而所有通过函数创建的对象都连接到Function.prototype(该原型本身连接到Object.prototype)。
    使用赋值语句可以轻易地改变对象的原型对象。比如:

    Object.create = function(o){
        var F = function(){}; //创建新对象构造器
        F.prototype = o; //新对象的原型为o,即原对象
         return new F(); //返回一个新对象
     };
    var newObj = Object.create(obj);
    

上面代码创建了一个原型对象是obj的函数对象。
在对象读取属性时,读取属性的顺序是本身--原型--原型......--Object.prototype。这个过程称为委托。
直到找到读取的属性时,才返回属性值,并且不再往下搜索属性。如果直到Object.prototype都没有找到该属性,返回undefined。
注意:1.原型连接只有在读取时才会有用,更新时是不会触及和影响到原型连接的。
   2.原型是一种动态关系,如果添加一个新属性到原型中,那么该属性对所有基于该原型创建的对象可见。

  • 反射
    原型链存在着一些不必要的属性,比如toString,constructor
    有两种方法过滤这些属性:
      // 方式一
      for(var attr in obj){
        if(typeof attr !== 'function'){
            console.log(attr + ": " + obj[attr]);
        }
      }
    
      // 方式二
      for(var attr in obj){
       if(person.hasOwnProperty(attr)){
            console.log(attr + ": " + obj[attr]);
        }
      }
    
  • 遍历
    for in语句可用于遍历对象中所有属性名。该枚举过程会列出所有的属性,包括函数和你可能不关心的原型中的属性
     for(var attr in obj){
       if(typeof attr !== 'function'){
           console.log(attr + ": " + obj[attr]);
       }
     }
    
    注意:for in遍历属性的顺序是不确定的。如果需要以特定的顺序读取属性,最好不用for in。
    属性按一定顺序遍历:
      var i;
      var properties = [
          'key1',
          'key2'
      ];
      for(i = 0; i < properties.length; i++){
          console.log(properties[i] + ": " + obj[properties[i]]);
      }  
    
  • 引用
    对象通过引用传递,对象永远不会被赋值
    var cloneObj = obj;
    
    上面代码原意是希望拷贝obj对象,但是直接使用赋值语句仅仅表示cloneObj变量引用了obj对象,即cloneObj指向了obj的内存地址,并没有实现对象的拷贝。
  • 拷贝
    浅拷贝
    function shallowClone(obj){
      var newObj = {};
      for(var attr in obj){
        newObj[attr] = obj[attr];
      } 
      return newObj;
    }
    var cloneObj = shallowClone(obj);
    
    上面代码仅仅拷贝了obj对象的一层,如果obj的某个属性时引用类型,那么并没有彻底解决对象拷贝时存在属性引用的问题。
    深拷贝
    function deepClone(obj){
      var objString = JSON.stringify(obj);
      var newObjString = objString;
      var newObj = JSON.parse(newObjString);
      return newObj; 
    }
    var cloneObj = deepClone(obj);
    
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,744评论 6 502
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,505评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,105评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,242评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,269评论 6 389
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,215评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,096评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,939评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,354评论 1 311
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,573评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,745评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,448评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,048评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,683评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,838评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,776评论 2 369
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,652评论 2 354

推荐阅读更多精彩内容