【JavaScript】23_类与属性

简介: # 2、类使用Object创建对象的问题:1. 无法区分出不同类型的对象2. 不方便批量创建对象在JS中可以通过类(class)来解决这个问题:1. 类是对象模板,可以将对象中的属性和方法直接定义在类中 定义后,就可以直接通过类来创建对象2. 通过同一个类创建的对象,我们称为同类对象 可以使用instanceof来检查一个对象是否是由某个类创建 如果某个对象是由某个类所创建,则我们称该对象是这个类的实例语法:class 类名 {} // 类名要使用大驼峰命名const 类名 = class {} 通过类创建对象new 类()```htm

2、类

使用Object创建对象的问题:

  1. 无法区分出不同类型的对象
  2. 不方便批量创建对象

在JS中可以通过类(class)来解决这个问题:

  1. 类是对象模板,可以将对象中的属性和方法直接定义在类中
    定义后,就可以直接通过类来创建对象
  2. 通过同一个类创建的对象,我们称为同类对象
    可以使用instanceof来检查一个对象是否是由某个类创建
    如果某个对象是由某个类所创建,则我们称该对象是这个类的实例

语法:
class 类名 {} // 类名要使用大驼峰命名
const 类名 = class {}

通过类创建对象
new 类()

    <script>
        // const Person = class {}

        // Person类专门用来创建人的对象
        class Person {

        }
        // Dog类式专门用来创建狗的对象
        class Dog {

        }

        const p1 = new Person()
        const p2 = new Person()
       
        const d1 = new Dog()
        const d2 = new Dog()

        console.log(p1 instanceof Person)//调用构造函数创建对象
        console.log(d1 instanceof Dog)//true
        console.log(d1 instanceof Person)//false

        const five = {
                // 添加属性
                name: "王老五",
                age: 48,
                height: 180,
                weight: 100,

                // 添加方法
                sleep() {
                    console.log(this.name + "睡觉了~")
                },

                eat() {
                    console.log(this.name + "吃饭了~")
                },
            }

            const yellow = {
                name: "大黄",
                age: 3,
                sleep() {
                    console.log(this.name + "睡觉了~")
                },

                eat() {
                    console.log(this.name + "吃饭了~")
                },
            }
    </script>

3、属性

类是创建对象的模板,要创建第一件事就是定义类

类的代码块,默认就是严格模式,

类的代码块是用来设置对象的属性的,不是什么代码都能写

    <script>
        class Person {
            name = '孙悟空'
            age = 18

            static test = 'test静态属性'// 使用static声明的属性,是静态属性(类属性) Person.test
            static hh = '静态属性'// 静态属性只能通过类去访问 Person.hh
        }

        const p1 = new Person()
        const p2 = new Person()

        console.log(p1)
        console.log(p2)
    </script>
相关文章
|
6天前
|
监控 JavaScript 前端开发
确定使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript
【10月更文挑战第24天】选择使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript 是一个需要综合考虑多个因素的决策。需要根据脚本之间的依赖关系、页面加载性能要求、脚本的功能和重要性等因素来进行权衡。在实际应用中,需要通过测试和验证来确定最适合的加载方式,以提供更好的用户体验和页面性能。
|
6天前
|
监控 JavaScript 前端开发
使用 `defer` 属性异步加载 JavaScript
【10月更文挑战第24天】使用 `defer` 属性异步加载 JavaScript 是一种有效的提高页面性能和用户体验的方法。通过合理设置 `defer` 属性,可以在不影响页面渲染的情况下异步加载脚本,并确保脚本的执行顺序。在实际应用中,需要根据具体情况选择合适的加载方式,并注意处理可能出现的问题,以确保页面能够正常加载和执行。
|
23天前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
38 4
|
2月前
|
Web App开发 JavaScript 前端开发
JavaScript 类(class)
JavaScript 类(class)
21 2
JavaScript 类(class)
|
26天前
|
缓存 JavaScript 前端开发
探索Vue.js中的计算属性与侦听器
【10月更文挑战第5天】探索Vue.js中的计算属性与侦听器
18 1
|
2月前
|
JavaScript 前端开发 Java
JavaScript 类知识点概览
概览JavaScript中类的知识点,包括类的定义和实现、添加方法和get/set方法、类的继承和静态方法的使用。通过学生类和人员类的例子,演示了类的构造器、方法定义、继承关系和静态方法的调用。
JavaScript 类知识点概览
|
2月前
|
JavaScript 前端开发 开发者
JavaScript 类继承
JavaScript 类继承
18 1
|
23天前
|
存储 JavaScript 前端开发
js中map属性
js中map属性
17 0
|
2月前
|
JavaScript 安全
ES6中JS类实现的解读
ES6中JS类实现的解读
21 2
|
26天前
|
缓存 JavaScript 前端开发
深入理解Vue.js中的计算属性与侦听属性
【10月更文挑战第5天】深入理解Vue.js中的计算属性与侦听属性
17 0