javascript中如何判断一个属性是实例对象属性,还是原型对象属性

javascript 同时被 2 个专栏收录
111 篇文章 0 订阅
38 篇文章 0 订阅

在写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就是实例对象属性!
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值