JavaScript 对象｜青训营笔记这是我参与「第四届青训营」笔记创作活动的的第6天什么是对象（object）

这是我参与「第四届青训营」笔记创作活动的的第6天

什么是对象（object）

保存一个值时，可以用变量；保存多个值（一组值）时，可以用数组；保存多种数据类型的信息的时候，可以用对象

在JS中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

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

属性：事物的特征（名词）
方法：事物的行为（动词），可以做什么事

变量和属性相比较

	相同点	不同点
变量	都是用来存储数据的	单独var声明并赋值
属性		不需要var声明，使用的时候必须是对象.属性

函数和方法相比较

	相同点	不同点
函数	都是实现某种功能	单独声明并调用，调用时`函数名()`
方法		在对象里面，调用时`对象.方法()`

创建对象的四种方式

1.利用字面量{}创建对象

var 对象名 = {
    属性名:属性值,
    方法名:function () {},
};

{}里面的属性或者方法采取键值对的形式{键:值}（属性名:属性值）
多个属性或者方法，用逗号，隔开
创建方法的话，冒号后面跟的是一个匿名函数(其实属性也是匿名的，都不用var声明)

var obj = {						// 对象名叫obj
        uname: "小明",		  // 键值对形式   属性名:属性值
        age: 18,				// 逗号分隔
        sex: "男",
        sayHi: function () {	//创建方法的话，冒号后面跟的是匿名函数
          console.log("hi~");
        },
      };

2.利用new Object()创建对象

var 对象名 = new Object();
对象名.属性名 = xxx ；
对象名.方法名 = function () {};

利用 = 逐个对属性/方法赋值
每个属性/方法之间用分号;隔开

var obj = new Object();
      obj.uname = "小明";
      obj.age = 18;
      obj.sex = "男";
      obj.sayHi = function () {
        console.log("hi~");
      };

3.利用构造函数new 函数名()创建对象【类似new Object()】

3.1 为什么需要构造函数创建对象？

因为我们一次创建一批对象，里面很多属性和方法是大量相同的；

因此我们可以利用函数的方法，重复这些相同代码，我们就把这个函数称为构造函数。
构造函数，就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面
这个函数里面封装的不是普通代码，而是对象

3.2 构造函数和对象的区别？

构造函数：抽象出对象的公共部分封装到函数里，泛指某一大类（如明星）
对象：具体的，特指的实例（如刘德华）

3.3 ▲ 如何声明构造函数

构造函数名，首字母大写（语法规范）
构造函数不需要return，就可以返回结果

function 构造函数名(形参1){			// 方法的形参2不用写在()内
    this.属性名 = 形参1;
    
    this.方法名 = function(形参2){	  //形参2写在方法这里就够了，
        console.log(形参2);			//因为等外部需要调用的时候才会传进来
    };
}

//调用构造函数创建对象
var 对象名 = new 构造函数名(实参1);

示例：

function Star(uname) {
        this.uname = uname;
        this.sing = function (song) {
          console.log(song);
        };
      }

      var ldh = new Star('刘德华');
	  console.log(ldh.uname);
      ldh.sing('冰雨');

3.5 new关键字的执行过程

new在内存中创建一个空的对象
this就能够指向new创建的空对象
执行构造函数里面的代码，给这个空对象添加属性和方法
返回这个对象（new的执行过程包括了返回，所以构造函数不需要写return）

4. ▲ 通过class类 constructor 创建对象

在 ES6 中新增加了类的概念，可以使用 class 关键字声明一个类，之后以这个类来实例化对象。类抽象了对象的公共部分，它泛指某一大类（class）对象特指某一个，通过类实例化一个具体的对象

和构造函数相比，

声明属性时**多写了内部constructor(形参) **

声明方法时省去了 this. 和 function

 // 1. 创建类 class  创建一个类
class Star {
    // 类的共有属性放到 constructor 里面 constructor是 构造器或者构造函数
    constructor(uname, age) {
      this.uname = uname;
      this.age = age;
    }
    //-------------------------------->注意,方法与方法之间不需要添加逗号
    sing(song) {
      console.log(this.uname + '唱' + song);
    }
}

// 2. 利用类创建对象（new）
var ldh = new Star('刘德华', 18);
console.log(ldh); // Star {uname: "刘德华", age: 18}
ldh.sing('冰雨'); // 刘德华唱冰雨

以上代码运行结果:

注意:

通过class 关键字创建类, 类名我们还是习惯性定义首字母大写
类里面有个constructor 函数,可以接受传递过来的参数,同时返回实例对象
constructor 函数只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自动生成这个函数
多个函数方法之间不需要添加逗号分隔
生成实例 new 不能省略
声明class类时，后面不要加小括号
使用class类名创建对象时，后面加小括号

调用对象

调用对象的属性（取出回值）：

方法1：对象名.属性名

obj.uname

方法2：对象名['属性名']

obj[uname]

调用对象的方法（进入函数）：

对象名.方法名()

obj.sayHi(实参);

遍历对象for( key in 对象名){}

语法格式

for( key in 对象名){
    // 对该对象的操作
}

实例

var obj = new Object();
      obj.uname = "小明";
      obj.age = 18;
      obj.sex = "男";
      obj.sayHi = function () {
        console.log("hi~");
      };

for (var key in obj) {			// for in 里面的变量常用key或者k
        console.log(key);		// 输出属性名
        console.log(obj[key]);	// 输出属性值或者是方法
	  };

输出结果:

JavaScript 对象 ｜ 青训营笔记