返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript中isPrototypeOf、instanceof和hasOwnProperty函数的用法详解
  • 856
分享到

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

2024-04-02 19:04:59 856人浏览 八月长安
摘要

isPrototypeOf 作用:检测一个对象是否是另一个对象的原型。或者说一个对象是否被包含在另一个对象的原型链中 var p = {x:1};//定义一个原型对象 var o =

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
      }  
    }

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

--结束END--

本文标题: JavaScript中isPrototypeOf、instanceof和hasOwnProperty函数的用法详解

本文链接: https://lsjlt.com/news/152431.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript中isPrototypeOf、instanceof和hasOwnProperty函数的用法详解
    isPrototypeOf 作用:检测一个对象是否是另一个对象的原型。或者说一个对象是否被包含在另一个对象的原型链中 var p = {x:1};//定义一个原型对象 var o =...
    99+
    2024-04-02
  • JavaScript中isPrototypeOf、instanceof和hasOwnProperty函数怎么使用
    本篇内容主要讲解“JavaScript中isPrototypeOf、instanceof和hasOwnProperty函数怎么使用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScrip...
    99+
    2023-07-02
  • JavaScript中isPrototypeOf函数有什么作用
    本篇内容主要讲解“JavaScript中isPrototypeOf函数有什么作用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript中isPrototypeOf函数有什么作用”吧!...
    99+
    2023-06-25
  • javascript中instanceof运算符的用法详解
    概述 instanceof运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上 语法 obj instanceof Object;//t...
    99+
    2024-04-02
  • 详解javascript reduce函数的原理和用法
    reduce函数是Javascript中一个非常常用的函数,它可以大大简化我们对数组的操作。在这篇文章中,我们将详细讲解reduce函数的原理以及如何实现它。一、reduce函数的概念reduce函数是Javascript中一个非常重要的函...
    99+
    2023-05-14
  • js中hasOwnProperty的属性及实例用法详解
    1、js不会保护hasOwnProperty被非法占用,如果一个对象碰巧存在这个属性, 就需要使用外部的hasOwnProperty 函数来获取正确的结果。 2、当检查对象上某个属性...
    99+
    2024-04-02
  • 详解JS中的compose函数和pipe函数用法
    目录compose函数Array.prototype.reduceArray.prototype.reduceRightpipe函数compose函数 compose函数可以将需要嵌...
    99+
    2024-04-02
  • Oracle中的translate函数和replace函数的用法详解
    在Oracle中,`TRANSLATE`和`REPLACE`函数都是用于替换字符串的函数,但它们有一些不同之处。1. `TR...
    99+
    2023-08-16
    Oracle
  • JavaScript函数语法详解
    目录一、普通函数二、箭头函数三·、数据包 JSON四、对象Object五、Promise六、Async : Await七、包总结一、普通函数 js的函数创建比较特殊,有很多种方式,最...
    99+
    2024-04-02
  • Javascript中的async函数详解
    前言:async 是“异步”的简写,async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成,await 只能出现在...
    99+
    2024-04-02
  • 详解JavaScript中的replace()函数
    JavaScript中的replace()函数是用于替换字符串中的某个子串的方法。该方法接受两个参数:要替换的子串和替换后的字符串。...
    99+
    2023-09-09
    java
  • JavaScript 中的 parseInt() 函数详解
    目录参数描述总结parseInt() 函数可解析一个字符串,并返回一个整数。 parseInt 可以接受 2 个函数。 parseInt(string, radix)&nb...
    99+
    2023-05-19
    js parseInt() 函数 js parseInt()
  • 详解vue3中setUp和reactive函数的用法
    1 setUp的执行时机 我们都知道,现在vue3是可以正常去使用methods的。 但是我们却不可以在setUp中去调用methods中的方法。 为什么了??? 我们先了解一下下...
    99+
    2024-04-02
  • Java中instanceOf关键字的用法及特性详解
    目录一. instanceOf关键字1. 简介2. 语法3. 案例二. 结语一. instanceOf关键字 1. 简介 在上面学习类型转换时,跟大家讲过,在向下转型时,如果两个类型...
    99+
    2023-05-19
    Java关键字instanceof用法 Java关键字instanceof Java instanceof
  • JavaScript函数的使用详解
    目录1. 声明函数2. 调用函数3. 函数的参数4. 函数的返回值5. arguments的使用6. 函数可以调用另外一个函数7. 函数的两种声明方式总结1. 声明函数2. 调用函数...
    99+
    2024-04-02
  • JavaScript自定义函数用法详解
    JavaScript中的函数分为两种:系统函数和自定义函数,这里主要讲解自定义函数。 自定义函数 1、语法: 注意: 传入的参数是可选的。 例如: <!DOCTYPE htm...
    99+
    2024-04-02
  • JavaScript中Array的filter函数详解
    目录描述理解示例原生实现描述 filter为数组中的每个元素调用一次callback函数,并利用所有使得callback返回 true 或等价于 true 的值的元素创建一...
    99+
    2024-04-02
  • 前端中Typeof和Instanceof的原理和用法
    本篇内容主要讲解“前端中Typeof和Instanceof的原理和用法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“前端中Typeof和Instanceof的原...
    99+
    2024-04-02
  • 详解JavaScript中的箭头函数的使用
    目录前言箭头函数语法无圆括号语法隐式返回注意隐式返回错误无法命名箭头函数如何处理this关键字匿名箭头函数不正常工作的情况箭头函数作为对象方法箭头函数与第三方库箭头函数没有argum...
    99+
    2022-11-13
    JavaScript箭头函数使用 JavaScript 箭头函数 JS 箭头函数
  • C语言中回调函数和qsort函数的用法详解
    目录回调函数指向函数指针数组的指针qsort(qulick sort)-库函数回调函数 通过函数指针调用的函数,如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作