• JavaScript 对象


    一、对象

      1、引入对象

        当一个函数参数特别多的话,这个时候我们就可以使用对象简化。

      2、什么是对象

        现实生活中:万物皆对象。对象是一个具体的事物,一个具体的事物就会有行为特征

      Demo:

         汽车是一类事物,门口停的那一辆车才是对象。

         特征:蓝色、四个轮子,四个座位

         行为:驾驶、刹车

    二、JavaScript 中的对象

      1、JavaScript 中的对象其实就是生活中对象一个抽象。

      2、JavaScript 的对象是无序属性的集合。其属性可以包含基本值、对象或函数。

           对象就是一组没有顺序的值,可以把 JavaScript 中的对象想象成键值对。其中值可以是数据和函数。

         对象的行为和特征:

          特征 —— 属性;  事物的特征在对象中用属性来表示。

          行为 —— 方法;  事物的行为在对象中用方法来表示。

    三、创建对象

      1、对象字面量创建 (构造函数的简写)

        定义格式:

    var 对象名 = {
       属性1:value1,
       属性2:value2,
       方法1:function(){
         // 方法体    
       },
       方法2:function(){
          // 方法体
       }        
    }

        Demo:

     1 // 定义一个英雄对象
     2 var hero = {
     3    name:'后羿',
     4    age:23,
     5    weapon:'逐日之弓',
     6    equipment: ['头盔', '靴子', '盔甲'],
     7    attack : function () {
     8        console.log(this.name + ':射箭');        
     9   }    
    10 }

      2、使用 new Object() 创建对象

      •    Object 是一个构造函数,new 的方式来调用构造函数;
      •    JavaScript 可以动态添加属性(动态特性);
      •    构造函数会在内存中创建一个对象,并用引用变量指向该对象;

       定义格式:

    var 对象名 = new Object();
    对象名.属性1 = value1;
    对象名.属性2 = value2;
    对象名.方法1 = function () {};
    对象名.方法2 = function () {};

        Demo:

    1 var person = new Object();
    2   person.name = 'Tom';
    3   person.age = 25;
    4   person.job = 'actor';
    5   person.sayHi = function(){
    6       console.log('Hello,World!');
    7   }

      3、工厂函数创建对象

        定义格式:

    function 函数名 (参数1,参数2,参数3){           // 定义一个创建对象的函数
         var 对象名 = new Object();
         对象名.属性1 = 参数1;
         对象名.属性2 = 参数2;
         对象名.属性3 = 参数3;
         对象名.方法 = function () {
            // 方法体
        }  
        return 对象名;    
    }
    
    var 对象名 = 函数名(参数1,参数2,参数3);         // 调用创建对象函数,并传入参数,返回一个对象
    

        Demo:

     1 function createPerson(name, age, job) {
     2   var person = new Object();
     3   person.name = name;
     4   person.age = age;
     5   person.job = job;
     6   person.sayHi = function(){
     7     console.log('Hello,World!');
     8   }
     9   return person;
    10 }
    11 var p1 = createPerson('Tom', 25, 'actor');

      4、自定义构造函数(帕斯卡命名:第一个单词的第一个字母大写(大驼峰命名))

        定义格式:

    function 构造函数名(参数1,参数2,参数3) {
       this.属性1 = 参数1;
       this.属性2 = 参数2;
       this.属性3 = 参数3;
       this.方法 = function() {
        // 方法体
      }    
    }
    
    var 对象名 = new 构造函数(参数1,参数2,参数3);
    

        Demo:

    1 function Person(name,age,job){             // 定义构造函数
    2   this.name = name;
    3   this.age = age;
    4   this.job = job;
    5   this.sayHi = function(){
    6       console.log('Hello,World!');
    7   }
    8 }
    9 var p1 = new Person('Tom', 25, 'actor');   // 调用构造函数

    四、对象的属性和方法

      1、如果一个变量属于一个对象所有,那么该变量就可以称之为该对象的一个属性,属性一般是名词,用来描述事物的特征。

      2、如果一个函数属于一个对象所有,那么该函数就可以称之为该对象的一个方法,方法一般是动词,用来描述事物的行为和功能。

      扩展1:函数与对象的区别:

        函数:用来封装一段可以重复利用的代码

        对象:封装一组属性和方法

      扩展2:函数与方法的区别:

        函数:可以独立存在的函数

        方法:属于对象的函数

    五、new 关键字

       构造函数:是一种特殊的函数。主要用来在创建对象时初始化对象,即为对象成员变量赋初始值,总与 new 运算符一起使用在创建对象的语句中。

         1、构造函数用于创建一类对象,首字母要大写。

         2、构造函数要和 new 一起使用才有意义。

       new 在执行时会做四件事情:

      •  new 会在内存中创建一个新的空对象
      •     new 会让 this 指向这个新的对象
      •    执行构造函数  目的:给这个新对象加属性和方法
      •    new 会返回这个新对象 return this

    六、this 详解

       this 关键字的特点:

        1、函数在定义的时候 this 是不确定的,只有在调用的时候才可以确定;

             2、this 出现在函数中 —— this 指向  window

        3、this 出现在方法中 —— this 指向的是这个方法所属的对象

        4、this 出现在构造函数中 —— this 就是构造函数创建的对象

    七、对象的使用

      1、访问属性和方法

        格式:

    // 访问属性 
    对象名.属性名;
    对象名['属性名'];
    
    // 访问方法
    对象名.方法名

      2、遍历对象的属性

        通过 for..in 语法可以遍历一个对象

       Demo:

    1 var obj = {};                          // 定义一个空对象
    2 for (var i = 0; i < 10; i++) {
    3   obj[i] = i * 2;                      // 给对象的每一项进行赋值
    4 }
    5 for(var key in obj) {
    6   console.log(key + "==" + obj[key]);  // 根据每一项的 key 输出对象的 value
    7 }

      3、删除对象的属性

        通过 delete 关键字可以删除对象的属性。

       Demo:

    1 function Fun() {              // 定义一个构造函数
    2   this.name = 'mm';
    3 }
    4 var obj = new Fun();          // 创建一个对象
    5 console.log(obj.name);        // mm 
    6 delete obj.name;              // 删除该对象的属性
    7 console.log(obj.name);        // undefined
  • 相关阅读:
    扩展当easyui datagrid无数据时,显示特定值。如:没有数据
    draggable datagrid columns
    easyui combobox 带 checkbox
    LightOJ1003---Drunk(拓扑排序判环)
    算法分析---回文数推断
    Android集成百度地图SDK
    BS一机双屏的解决方式
    myeclipse中更改web项目在tomcat中部署的路径
    Linux内核调试技术——jprobe使用与实现
    【Servlet】把文件写到Respond输出流里面供用户下载
  • 原文地址:https://www.cnblogs.com/niujifei/p/11361686.html
Copyright © 2020-2023  润新知