在写vue插件的时候,遇到一个问题:
一、 在main.js中定义
let obj = {
install: function (Vue, options) {
// 把方法定义在Vue原型对象上。
Vue.prototype.$myPlugin = {
save(){};
get(){};
// console.log(Vue);
// console.log(options);
}
}
// 使用插件
Vue.use(obj, {a: 1});
二、在组件中.vue使用插件
getUserData(){
//说明 this 指vue实例
let data = this.$myPlugin.get();
}
想起一个问题,调用别人写的插件的时候,怎么判断,
this.$myPlugin是Vue原型对象属性方法还是Vue实例属性方法呢?
可以用如下代码来确认:
!this.hasOwnProperty('$myPlugin') && ('$myPlugin' in this)
如果 this.hasOwnProperty('$myPlugin')===false 且 ('$myPlugin' in this) 那么认为 $myPlugin就是原型对象方法,而不是实例方法。
我们知道,
1. obj.hasOwnProperty(‘属性名’) 用于检查给定的属性是否存在于当前实例对象中,(而不是实例原型中)(解释来至:javascript高级程序设计第三版第三章Object)。如果是返回true,如果不是返回 false。
而
2. in 操作符用来判断某个属性属于某个对象,可以是对象的直接属性,也可以是通过prototype继承的属性。如:(属性名 in 对象) ,不管属性是原型的还是实例的,只要存在就会返回ture;否则返回false。
所以用两者结合,就可以判断某个属性是否是原型上的属性。
看栗子,瞬间明白:
class Point {
constructor() {
this.x = 'a';
this.y = 'b'
}
getId() {
return '1';
}
}
function isPrototypeAttr(obj,pro)
{
return !obj.hasOwnProperty(pro) && (pro in obj)
}
let p1 = new Point();
console.log(isPrototypeAttr(p1,'toString')); //true
console.log(isPrototypeAttr(p1,'getId')); //true
console.log(isPrototypeAttr(p1,'x')); //false
//所以toString,getId是原型对象属性。x就是实例对象属性!