JavaScript高级中的 类 和 对象

本文详细介绍了JavaScript中对象的概念、创建方式(字面量、构造函数、类),以及ES6中类的使用,包括类的定义、实例化和原型方法。重点讲解了类的构造函数、属性与方法的添加,并通过实例展示了类的运用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、对象

万物皆对象

1.什么是对象

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

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

  • 属性:事物的特征,在对象中用属性来表示(常用名词)

  • 方法:事物的行为,在对象中用方法来表示(常用动词)

2.创建对象

        // 1. 利用 对象字面量创建对象(用的比较多)
        //字面量创建对象
        var ldh = {
            name: '刘德华',
            age: 18,
            height: function (height) {
                this.height = height
                console.log(height)
            }

        }

        console.log(ldh);

        // 2. 利用 new Object() 创建对象
        var obj2 = new Object();
        obj2.name = '刘德华';
        obj2.age = 18;
        obj2.height = function (height) {
            this.height = height
        }
        console.log(obj2)
        // 3. 利用构造函数创建对象(复习)
        // 构造函数:一个特殊的函数,用来初始化对象,为对象成员变量赋初始值,需要和new一起使用
        function Star(uname, age) {
            this.uname = uname;
            this.age = age;
            this.sing = function () {
                console.log('我会唱歌');
            }

        }
        var ldh = new Star('刘德华', 18);
        console.log(ldh);


        // new的执行过程 经典面试题
        // 1. 在内存中创建一个新的空对象
        // 2. 让 this 指向这个新的对象
        // 3. 执行构造函数里面的代码,给这个新对象添加属性和方法。
        // 4. 返回这个新对象(所以构造函数里面不需要 return )
        // 注意:
        // return {a:1} 复杂类型数据 返回什么得到什么
        // return 1 普通类型的数据  不起作用 和没有加return一个样

运行结果:

 二、类

在 ES6 中新增加了类的概念,可以使用 class 关键字声明一个类,之后以这个类来实例化对象。类抽象了对象的公共部分,在 ES6 中新增加了类的概念,可以使用 class 关键字声明一个类,之后以这个类来实例化对象。类抽象了对象的公共部分,

1.创建类

 (1) 通过class 关键字创建类, 类名我们还是习惯性定义首字母大写

 (2) 类里面有个constructor(构造) 函数,可以接受传递过来的参数,同时返回实例对象

(3) constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自动生成这个函数

(4) 生成实例 new 不能省略

(5) 最后注意语法规范, 创建类 类名后面不要加小括号,生成实例 类名后面加小括号, 构造函数不需要加function

        // ES6 之所以 引入 Class(类)这个概念,他的写法更加符合面向对象的编程思维。
        // 1. 创建类 class  语法: class 类名 {}
        // 创建一个 明星类
        class Star {
            constructor (uname, age) {
                this.uname = uname;
                this.age = age;
            }
        }
        var ldh = new Star('刘德华', 18)
        console.log(ldh);
        var zxy = new Star('张学友', 18)
        console.log(zxy);

结果:

2、在类中添加属性和方法 

注意了 兄弟们:

  1. 通过class 关键字创建类, 类名我们还是习惯性定义首字母大写

  2. 类里面有个constructor 函数,可以接受传递过来的参数,同时返回实例对象

  3. constructor 函数 只要 new 生成实例时,就会自动调用这个函数, 如果我们不写这个函数,类也会自动生成这个函数

  4. 多个函数方法之间不需要添加逗号分隔

  5. 生成实例 new 不能省略

  6. 语法规范, 创建类 类名后面不要加小括号,生成实例 类名后面加小括号, 构造函数不需要加function

        // 1. 创建类 class  创建一个 明星类
        // 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);
        ldh.sing('笨小孩');

结果:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值