提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

JavaScript——对象

JavaScript对象
2023-06-13 09:14:04 时间

对象

在现实生活中，万物皆对象，对象是一个具体的事物，看得见摸得着的实物。

例如：一本书、一辆汽车、一个人都可以是“对象”，而一个数据库、一个网页、一个与远程服务器的连接也可以是“对象”。

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

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

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

为什么需要对象？

保存一个值时，可以使用变量，保存多个值（一个值）时，可以使用数组。

如果需要保存一个人的完整信息，例如将“岳泽以”的个人信息保存刀数组中的方式为：

var arr=['岳泽以','男',120,177];

JS中的对象表达结构更清晰，更强大。

    岳泽以.姓名 = '岳泽以';         person.name='岳泽以';
    岳泽以.性别 = '男';             person.sex='男';
    岳泽以.年龄 = 120;              person.age=128;
    岳泽以.身高 = 177;              person.height=177;

创建对象

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

利用字面量创建对象

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

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

  • 键：相当于属性名
  • 值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型、函数类型等）

var obj ={ };创建了一个空的对象。

    var obj = {
        uname: '岳泽以',
        age: 18,
        sex: '男',
        sayHi: function() {
            console.log('Hello!');
        }
    }
    console.log(obj.uname);
    console.log(obj['age']);
    obj.sayHi()
  • 里面的属性或者方法我们采取键值对的形式 键 属性名 : 值 属性值
  • 多个属性或者方法中间用逗号隔开
  • 方法冒号后面跟的是一个匿名函数

使用对象：

  1. 调用对象的属性，我们采取 对象名.属性名
  2. 调用属性另一种方法 对象名['属性名']
  3. 调用对象的方法 对象名.方法名

变量、属性、函数、方法的区别

  • 变量和属性都是用来存储数据的
  • 变量：单独声明并赋值，使用的时候直接写变量名，单独存在
  • 属性：在对象里面，不需要声明，使用的时候必须是对象.属性
  • 函数和方法的相同点都是实现某种功能，做某件事
  • 函数：单独声明并且调用的 函数名()单独存在的
  • 方法：在对象里面，调用的时候是 对象.方法

利用new Object创建对象

var obj=new Object(); 创建了一个空的对象

    var obj = new Object();
    obj.uname = '岳泽以';
    obj.age = 18;
    obj.sex = '男';
    obj.sayHi = function() {
        console.log('Hello!');
    }
    console.log(obj.uname);
    console.log(obj['sex']);
    obj.sayHi();
  • 我们是利用等号=赋值的方法，添加对象的属性和方法
  • 每个属性和方法之间用分号结束

利用构造函数创建对象

因为我们前面两种创建对象的方式一次只能创建一个对象，而创建多个对象时我们可以利用函数的方法，重复相同的代码，我们就把这个函数称为构造函数。

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

构造函数的语法格式：

    function 构造函数名() {
        this.属性 = 值;
        this.方法 = function() {}
    }
    new 构造函数名();

案例：创建四大天王的对象，相同的属性：名字、年龄、性别、相同的方法：唱歌

    function Star(uname, age, sex) {
        this.name = uname;
        this.age = age;
        this.sex = sex;
        this.sang = function(sname) {
            console.log(sname);
        }
    }
    var ldh = new Star('刘德华', 18, '男'); //调用函数返回的是一个对象
    // console.log(typeof ldh);
    console.log(ldh.name);
    console.log(ldh['sex']);
    ldh.sang('冰雨');
    var zxy = new Star('张学友', 19, '男');
    console.log(zxy.name);
    console.log(zxy['sex']);
    zxy.sang('李香兰');
  • 构造函数首字母需要大写
  • 构造函数不需要return就可以返回结果
  • 调用构造函数必须使用new
  • 只要new调用函数就创建了一个对象

构造函数和对象的联系：

  1. 构造函数抽象了对象的公共部分，封装到函数里面，泛指的某一大类，它类似于Java语言里面的类（class）
  2. 对象特指某一个，通过new关键字创建对象的过程我们也称为对象实例化

new关键字执行过程

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

遍历对象

语法格式：

for (var 变量 in 对象) {

    }
    var obj = {
            name: '岳泽以',
            age: 18,
            sex: '男'
        }
        // console.log(obj.name);
        // console.log(obj.age);
        // console.log(obj.sex);
    for (var key in obj) {
        console.log(key); //key 变量输出得到的是属性名
        console.log(obj[key]); //obj[key]得到的是属性值
    }

相关文章