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 
     
     
     
     
     
     
  • 相关阅读:
    简单的模板解析函数
    HTML通过事件传递参数到js 二 event
    HTML通过事件传递参数到js一
    通过this获取当前点击选项相关数据
    LeetCode 20. 有效的括号(Valid Parentheses)
    LeetCode 459. 重复的子字符串(Repeated Substring Pattern)
    LeetCode 14. 最长公共前缀(Longest Common Prefix)
    LeetCode 168. Excel表列名称(Excel Sheet Column Title)
    LeetCode 171. Excel表列序号(Excel Sheet Column Number) 22
    LeetCode 665. 非递减数列(Non-decreasing Array)
  • 原文地址:https://www.cnblogs.com/xiaoguanqiu/p/4674919.html
Copyright © 2011-2022 走看看