木灵鱼儿

木灵鱼儿

阅读：1511

最后更新：2018/07/27/ 17:05:59

关于面向对象判断是否原型属性的疑问

首先我们需要创建一个构建函数，并为它添加一个实例属性（实例就是被运行的函数）。

function Box() {};
var box1 = new Box();
box1.name = 'mu';

每个函数都会有一个原型，原型里的数据是共享的，多个变量box1运行同一个函数Box(),这个Box()函数原型中的数据是共有的，并且引用地址相同。

加上就近原则，当实例属性中有对应的属性，会优先调用实例属性，如果没有，就会去原型中查找。

那么我们要去判断这个属性是实例中的属性还是原型中的属性，有两个判断语法：hasOwnProperty() / in

hasOwnProperty()是判断属性是否存在于实例中，是则返回turn，否则返回false。

in 是判断，属性是否存在于实例或者原型中，只要其中一处存在就会返回turn，否则返回false。

那么我们肯定是先判断实例中是否存在对应的属性，再根据有无进行in判断：

  1. 如果有，就不在进行下一个判断了。
  2. 如果没有，就用in判断是否存在，如果存在，肯定是在原型中。

于是我们这样写：

alert(!box1.hasOwnProperty('name') && ('name' in box1));

这样，就可以判断是不是原型属性了，但是有个弊端，就是如果原型和实例中都存在，那不是不知道了？

为了方便，我们写成函数，通过传参的方式进行判断：

function pan(user,cent) {
      return !user.hasOwnProperty(cent) && (cent in user);
};

alert(pan(box1,'name'));

这样写也可以判断，但是传参的时候，我们给name加了引号，这不是意思着这个是一个字符串吗，字符怎么会直接调用到实例属性name呢，在上一个代码中，name也是加了引号，但是他是直接在语法中的，可以理解为必须要有引号才能使用，但是函数中你传入的参数意思就变了呀，直接变成了字符串了，有点不是很明白。

而且我测试就算不加引号也是不影响的，不知道这个引号存在的意义！不知道有大佬能够解释一下吗？

关于实例和原型都有对应的属性，我特意改写了一下，稍微换了个思路，为什么一定要一句话就给结果呢？是吧，我们可以分别给啊！

于是乎：

function pan(user,cent) {
         var shi = user.hasOwnProperty(cent);
         delete user.cent;
         var yuan = cent in user;
         return '[实例中' + shi + ']' + '   ' + '[原型中' + yuan +']';
}；

alert(pan(box1,'name'));

原型和实例都给出结果，不是一下就知道吗？

文章分类 JavaScript
文章标签 代码地址alert实例属性函数原型box1
木灵鱼儿

木灵鱼儿

发布了 569 篇文章获得点赞 0获得阅读 1511

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three
  1. 二呆
    二呆
    QQ Browser Android

    发现一只js高手，懂高大上的面向对象，还深究原理，我都没见过这俩函数，只会复制粘贴，突然想插一句不专业的解释，套套近乎：
    box1是对象，对象确定了，那属性是不是字符串，可能在内置函数里已经做判断了吧-_-||现实中有没有这种面向对象的例子呢？感觉举出例子就好理解了，然而我也想不到，好吧，废话完毕~
    （咦，想到一个不知对不对，2个人办某个业务，工作人员让拿出证件，甲说：“我是代办的，身份证行吗？”“可以”然后甲让乙给身份证拍张照发过来。证件是对象，原件是属性，照片是加引号的属性，最后能不能办成，返回true还是false，得看工作人员了，哎呀妈呀，太牵强了~）

    回复
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @二呆

      我也是猜测，因为传入的参数是完整传入的（即便他是作为字符串），'name'，传入后整个判断的语句还是和上一句写的一样，这时name的引号就已经不是字符串的意思了。

      回复

关于作者

站点职位 博主
获得点赞 0
文章被阅读 1511

相关文章

vue router 一个重定向页面的思路vue router 一个重定向页面的思路
关于 vue cli 的Network unavailable的问题分析以及修复方式关于 vue cli 的Network unavailable的问题分析以及修复方式
搞明白防抖与节流搞明白防抖与节流
宝塔和Gitte码云自动化部署教程宝塔和Gitte码云自动化部署教程
关于UIKit的抽屉 uk-offcanvas 只有黑色样式的问题关于UIKit的抽屉 uk-offcanvas 只有黑色样式的问题

目录树