zoukankan      html  css  js  c++  java
  • Javascript我学之五对象的创建与使用

    本文是金旭亮老师网易云课堂的课程笔记,记录下来,以供备忘。

    对象的创建

    JavaScript对象有两种类型
     
    1).Native:在ECMAScript标准中定义和描述,包括JavaScript内置对象(数组,日期对象等)和用户自定义对象。
     
    2).Host:在主机环境(如浏览器)中实现并提供给开发者使用,比如windows对象和所有的DOM对象
     
     
     

    对象的含义

    Object is an unordered collection of properties each of which contains a primitive value, object, or function.
                                                                                                                                                                                        ——ECMA-262
     
     
     
     

    创建对象

    1.)定义空对象之后再添加成员

          最简单的方法(称为object literal,对象字面量):
    1 var myObject = {};

          之后便可以向它添加新成员:

    1 myObject.name = "张三";
    2 myObject.age = 29;

    2).使用对象字面量

          对象字面量就是包围在一对花括号中的零或多个“name/value"对。

    1         //通过对象字面量创建对象 属性的名字可以加也可以不加双引号
    2         var person = {
    3             "name": "张三",
    4             age: 29
    5         };

     嵌套的对象定义

    使用对象字面量方式,定义嵌套的对象很容易

     1         //使用字面量创建嵌套的对象
     2         var embedObj = {
     3             info: "information",
     4             //内嵌的对象
     5             inner: {
     6                 id: 0,
     7                 value: 100
     8             },
     9             //内嵌的数组
    10             arr: ["one", "two", "three"]
    11         };

    定义对象方法

     1).对象的方法,其实是一个“函数”类型的属性,可以使用对象字面量方式定义:
    1         //定义对象方法
    2         var obj = {
    3             sayHello: function (name) {
    4                 console.info("你好," + name + "!");
    5             }
    6         };
    7         obj.sayHello("qiu");  //你好,qiu

    2).也可以直接追加到现有对象中.

    1         var obj2 = {};
    2         obj2.sayHello = function (name) {
    3             console.info("你好," + name + "!");
    4         };

    对象的使用

    [].表示法访问对象属性.可以通过||指定默认值 
     
     1         //访问对象
     2         var exampleObj = {
     3             info: "information",
     4             //内嵌的对象
     5             inner: {
     6                 id: 0,
     7                 value: 100
     8             },
     9             //内嵌的数组
    10             arr: ["one", "two", "three"],
    11             //方法
    12             sayHello: function (name) {
    13                 console.info("你好," + name + "!");
    14             }
    15         };
    16         //使用点表示法访问对象属性
    17         console.info(exampleObj.info);  //information
    18         console.info(exampleObj.inner.value);  //100
    19         console.info(exampleObj.arr[0]); //one
    20         //如果要访问的属性不存在,可以使用||指定默认值
    21         console.info(exampleObj.notExist || "属性默认值"); //属性默认值
    22         //使用[]访问对象属性
    23         console.info(exampleObj['info']);   //information
    24         //调用对象方法
    25         exampleObj.sayHello('张三');        //你好,张三
    26         exampleObj['sayHello']('李四');      //你好,李四

    枚举对象属性

     因为对象可看成是属性的集合,因此可以通过迭代的方式获取其所有属性:
    1         //编程列出exampleObj对象的属性与方法
    2         for (var p in exampleObj) {
    3             console.info(p+ "类型:" + (typeof exampleObj[p]) );
    4         }
    5 //        info类型:string 
    6 //        inner类型:object 
    7 //        arr类型:object
    8 //        sayHello类型:function

    对象的属性可以随时添加与删除

    1         //删除对象的属性与方法
    2         delete exampleObj.info;
    3         delete exampleObj.sayHello;

    删除一个对象属性之后,再对它进行访问,将得到一个undefined。

    1         //验证属性己删除
    2         console.info(exampleObj.info);//undefined
    3         console.info(exampleObj.sayHello === undefined); //true
    4         //exampleObj.sayHello('张三'); //TypeError

    处理TypeError:

                当JavaScript引擎在解析JavaScript代码时,如果出现TypeError异常,它将中断解析工作,导致后面的代码不会被执行,为了避免出现这种情况,可以使用&&运算符提前“取消”本条语句的执行,继续执行后面的代码:
     
    1 //使用&&避免出现TypeError导致后继代码无法执行
    2 exampleObj.sayHello && exampleObj.sayHello('张三');
    3 //尽管sayHello方法己被删除,上述代码得到一个undefined
    4 //但后面的代码仍然可以继续执行

    对象作为函数参数

    示例:
     1         //作为函数参数的对象
     2         function displayPerson(person) {
     3             console.info('name=' + (person.name || '无名氏'));
     4             console.info('age=' + (person.age || -1));
     5         };
     6         //使用对象字面量直接将对象传入
     7         displayPerson({
     8             "name": "张三",
     9             "age": 29
    10         }); //name=张三 
    11             //age = 29 
    12         displayPerson({});  //name=无名氏 
    13                             //age=-1 
     
     
     
     
     
     
  • 相关阅读:
    最佳实践丨三种典型场景下的云上虚拟IDC(私有池)选购指南
    总渲染时长超3亿核小时,阿里云助力《白蛇2:青蛇劫起》提升视效
    阿里云成为首个通过“虚拟化云平台性能测试(大规模)”的云厂商
    AI性能提升2-3倍!搭载 NVIDIA A10 GPU的阿里云gn7i服务器开启邀测
    最佳实践丨阿里云ECI如何助力西软构建酒店行业多租户高弹性PaaS平台?
    暑期大放“价”,轻量应用服务器9元包月!
    报名通道开启!原生安全二倍速:探秘基础设施的内生“免疫系统"
    40万奖金等你来挑战!阿里云ECS Cloudbuild开发者大赛重磅开启
    Ubuntu安装桌面环境
    tinkphp3.0 execl导出问题
  • 原文地址:https://www.cnblogs.com/xiaoguanqiu/p/4674919.html
Copyright © 2011-2022 走看看