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 ...
}
}

Static and Instance Methods in JavaScript的更多相关文章

  1. Mongoose 'static' methods vs. 'instance' methods

    statics are the methods defined on the Model. methods are defined on the document (instance). We may ...

  2. Java SE 8 docs——Static Methods、Instance Methods、Abstract Methods、Concrete Methods和field

    一.Static Methods.Instance Methods.Abstract Methods.Concrete Methods ——Static Methods:静态方法 ——Instance ...

  3. Core Java Volume I — 4.4. Static Fields and Methods

    4.4. Static Fields and MethodsIn all sample programs that you have seen, the main method is tagged w ...

  4. Swift编程语言学习12 ——实例方法(Instance Methods)和类型方法(Type Methods)

    方法是与某些特定类型相关联的函数.类.结构体.枚举都能够定义实例方法:实例方法为给定类型的实例封装了详细的任务与功能.类.结构体.枚举也能够定义类型方法:类型方法与类型本身相关联.类型方法与 Obje ...

  5. UIView 实例方法 Instance Methods(转)

    好了,我接着上篇,开始我们的对UIView 实例方法的探索 UIView 实例方法 Instance Methods 初始化一个视图 - (id)initWithFrame:(CGRect)aRect ...

  6. Instance Methods are Curried Functions in Swift

    An instance method in Swift is just a type method that takes the instance as an argument and returns ...

  7. A Simple Example About Privileged Methods in JavaScript

    Douglas Crockford classified the "class methods" in JavaScript into three types: private, ...

  8. Difference Between static and default methods in interface

    I was learning through interfaces when I noticed that you can now define static and default methods ...

  9. Static Fields and Methods

    If you define a field as static, then there is only one such field per class. In contrast, each obje ...

随机推荐

  1. 任意精度计算器 bc (arbitrary precision calculator)

    2019/06/18 bc 学习之 https://www.runoob.com/linux/linux-comm-bc.html

  2. Nginx基础知识介绍

    Nginx基础知识介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Nginx概述 Nginx是免费的.开源的.高性能的HTTP和正向/反向代理服务器.邮件代理服务器.以及T ...

  3. Go Programming Language

    [Go Programming Language] 1.go run %filename 可以直接编译并运行一个文件,期间不会产生临时文件.例如 main.go. go run main.go 2.P ...

  4. python相关资源

    http://blog.csdn.net/ken_wanglin/article/details/53095967 http://www.infoq.com/cn/articles/Python-wr ...

  5. wordpress如何添加自增变量(第一篇文章显示摘要后面的只显示标题)

    有时我们在调用文章列表的时候需要在前面添加序号看起来比较整齐,如何实现呢?要想精确的控制每篇文章,我们先在循环前定义一个变量 $ashu_i=1 来计数,变量名随便,然后每循环一次,$ashu_i加1 ...

  6. 01-linux-基本语法-sh文件

    在一些开源库中,往往有一个 xxx.sh 的安装文件.命令“./ xxx.sh” 就可运行之. 其实内部是一些 linux 的语句.整合起来,方便使用而已. 介绍一下常用的一些Linux语句 cd b ...

  7. ORA-00923: FROM keyword not found where expected

    网上搜索这类错误还是挺多的,只提供我遇到的一种情景. 本地数据库环境:Oracle10g 导入别人的项目后,有一段SQL查询总是报如下错误信息: Cause: java.sql.SQLExceptio ...

  8. Visual Studio调试XSLT

    Visual Studio是一个很大的工具.很容易遗漏一些有用的特性.希望XSLT调试器不会错过.在下面,您可以看到调试器正在运行,因为xslt转换正在应用于某些XML.(请原谅我在示例中使用的毫无意 ...

  9. 二分查找java实现

    二分查找也称折半查找(Binary Search),它是一种效率较高的查找方法.但是,折半查找要求线性表必须采用顺序存储结构,而且表中元素按关键字有序排列. 二分查找思路非常简单,由粗暴的遍历查找改为 ...

  10. npm install命令遇到relocation error: npm: symbol SSL_set_cert_cb的报错问题

    在安装elasticsearch-head的过程中npm install遇到如下报错 [root@localhost elasticsearch-head]# npm install npm: rel ...