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

 更新时间:2022年10月13日 12:19:02   作者:燕穗子博客  
这篇文章主要介绍了JS中关于Class类的静态属性和静态方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

一、类的两个概念

1、类自身;

2、类的实例对象;

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

二、对象的两个部分

1、属性 

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

2、方法

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

class Person {
  //1、定义方法
  /* 1.1、实例属性,直接定义的属性,要new实例后,实例去访问的*/
  name= "tom";
  age = 10;
  /* 1.2、静态属性(类属性),通过static开头的属性,Person类可以访问,
    不需要创建实例,实例访问不到 */
  static height = 180;
  /* 1.3、只读属性,readonly开头的属性,只可读,不可改*/
  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、静态属性和非静态属性的区别

  • 在内存中存放的位置不同:所有static修饰的属性和方法都存放在内存的方法区里,而非静态的都存在堆内存中
  • 出现的时机不同:静态属性和方法在没创建对象之前就存在,而非静态的需要在创建对象才存在
  • 静态属性是整个类都公用的
  • 生命周期不一样,静态在类消失后被销毁,非静态在对象销毁后销毁
  • 用法:静态的可以直接通过类名访问,非静态只能通过对象进行访问

2.使用static的注意事项

  • 带静态修饰符的方法只能访问静态属性
  • 非静态方法既能访问静态属性也能访问非静态属性
  • 非静态方法不能定义静态变量
  • 静态方法不能使用this关键字
  • 静态方法不能调用非静态方法,反之可以

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • javascript 的变量、作用域和内存问题

    javascript 的变量、作用域和内存问题

    这篇文章主要介绍了javascript 的变量、作用域和内存问题的相关资料,需要的朋友可以参考下
    2017-04-04
  • javascript实现网站加入收藏功能

    javascript实现网站加入收藏功能

    这篇文章主要介绍了javascript实现网站加入收藏功能的相关资料,需要的朋友可以参考下
    2015-12-12
  • input 宽度自适应

    input 宽度自适应

    感谢网友“liufabin”提出的关于不支持FF的问题,第一个在FF下经过测试时支持的,第二个中的高度自适应不支持,我在网上找了一个JQUERY的插件
    2009-05-05
  • jquery实现右侧栏菜单选择操作

    jquery实现右侧栏菜单选择操作

    这篇文章主要为大家详细介绍了jquery实现右侧栏菜单选择操作,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • 前端本地文件获取excel表格内容并渲染在页面的方法

    前端本地文件获取excel表格内容并渲染在页面的方法

    这篇文章主要介绍了前端本地文件获取excel表格内容并渲染在页面的方法,主要利用SheetJS插件用于处理Excel文件,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-03-03
  • JavaScript实现筛选数组

    JavaScript实现筛选数组

    这篇文章主要为大家详细介绍了JavaScript实现筛选数组,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • JS动态改变浏览器标题的方法

    JS动态改变浏览器标题的方法

    这篇文章主要介绍了JS动态改变浏览器标题的方法,涉及JavaScript页面元素结合时间函数动态操作的相关技巧,需要的朋友可以参考下
    2016-04-04
  • js中利用cookie实现记住密码功能

    js中利用cookie实现记住密码功能

    这篇文章主要为大家详细介绍了js中利用cookie实现记住密码功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • JavaScript跨平台的开源框架NativeScript

    JavaScript跨平台的开源框架NativeScript

    本文给大家分享的是一款使用javascript来构建跨平台原生移动应用的开源框架--NativeScript,可以使用JavaScript开发跨平台、真正原生的iOS, Android 和 Windows 移动App。开发人员使用NativeScript提供的库来构建应用UI,其抽象了各种原生平台之间的不同。
    2015-03-03
  • HBuilderX开发一个简单的微信小程序的实现步骤

    HBuilderX开发一个简单的微信小程序的实现步骤

    本文主要介绍了HBuilderX开发一个简单的微信小程序的实现步骤,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02

最新评论