JS实例、静态的属性和方法

本文深入探讨了React类组件中实例属性和方法与静态属性和方法的区别。实例属性和方法只能通过创建的实例访问,而静态属性和方法则直接通过类本身调用。了解这些差异对于优化React应用的代码组织和性能至关重要。

在react类的props校验中,需要用到静态属性进行校验,这里总结了实例和静态属性及方法的不同

class List {
    name = '实例属性'
    look = () => {
        console.log('实例方法');
    }
    static hh = 'static属性'
    static see = () => {
        console.log('static方法');
    }
}

const lis = new List()
// 访问实例属性、调用实例方法
console.log(lis.name);
lis.look()
// 访问静态属性、调用静态方法
console.log(List.hh);
List.see()

总结:

实例属性和方法是在实例上进行访问和调用

静态属性的访问及静态方法的调用则需要在class类上进行

在 JavaScript 中,ES6 引入了 `class` 关键字,使得创建类定义类的方法更加直观简洁。类中包含实例方法静态方法,它们在使用作用上有所不同。 ### 实例方法 实例方法是定义在类的原型上的方法,需要通过类的实例来调用。每个实例都可以访问调用这些方法,并且可以操作实例属性。 以下是一个实例方法的示例: ```javascript class User { constructor(name) { this.name = name; } // 实例方法 greet() { console.log(`Hello, my name is ${this.name}`); } } const user = new User('John'); user.greet(); // 输出: Hello, my name is John ``` 在上述代码中,`greet` 是一个实例方法,它可以访问实例的 `name` 属性。通过创建 `User` 类的实例 `user`,可以调用 `greet` 方法。 ### 静态方法 静态方法是直接定义在类本身的方法,不需要通过类的实例来调用,而是直接通过类名来调用。静态方法通常用于与类相关的工具函数或不需要访问实例属性的操作。 以下是一个静态方法的示例: ```javascript class User { static createGuestUser() { return new User('Guest'); } constructor(name) { this.name = name; } greet() { console.log(`Hello, my name is ${this.name}`); } } const guest = User.createGuestUser(); guest.greet(); // 输出: Hello, my name is Guest ``` 在上述代码中,`createGuestUser` 是一个静态方法,它直接通过类名 `User` 调用,用于创建一个默认的 `Guest` 用户实例。 ### 区别总结 - 调用方式:实例方法需要通过类的实例来调用,而静态方法直接通过类名调用。 - 访问权限:实例方法可以访问操作实例属性,而静态方法不能直接访问实例属性,因为它不依赖于任何实例。 ### 示例对比 以下代码展示了实例方法静态方法的完整对比: ```javascript class MathUtils { // 实例方法 add(a, b) { return a + b; } // 静态方法 static multiply(a, b) { return a * b; } } const math = new MathUtils(); console.log(math.add(2, 3)); // 输出: 5 console.log(MathUtils.multiply(2, 3)); // 输出: 6 ``` 在这个示例中,`add` 是实例方法,需要通过 `MathUtils` 的实例 `math` 来调用;`multiply` 是静态方法,直接通过类名 `MathUtils` 调用。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值