javaScript对象

目录

对象概述

创建对象的三种方式

对象字面量创建对象

对象的调用

变量、属性、函数、方法总结

利用new Object创建对象

构造函数方式创建对象

new关键字

遍历对象属性

小结

---

对象概述

什么是对象？

现实生活中：万物皆对象，对象是一个具体的事物，看得见，摸得着的实物。例如：一本书、一辆汽车、一个人。一本书可以是“对象”，一个数据库、一张网页也可以是“对象”。

在javaScript中，对象是一组无序的相关属性和方法的集合。

对象是由属性和方法组成的。

属性：事物的特征，在对象中用属性来表示（常用名词）

方法：事物的行为，在对象中用方法来表示（常用动词）

为什么需要对象？

保存一个值，可以用变量。保存多个值，可以用数组。如果要保存一个人的完整信息呢？

例如，将“张三”的个人信息保存在数组中的方式为：

var arr = ['张三',18,151,100];

数组的定义不够清晰，不够具体。

使用对象方式如下：

var obj = {
    name:'张三',
    sex:18,
    age:100,
    height:150
}

可以发现，使用对象方式结构更清晰

创建对象的三种方式

现阶段采用三种方式创建对象：

1、利用字面量创建对象

2、利用new Object创建对象

3、利用构造函数创建对象

对象字面量创建对象

就是花括号{ }里面包含了表达式具体事物（对象）的属性和方法。

{ } 里面采取键值对的形式表式

键：相当于属性名

值：相当于属性值，可以使任何类型的值（数字、字符串、布尔值、函数类型等）

// 字面量形式创建对象
var star = {
    name:'张三',
    age:20,
    sex:'男',
    sayHi:function(){
        alert('大家好');
    }
}

对象的调用

对象里面的属性调用：对象.属性名。

对象里面属性的另外一种调用形式：对象[ '属性名' ]，注意方括号里面必须加引号

对象里面的方法（对象里面的函数称为方法）调用：对象.方法名( )，注意方法名后面一定要加括号。

console.log(star.name); //  调用名字属性
console.log(star['name']); // 调用名字属性 
star.sayHi(); // 调用star对象里面的方法 

变量、属性、函数、方法总结

变量：单独生命赋值，单独存在

属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征

函数：单独存在的，通过“函数名（）”的方式就可以调用

方法：对象里面的函数称为方法，方法不需要声明，使用“对象.方法名（）”的方式就可以调用，方法用来描述该对象的行为和对象

利用new Object创建对象

跟前面学的new Arrry原理一样

// new Object方式创建对象
var star = new Object();
star.name = '张三';
star.age = 18;
star.sayHi = function (){
    alert('大家好');
}

注意：

Object（）：第一个字母大写

new Object（）：需要new关键字

使用的格式：对象属性 = 值

构造函数方式创建对象

构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与new运算符一起使用。可以把公共的属性和方法抽取出来，然后封装到这个函数里面。

应用场景：当需要创建大量对象，并且对象里面的属性大致相同。使用构造函数的好处就是，不用一个一个去创建有着相同属性的对象。

使用构造函数中注意以下两点：
1、构造函数用来创建某一类对象，其首字母要大写。

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

   function Star(name, age, sex) {
      this.name = name;
      this.age = age;
      this.sex = sex;
      this.sayHi = function () {
        alert('我的名字叫:' + this.name);
      }
    }

    var star1 = new Star('张三', 18, '男');
    var star2 = new Star('李四', 17, '女');
    console.log(star1); // 打印对象1
    console.log(star2); // 打印对象2
    star1.sayHi(); // 调用对象方法
    star2.sayHi(); // 调用对象方法

注意：

1、构造函数命名首字母大写 

2、函数内的属性和方法前面需要添加this，表示当前对象的属性和方法

3、构造函数中不需要return返回结果

4、当我们创建对象的时候，必须用new来调用构造函数

new关键字

new关键字的执行过程：

1、在内存中创建一个新的空对象。

2、让this指向这个新对象。

3、执行构造函数里面的代码，给这个对象添加属性和方法。

4、返回这个对象（所以构造函数不需要return）

遍历对象属性

for...in...用于对数组或对象进行循环操作：

语法结构：

for (变量名 in 对象名){
   // 在此执行代码
}

变量名通常为k或key

for (var key in obj){
    console.log(key); // key是属性名
    console.log(obj[key]); // obj[key]是属性值
}

小结

1. 对象可以让代码结构更清晰

2. 对象复杂数据类型object。

3. 本质：对象就是一组无序的相关属性和方法的集合。

4. 构造函数泛指某一大类，比如苹果，不管是红色苹果还是绿色苹果，都统称为苹果。

5. 对象实例特指一个事物，比如这个苹果等。

6. for...in 语句用于对对象的属性进行循环操作。

作业：

创建一个电脑对象，该对象要有颜色、重量、品牌、型号，可以看电影、听音乐、打游戏和敲代码。

    function Computer(color, weight, brand, model) {
      this.color = color;
      this.weight = weight;
      this.brand = brand;
      this.model = model;
      this.watchMovie = function () {
        alert('看电影');
      }
      this.music = function () {
        alert('听音乐');
      }
      this.playGames = function () {
        alert('打游戏');
      }
      this.demo = function () {
        alert('敲代码');
      }
    }

    var d = new Computer('黑色', 900, '联想', '拯救者Y7000')
    console.log(d);
    d.demo();

创建一个按钮对象，该对象中需要包含宽，高，背景颜色和点击行为。

    function Btn(width, height, bgc, click) {
      this.width = width;
      this.height = height;
      this.bgc = bgc;
      this.click = function () {
        alert('点击了');
      }
    }
    var btn = new Btn('200', '100', 'red');
    console.log(btn);
    btn.click();

创建一个鸣人对象。   具体信息如下：   姓名：鸣人   性别：男 年龄：19岁   技能（skill）：影分身术

 var Naruto = new Object();
    Naruto.name = '鸣人';
    Naruto.sex = '男';
    Naruto.age = 25;
    Naruto.skill = fuNarutonction (){
      alert('影分身');
    }