js对象

js对象

1.对象

1.1什么是对象？

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

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

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

• 属性：事物的特征，在对象中用属性来表示（常用名词）
• 方法：事物的行为，在对象中用方法来表示（常用动词）

1.2为什么需要对象

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

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

 

var arr['张三疯‘,’男‘,128,154];

 

JS中的对象表达结构更清晰，更强大，张三疯的个人信息在对象中的表达结构如下：

 

张三疯.姓名 = '张三疯';
张三疯.性别 = '男';
张三疯.年龄 = 128;
张三疯.身高 = 154;

 

person.name = '张三疯';
person.sex = '男';
person.age = 128;
person.height = 154;

 

2.创建对象的三种方式

在JavaScript中，现阶段我们可以采用三种方式创建对象（object）：

• 利用字面量创建对象
• 利用new Object创建对象
• 利用构造函数创建对象

2.1利用字面量创建对象

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

对象的调用

• 对象里面的属性调用：对象.属性名，这个小点.就理解为“的”
• 对象里面属性的另一种调用方式：对象['属性名']，注意方括号里面的属性必须加引号，
• 对象里面的方法调用：对象.方法名()，注意这个方法名后面一定加括号

 

console.log(star.name);      //调用名字属性
console.log(star['name']);   //调用名字属性
star.sayHi();                //调用sayHi方法，一定不要忘记带后面的括号 

 

// 1.利用对象字面量创建对象{}
        // var obj = {}; //创建了一个空的对象
        var obj = {
                uname: '张三疯',
                age: 18,
                sex: '男',
                sayHi: function() {
                    console.log('hi~');
                }

            }
            // (1)里面的属性或者方法我们采取键值对的形式  键 属性名：值 属性值
            // (2)多个属性或者方法中间用逗号隔开
            // (3)方法冒号后面跟的是一个匿名函数
//2.使用对象
            // (1)调用对象的属性 我们采取  对象名.属性名  .我们理解为 的
        console.log(obj.uname);
            // (2)调用属性还有一种方法 对象名['属性名']
        console.log(obj['age']);
            //(3)调用对象的方法  sayHi  对象名.方法名()  千万别忘记添加小括号
        obj.sayHi();

2.2利用new Object创建对象

 

// 利用 new Object 创建对象
        var obj = new Object(); //创建了一个空的对象
        obj.uname = '张三疯';
        obj.age = 18;
        obj.sex = '男';
        obj.sayHi = function() {
                console.log('hi~');

            }
            // (1)我们利用 等号=赋值的方法 添加对象的属性和方法
            // (2)每个属性和方法之间用 分号;结束
        console.log(obj.uname);
        console.log(obj['sex']);
        obj.sayHi();

 

2.3利用构造函数创建对象

// 我们为什么需要使用构造函数
// 就是因为我们前面两种创建对象的方式一次只能创建一个对象
// 因为我们一次创建一个对象，里面很多的属性和方法是大量相同的 我们只能复制
// 因此我们可以利用函数的方法 重复这些相同的代码 我们就把这个函数称为 构造函数
// 又因为这个函数不一样，里面封装的不是普通代码，而是 对象
// 构造函数 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面

 

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

// 利用构造函数创建对象
// 我们需要创建四大天王的对象  相同的属性：名字 年龄 性别  相同的方法：唱歌
// 构造函数的语法格式
        function 构造函数名() {
            this.属性 = 值;
            this.方法 = function() {}
        }
        new 构造函数名();


        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing=function(sang){
                console.log(sang);
            }
        }
        var ldh = new Star('刘德华', 18, '男'); //调用函数返回的是一个对象
        // console.log(typeof ldh); //object
        console.log(ldh.name);
        ldh.sing('冰雨');



        // 1.构造函数名字首字母要大写
        // 2.我们构造函数不需要return 就可以返回结果
        // 3.我们调用构造函数 必须使用  new
        // 4.我们只要new Star() 调用函数就创建一个对象ldh
        // 5.我们的属性和方法前面必须添加 this

 2.4构造函数和对象

• 构造函数：如Stars()，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类(class)
• 构造对象：如new Stars()，特指某一个，通过new关键字创建对象的过程我们也称为对象实例化

// 构造函数和对象
// 1.构造函数  明星 泛指的某一大类 它类似于 Java 语言里面的 类（class）
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang) {
                console.log(sang);
            }
        }
// 2.对象 特指 是一个具体的事物  刘德华=={name: "刘德华", age: 18, sex: "男", sing: ƒ}
        var ldh = new Star('刘德华', 18, '男'); //调用函数返回的是一个对象
        console.log(ldh);
// 3.我们利用构造函数创建对象的过程我们也称为对象的实例化

3.new关键字

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

1. 在内存中创建一个新的空对象
2. 让this指向这个新的对象
3. 执行构造函数里面的代码，给这个新对象添加属性和方法
4. 返回这个新对象（所以构造函数里面不需要return）

//  new关键字执行过程
 // 1.new 构造函数可以在内存中创建了一个空的对象
 // 2.this就会指向刚才创建的空对象
 // 3.执行构造函数里面的代码 给这个空对象添加属性和方法
 // 4.返回这个对象
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang) {
                console.log(sang);
            }
        }
        var ldh = new Star('刘德华', 18, '男');

 4.遍历对象属性

for...in语句用于对数组或者对象的属性进行循环操作。

// 遍历对象
        var obj = {
            name: '易烊千玺',
            age: 18,
            sex: '男',
            fn:function(){}
        }
        console.log(obj.name);
        console.log(obj.age);
        console.log(obj.sex);
// for...in遍历我们的对象
        // for(变量 in 对象){

        // }
        for (var k in obj) {
            console.log(k);       //k 变量 输出  得到的是 属性名
            console.log(obj[k]);  //obj[k]  得到的是 属性值
        }
// 我们使用 for in 里面的变量 我们喜欢写 K 或者 key

小结

1. 对象可以让代码结构更清晰
2. 对象复杂数据类型object
3. 本质：对象就是一组无序的相关属性和方法的集合
4. 构造函数泛指某一大类，比如苹果，不管是红苹果还是绿苹果，都统称为苹果
5. 对象实例特指一个事物，比如这个苹果、这个人等。
6. for...in语句用于对对象的属性进行循环操作