我的编程空间,编程开发者的网络收藏夹
学习永远不晚

JavaScript中isPrototypeOf、instanceof和hasOwnProperty函数的用法详解

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

JavaScript中isPrototypeOf、instanceof和hasOwnProperty函数的用法详解

isPrototypeOf

作用:检测一个对象是否是另一个对象的原型。或者说一个对象是否被包含在另一个对象的原型链中

var p = {x:1};//定义一个原型对象
var o = Object.create(p);//使用这个原型创建一个对象
p.isPrototypeOf(o);//=>true:o继承p
Object.prototype.isPrototypeOf(p);//=> true p继承自Object.prototype

以上实例来自与《JavaScript权威指南》,简单解释一下就是每一个JavaScript对象都和原型关联,每一个对象都从原型继承属性。所有通过对象直接量创建的对象都使用Object.prototype作为他们的原型,因此p是继承自Object.prototype,因此在p的原型链中一定存在Object.prototype

上面还提到了Object.create();该方法创建一个新对象,第一个参数是这个对象的原型,所以上面创建的o对象它的原型就是p

function Animal(){
    this.species = "动物";
};
var eh = new Animal();
Animal.prototype.isPrototypeOf(eh)//=>true

以上实例是通过new创建了对象eh,使用构造函数Animalprototype作为它的原型。

综合上面的两个例子,我们发现在调用isPrototypeOf()的时候有三种方式

p.isPrototypeOf(o);//=>true
Object.prototype.isPrototypeOf(p);
Animal.prototype.isPrototypeOf(eh)//=>true

总结一下就是:
通过Object.create()创建的对象使用第一个参数作为原型
通过对象直接量的对象使用Object.prototype作为原型
通过new创建的对象使用构造函数的prototype属性作为原型

instanceof

instanceof运算符希望左操作数是一个对象,右操作数标识对象的类。如果左侧对象是右侧类的实例,则表达式返回为true,否则返回false。

var d = new Date();
d instanceof Date;//=>true  d是Date的实例
d instanceof Object;//=>true 所有对象都是Object的实例

当通过instanceof判断一个对象是否是一个类的实例的时候,这个判断也会包含对父类的检测。尽管instanceof的右操作数是构造函数,但计算过程实际是检测了对象的继承关系。

instanceOf与isPrototypeOf简单总结

var d = new Date();
Date.prototype.isPrototypeOf(d);//=>true
d instanceof Date;//=>true
  • 如果Date.prototype是d的原型,那么d一定是Date的实例。
  • 缺点为无法同对象来获得类型,只能检测对象是否属于类名
  • 在多窗口和多框架的子页面的web应用中兼容性不佳。其中一个典型代表就是instanceof操作符不能视为一个可靠的数组检测方法。

hasOwnProperty

检测集合成员的所属关系,判断某个属性是否存在于某个对象中。可以通过in运算符,hasOwnProperty()来完成。

in运算符左侧是属性名,右侧是字符串,如果对象的自由属性或者继承属性中包含这个属性则返回true
对象的hasOwnProperty()方法用来检测给定的名字是否是对象的自由属性,如果是继承属性则返回false。

function Animal(){}//定义Animal构造函数
  Animal.prototype = {//定义Animal原型
      species:"动物",
      say:function(){
          console.log('i can say word');
      }
  }
 
  function Cat(name,color){//定义构造函数Cat
  this.name = name;
  this.color = color;
}
    var F = function(){};
    F.prototype = Animal.prototype;
    Cat.prototype = new F();
    Cat.prototype.constructor = Cat;//Cat继承Animal 用F空对象作为媒介
 
    var eh = new Cat('lili','white');//实例化对象
 
    console.log('say' in eh)//=>true
    console.log('name' in eh)//=>true
    console.log('color' in eh)//=>true
    console.log('species' in eh)=>true
 
    console.log(eh.hasOwnProperty('say'))=>false  由于say为继承属性  非自有属性
    console.log(eh.hasOwnProperty('species'))=>false 由于species为继承属性  非自有属性
    console.log(eh.hasOwnProperty('name'))=>true
    console.log(eh.hasOwnProperty('color'))=>true
 
    for(var key in eh){
          console.log(key);
      if(eh.hasOwnProperty(key)){
      console.log(key)    //=>species  say name  color
      }  
    }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

JavaScript中isPrototypeOf、instanceof和hasOwnProperty函数的用法详解

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

JavaScript中isPrototypeOf、instanceof和hasOwnProperty函数怎么使用

本篇内容主要讲解“JavaScript中isPrototypeOf、instanceof和hasOwnProperty函数怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScrip
2023-07-02

详解javascript reduce函数的原理和用法

reduce函数是Javascript中一个非常常用的函数,它可以大大简化我们对数组的操作。在这篇文章中,我们将详细讲解reduce函数的原理以及如何实现它。一、reduce函数的概念reduce函数是Javascript中一个非常重要的函数,它经常被用来处理数组。它的作用是通过指定的函数将数组中的所有元素汇总为一个值。reduce函数的语法如下: array.reduc
2023-05-14

Oracle中的translate函数和replace函数的用法详解

在Oracle中,`TRANSLATE`和`REPLACE`函数都是用于替换字符串的函数,但它们有一些不同之处。1. `TRANSLATE`函数:`TRANSLATE`函数用于根据给定的字符映射替换字符串中的字符。它的语法如下:```sql
2023-08-16

详解JavaScript中的replace()函数

JavaScript中的replace()函数是用于替换字符串中的某个子串的方法。该方法接受两个参数:要替换的子串和替换后的字符串。语法:string.replace(searchValue, replaceValue)参数说明:- sea
2023-09-09

JavaScript 中的 parseInt() 函数详解

parseInt函数将其第一个参数转换为一个字符串,对该字符串进行解析,然后返回一个整数或 NaN,这篇文章主要介绍了JavaScript 的 parseInt() 函数,需要的朋友可以参考下
2023-05-19

Java中instanceOf关键字的用法及特性详解

当我们在进行向下转型时,如果两个对象之间没有直接或间接的继承关系,在转换时有可能会产生强制类型转换异常,我们可以使用java中自带的instanceOf关键字来解决这个问题,所以本篇文章,会带大家学习instanceOf的用法及特性,需要的朋友可以参考下
2023-05-19

详解JavaScript中的箭头函数的使用

这篇文章主要是带大家一起了解一下所有有关JavaScript箭头函数的信息。文中通过示例讲解了如何使用ES6的箭头语法,以及在代码中使用箭头函数时需要注意的一些常见错误,需要的可以参考一下
2022-11-13

编程热搜

目录