js中的静态方法

js中的静态方法,第1张

在react 类组件的生命周期中,有一个静态方法 getDerivedStateFromProps ,曾经让我使用起来比较困惑。

先来看看官方是怎么解释这个方法的:

在一个class中定义的字段,我们称之为实例字段。实例字段的特点是,每个实例都有独立的字段,各个实例的同名字段互不影响。

还有一种字段,是用static修饰的字段,称为静态字段:static field。

实例字段在每个实例中都有自己的一个独立“空间”,但是静态字段只有一个共享“空间”,所有实例都会共享该字段。

简单的说,类就相当于实例的原型, 所有在类中定义的方法, 都会被实例继承。 如果在一个方法前, 加上static关键字, 就表示该方法不会被实例继承, 而是直接通过类来调用, 这就称为“ 静态方法”。

直接看下静态方法的demo:

这实际上跟直接将其作为属性赋值的作用相同:

在 User.staticMethod() 调用中的 this 的值是类构造器 User 自身(“点符号前面的对象”规则)。

通常,静态方法用于实现属于该类但不属于该类任何特定对象的函数。

现在有如下一个Person类:

类中定义了基本属性name 和age

```

  function Person( name, age){

        this.name = name||"lorentz"

        this.age  = age||27

    }

```

首先我们给它添加一个实例方法,即通过实例化该类,在类的实例上可以调用的方法

```

function Person( name, age){

        this.name = name||"lorentz"

        this.age  = age||27

    }

      //定义在原型上的方法 可以在实例上直接调用

    Person.prototype.sayAge = function(){

        console.log(`my age is ${this.age}`)

    }

    let p1 = new Person()

    p1.sayAge()  //my age is 27

```

通过构造函数的原型,定义了一个sayAg方法,所有的实例都可以通过原型链调用该方法。

静态方法即不需要实例化,可以直接利用构造函数调用的方法。在JS中,函数也是一个对象。将构造函数对象的某个属性设置为一个函数即为静态方法:

注意静态方法里this指向构造函数对象Person,而不是构造函数的实例

```

   function Person( name, age){

        this.name = name||"lorentz"

        this.age  = age||27

    }

      //定义在原型上的方法 可以在实例上直接调用

    Person.prototype.sayAge = function(){

        console.log(`my age is ${this.age}`)

    }

    Person.staticMethod = function(){

        console.log(`i am a static method `) //i am a static method 

        //静态方法中的this指向Person这个构造函数对象,在该对象里是没有age这个属性的

        console.log(`my age is ${this.age}`) // my age is undefined

        console.log(this)  //[Function: Person] { staticMethod: [Function (anonymous)] }

    }

    Person.staticMethod()   

```

在构造函数里定义私有方法,该方法无法在外部直接访问,通过闭包可以访问该方法

注意此时Person是一个普通函数,返回了一个对象,通过返回的对象可以访问他的私有方法

```

 function Person( name, age){

        this.name = name||"lorentz"

        this.age  = age||27

        let privateMethod = function(){

            console.log(`i am a priviate method`)

        }

        return {

            fn: privateMethod

        }

    }

    let p = Person()

    p.fn()  //i am a priviate method

```


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11717116.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存