文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JS中关于Class类的静态属性和静态方法

2022-11-13 18:20

关注

一、类的两个概念

1、类自身;

2、类的实例对象;

总的来说:静态的是指向类自身,而不是指向实例对象,主要是归属不同,这是静态属性,静态方法的核心。

二、对象的两个部分

1、属性 

分为:实例属性、静态属性(类属性)、只读属性

2、方法

分为:实例方法、静态方法(类方法)

class Person {
  //1、定义方法
  
  name= "tom";
  age = 10;
  
  static height = 180;
  
  readonly money= 1000;
 
  //2、定义方法
 
  say(){
      console.log('hello world');    
  }
  static work(){
      console.log('我能挣钱');    
  }
}
const per = new Person();
//per.money=2000  报错,不可修改
console.log(per, Person.height);
per.say()  //调用实例方法
Person.work() //调用类方法

三、静态方法使用:在方法前加上static关键字

1、为什么使用静态方法

阻止方法被实例继承,类的内部相当于实例的原型,所有在类中直接定义的方法相当于在原型上定义方法,都会被类的实例继承,但是使用static静态方法定义的不会被实例继承。

  class User{
            static call(){
               console.log('你好呀');
            }
        }
      User.call()//你好呀
 
      let ff = new User()
      ff.call()//报错,实例不能访问类的静态方法

这里类User可以直接使用call方法,但它的是实例ff却不可以!

但是我们可以通过继承的方式,让另一个类来继承User里面的方法

class User{
            static call(){
               console.log('你好呀');
            }
        }
  
  
     class foo extends User{}
     foo.call()//'你好呀'    

这里foo类通过继承User类,才可以使用User里面的静态方法。

我们知道class类这个概念是es6后出来的新特性,用以前的es5方法写就是:

 class User{
            static call(){
               console.log('静态方法的你好呀');
            }
            call(){
               console.log('构造函数方法的你好呀');
            }
        }
 
//等同于
function User(){}
     User.call=function(){
         console.log('静态方法的你好呀');
     }
   
    User.prototype.call=function(){
         console.log('构造函数方法的你好呀');
     }

但是User类里面的构造函数方法是可以被实例调用的,如图:

function User(){}
User.prototype.call=function(){
         console.log('你好呀');
     }
     let h1 =new User()
     h1.call()//你好呀

完整版如下

class User {
            call() {
                // 这里面的this指向构造函数的对象
                console.log(this === hh); // true
                console.log("构造函数方法的你好呀");
            }
            static call() {
                // 这里面的this指向类本身
                console.log(this === User); // true
                console.log("静态方法的你好呀");
            }
        }
        // 静态方法
        User.call(); //静态方法的你好呀
 
        // 构造函数方法
        let hh = new User();
        hh.call(); //构造函数方法的你好呀

三、总结

1、静态属性和非静态属性的区别

2.使用static的注意事项

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯