js中hasOwnProperty的属性及实例用法详解

1、js不会保护hasOwnProperty被非法占用，如果一个对象碰巧存在这个属性， 就需要使用外部的hasOwnProperty 函数来获取正确的结果。

2、当检查对象上某个属性是否存在时，hasOwnProperty 是唯一可用的方法。

实例

var foo = {
    hasOwnProperty: function() {
        return false;
    },
    bar: 'Here be dragons'
};
foo.hasOwnProperty('bar'); // 总是返回 false
// 使用其它对象的 hasOwnProperty，并将其上下文设置为foo
({}).hasOwnProperty.call(foo, 'bar'); // true

知识点扩展：

判断自身属性是否存在

var o = new Object();
o.prop = 'exists';

function changeO() {
 o.newprop = o.prop;
 delete o.prop;
}

o.hasOwnProperty('prop'); // true
changeO();
o.hasOwnProperty('prop'); // false

判断自身属性与继承属性

function foo() {
 this.name = 'foo'
 this.sayHi = function () {
  console.log('Say Hi')
 }
}

foo.prototype.sayGoodBy = function () {
 console.log('Say Good By')
}

let myPro = new foo()

console.log(myPro.name) // foo
console.log(myPro.hasOwnProperty('name')) // true
console.log(myPro.hasOwnProperty('toString')) // false
console.log(myPro.hasOwnProperty('hasOwnProperty')) // fasle
console.log(myPro.hasOwnProperty('sayHi')) // true
console.log(myPro.hasOwnProperty('sayGoodBy')) // false
console.log('sayGoodBy' in myPro) // true

遍历一个对象的所有自身属性

在看开源项目的过程中，经常会看到类似如下的源码。for...in循环对象的所有枚举属性，然后再使用hasOwnProperty()方法来忽略继承属性。

var buz = {
  fog: 'stack'
};

for (var name in buz) {
  if (buz.hasOwnProperty(name)) {
    alert("this is fog (" + name + ") for sure. Value: " + buz[name]);
  }
  else {
    alert(name); // toString or something else
  }
}

注意 hasOwnProperty 作为属性名

JavaScript 并没有保护 hasOwnProperty 属性名，因此，可能存在于一个包含此属性名的对象，有必要使用一个可扩展的hasOwnProperty方法来获取正确的结果：

var foo = {
  hasOwnProperty: function() {
    return false;
  },
  bar: 'Here be dragons'
};

foo.hasOwnProperty('bar'); // 始终返回 false

// 如果担心这种情况，可以直接使用原型链上真正的 hasOwnProperty 方法
// 使用另一个对象的`hasOwnProperty` 并且call
({}).hasOwnProperty.call(foo, 'bar'); // true

// 也可以使用 Object 原型上的 hasOwnProperty 属性
Object.prototype.hasOwnProperty.call(foo, 'bar'); // true

到此这篇关于js中hasOwnProperty的属性及实例用法详解的文章就介绍到这了,更多相关js中hasOwnProperty的属性用法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 浅谈js使用in和hasOwnProperty获取对象属性的区别

    in判断的是对象的所有属性,包括对象实例及其原型的属性: 而hasOwnProperty则是判断对象实例的是否具有某个属性. 示例代码: <script type="text/javascript"> function Person(){ } Person.prototype.name = "allen"; var person = new Person(); console.log(person.hasOwnProperty("name&qu

  • 详谈js使用in和hasOwnProperty获取对象属性的区别

    in判断的是对象的所有属性,包括对象实例及其原型的属性: 而hasOwnProperty则是判断对象实例的是否具有某个属性. 示例代码: <script type="text/javascript"> function Person(){ } Person.prototype.name = "allen"; var person = new Person(); console.log(person.hasOwnProperty("name&qu

  • JavaScript hasOwnProperty() 函数实例详解

    hasOwnProperty()函数用于指示一个对象自身(不包括原型链)是否具有指定名称的属性.如果有,返回true,否则返回false. 该方法属于Object对象,由于所有的对象都"继承"了Object的对象实例,因此几乎所有的实例对象都可以使用该方法. IE 5.5+.FireFox.Chrome.Safari.Opera等主流浏览器均支持该函数. 语法 object.hasOwnProperty( propertyName ) 参数 参数 描述 propertyName Str

  • JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法

    JavaScript hasOwnProperty() 方法是 Object 的原型方法(也称实例方法),它定义在 Object.prototype 对象之上,所有 Object 的实例对象都会继承 hasOwnProperty() 方法. hasOwnProperty() 方法用来检测一个属性是否是对象的自有属性,而不是从原型链继承的.如果该属性是自有属性,那么返回 true,否则返回 false.换句话说,hasOwnProperty() 方法不会检测对象的原型链,只会检测当前对象本身,只有

  • JavaScript中in和hasOwnProperty区别详解

    每当代码读取某个对象的某个属性时,都会执行一次搜索,目标是具有给定名字的属性.搜索首先从对象实例本身开始.如果在实例中找到了具有给定名字的属性,则返回该属性的值:如果没有找到,则继续搜索指针指向的原型对象,在原型对象中查找具有给定名字的属性.如果在原型对象中找到了这个属性,则返回该属性的值. 虽然可以通过对象实例访问保存在原型中的值,但却不能通过对象实例重写原型中的值.如果在实例中添加一个与原型中属性同名的属性,则该属性会屏蔽原型中的那个属性.添加的同名属性只会阻止我们访问原型中的那个属性,但不

  • JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()

    首先了解枚举属性 一般利用for~in遍历 var a = [1,2,3]; for(var i in a){ console.log(a[i]); } or var o = {p1:1,p2:2}; for(var i in o){ console.log(i+'='+o[i]); }//p1=1;p2=2; <1>并不是所有的属性都会在for~in遍历中显示.比如(数组的)length属性和constructor属性.那些已经被显示的属性被称为可枚举的,可以通过各个对象所提供的proper

  • js中hasOwnProperty的属性及实例用法详解

    1.js不会保护hasOwnProperty被非法占用,如果一个对象碰巧存在这个属性, 就需要使用外部的hasOwnProperty 函数来获取正确的结果. 2.当检查对象上某个属性是否存在时,hasOwnProperty 是唯一可用的方法. 实例 var foo = { hasOwnProperty: function() { return false; }, bar: 'Here be dragons' }; foo.hasOwnProperty('bar'); // 总是返回 false

  • JS中正则表达式全局匹配模式 /g用法详解

    本文章来详细介绍js中正则表达式的全局匹配模式 /g用法,代码如下: var str = "123#abc"; var re = /abc/ig; console.log(re.test(str)); //输出ture console.log(re.test(str)); //输出false console.log(re.test(str)); //输出ture console.log(re.test(str)); //输出false 在创建正则表达式对象时如果使用了"g&q

  • 基于vue.js中事件修饰符.self的用法(详解)

    .self可以理解为跳过冒泡事件和捕获事件,只有直接作用在该元素上的事件才可以执行. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>self</title> <script src="vue.js"></script> <!--'''''''

  • js中Object.create实例用法详解

    1.用Object.create()方法创建新对象,并使用现有对象提供新对象的proto. 2.提供两个参数,第一个是新创建的原型对象,第二个是为新创建的对象添加属性的对象. 实例 // father 对象 let father = { name: 'father', friend: ['abby', 'bob'] } // 生成新实例对象 child1 let child1 = Object.create(father) // 更改值类型属性 child1.name = '修改了name' c

  • js数组forEach实例用法详解

    1.forEach()类似于map(),它还将每个元素依次作用于传入函数,但不会返回新的数组. 2.forEach()常用于遍历数组,用于调用数组的每一个元素,并将其传递给回调函数.传输函数不需要返回值. 实例 var arr=[7,4,6,51,1]; try{arr.forEach((item,index)=>{ if (item<5) { throw new Error("myerr")//创建一个新的error message为myerr } console.log

  • java中throws实例用法详解

    在程序出现异常时,会有一个抛出异常的throw出现,这里我们要跟今天所讲的throws区分开.throws的作用是声明抛出,在名称上也跟throw有所不同.下面我们就throws对策概念.语法.实例带来讲解,帮助大家找到声明抛出异常的方法,具体方法如下. 1.概念 如果方法声明的是Exception类型的异常或者是Checked Exception异常,要求方法的调用处必须做处理. (1)继续使用throws向上(方法的调用处)声明 (2)使用try-catch-finally进行处理 2.语法

  • java中DelayQueue实例用法详解

    在阻塞队里中,除了对元素进行增加和删除外,我们可以把元素的删除做一个延迟的处理,即使用DelayQueue的方法.这里的删除需要一定的时间才能生效,有点类似于过期处理的理念.下面我们就DelayQueue的概念.特点进行讲解,然后在代码示例中体会DelayQueue的使用. 1.概念 是一个带有延迟时间的无界阻塞队列.队列中的元素,只有等延时时间到了,才能取出来.此队列一般用于过期数据的删除,或任务调度.以下,模拟一下定长时间的数据删除. 2.特点 (1)无边界设计 (2)添加(put)不阻塞,

  • python使用numpy中的size()函数实例用法详解

    在python中,提到如何计算多维数组和矩阵,那一定会想到numpy.numpy定义了矩阵和数组,为它们提供了相关的运算.size中文解释为大家.尺寸的意思,如果想要统计矩阵元素个数,使用size()函数就可以解决. 1.Numpy size()函数 主要是用来统计矩阵元素个数,或矩阵某一维上的元素个数的函数. 2.使用语法 numpy.size(a, axis=None) 3.使用参数 a:输入的矩阵 axis:int型的可选参数,指定返回哪一维的元素个数.当没有指定时,返回整个矩阵的元素个数

  • JS中实现浅拷贝和深拷贝的代码详解

    (一)JS中基本类型和引用类型 JavaScript的变量中包含两种类型的值:基本类型值 和 引用类型值,在内存中的表现形式在于:前者是存储在栈中的一些简单的数据段,后者则是保存在堆内存中的一个对象. 基本类型值 在JavaScript中基本数据类型有 String , Number , Undefined , Null , Boolean ,在ES6中,又定义了一种新的基本数据类型 Symbol ,所以一共有6种. 基本类型是按值访问的,从一个变量复制基本类型的值到另一个变量后,这两个变量的值

  • jQuery选择器之属性筛选选择器用法详解

    jQuery选择器之属性筛选选择器用法详解

    在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的 [attr="value"]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type="text"],input[type="checkbox"]等 [attr*="value"]能在网站中帮助我们匹配不同类型的文件 <!DOCTYPE html> <

随机推荐