Static and Instance Methods in JavaScript

https://abdulapopoola.com/2013/03/30/static-and-instance-methods-in-javascript/

In reading vue sample code, often we see Vue.xx function or $ vm.yy function is not clear what is the difference between the two.

google later discovered in fact there are essential differences of.

We know that inheritance model javascript and java, php and other programming object-oriented languages have a very big difference

js is typical of a weakly typed language, not a real class class class, class is in fact itself is the object construct functions. Let's create a new object by using the new constructor call, which actually simulates the sense OOP but remember: js inheritance model and traditional javas, php is different!

First, there is static property / instance property this probability. All object properties (this.xx) are the public, thisobj.xx can be accessed directly through. Of course, we can the constructor function (i.e. class definition class) is added so that the corresponding keyword var property into private, for this type of private property, we must be able to access by defining accessors and setters.

//Constructor
var Person = function (name, age){
    //private properties
    var priv = {};
    
    //Public properties
    this.name = name;
    this.age = age;
    
    //Public methods
    this.sayHi = function(){
        alert('hello');
    }
}

// A static method; this method only 
// exists on the class and doesn't exist 
// on child objects
Person.sayName = function() {
    alert("I am a Person object ;)");  
};

// An instance method; 
// All Person objects will have this method
Person.prototype.setName = function(nameIn) {
    this.name = nameIn;  
}

// Tests
var per = new Person('John Doe', 22);

//Shows alert
Person.sayName();

//TypeError: Object [object Object] has no method 'sayName'
per.sayName()

//Show alert
per.sayHi();

//John Doe
per.name;

//22
per.age;

per.setName('Jane Doe');

//Jane Doe
per.name;

Note that the definition of the static properties or methods in class (constructor) property is not accessible in the context of instance instance. But java language at this point is somewhat different, is accessible in the context instance in java static methods or property. It looks very strange, because the instance of the object and no objects that variable

Here I quote the instructions of java:

You can also access a static method object reference model, such as:

myBike.numberOfBicycles

Finally, we look Vuejs plugin in several uses, we can control the above so-called static and instance method of view:

MyPlugin.install = function (Vue, options) {
  // 1. add global method or property
  Vue.myGlobalMethod = function () {
    // some logic ...
  }

  // 2. add a global asset
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // some logic ...
    }
    ...
  })

  // 3. inject some component options
  Vue.mixin({
    created: function () {
      // some logic ...
    }
    ...
  })

  // 4. add an instance method
  Vue.prototype.$myMethod = function (methodOptions) {
    // some logic ...
  }
}

Static and Instance Methods in JavaScript

Guess you like