Static and Instance Methods in JavaScript

class.method/instance method

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

在阅读vue示例代码时,经常看到Vue.xx函数或者$vm.yy函数,不太清楚这两者之间有什么区别。

google以后发现实际上还是有本质的区别的。

我们知道javascript的继承模型和java,php等面向对象的编程语言有非常大的差别

js是一个弱典型的类型语言,class类并不是真正的class,实际上class就是本身也是object的construct functions.我们通过使用new constructor调用来创建新的对象,这实际上某种意义上模拟了OOP.但是请记住:js的继承模型和传统的javas, php是不同的!

首先有static property/instance property这个概率。所有对象属性(this.xx)都为public的,可以通过thisobj.xx直接访问。当然我们可以通过在constructor function(也就是class类定义)中增加var关键字使得相应属性变为private的,对于这种private类型的属性,我们必须通过定义accessors和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; //
per.age; per.setName('Jane Doe'); //Jane Doe
per.name;

需要注意的是定义在类(构造函数)的属性上的static属性或者方法是不能在instance实例的上下文中访问的。但是java语言在这一点上就有所不同,在java中静态方法或者属性是可以在实例的上下文环境中访问的。这看起来非常奇怪,因为实例objects对象中并没有那个变量

这里我引用一下java的相关说明:

"

你也可以通过对象引用的模式来访问静态方法,比如:

myBike.numberOfBicycles

"

ES6中class method和instance method的对比

// es6 javascript code
class Foo {
bar() {...} static baz() {...}
}
const f = new Foo()
f.bar()
Foo.baz
foo = {bar: 'baz'};
console.log(foo.bar); // logs "baz" // none-es6 javascript code
foo = {};
console.log(foo.bar); // logs undefined function Foo(){}
Foo.prototype = {bar: 'baz'};
f = new Foo();
console.log(f.bar);
// logs "baz" because the object f doesn't have an attribute "bar"
// so it checks the prototype
f.bar = 'buzz';
console.log( f.bar ); // logs "buzz" because f has an attribute "bar" se
Foo.talk = function () {
alert('hello world!');
};
Foo.talk()

以Vue为例再看Vue.method/vueComponent.method

最后,我们来看Vuejs plugin中的几种用法,大家可以对照上面的所谓static和instance method来看:

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 ...
}
}
上一篇:== Equals ReferenceEquals 比较


下一篇:0.0C语言重点问题回顾