木灵鱼儿

木灵鱼儿

阅读：2297

最后更新：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
木灵鱼儿

木灵鱼儿

发布了 678 篇文章获得点赞 0获得阅读 2297

版权申明

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

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

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

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

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

      回复

关于作者

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

相关文章

使用howler.js封装一个网页游戏音乐管理器使用howler.js封装一个网页游戏音乐管理器
实现一个点击空白区域关闭显示的自定义指令实现一个点击空白区域关闭显示的自定义指令
使用vue2.7的一些踩坑事项使用vue2.7的一些踩坑事项
实现一个自动高度的输入框实现一个自动高度的输入框
解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译

目录树