JavaScript中in和hasOwnProperty区别详解

　每当代码读取某个对象的某个属性时，都会执行一次搜索，目标是具有给定名字的属性。搜索首先从对象实例本身开始。如果在实例中找到了具有给定名字的属性，则返回该属性的值；如果没有找到，则继续搜索指针指向的原型对象，在原型对象中查找具有给定名字的属性。如果在原型对象中找到了这个属性，则返回该属性的值。

虽然可以通过对象实例访问保存在原型中的值，但却不能通过对象实例重写原型中的值。如果在实例中添加一个与原型中属性同名的属性，则该属性会屏蔽原型中的那个属性。添加的同名属性只会阻止我们访问原型中的那个属性，但不会修改那个属性。即使将这个属性设置为null，也只会在实例中设置这个属性，而不会恢复其指向原型的链接。

in操作符只要通过对象能访问到属性就返回true。hasOwnProperty()只在属性存在于实例中时才返回true。

使用delete操作符则可以完全删除实例属性，从而让我们能巩固重新访问原型中的属性。

function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
  alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
alert(person1.hasOwnProperty("name"));//false
alert("name" in person1);//true
person1.name = "Greg";
alert(person1.name);//"Greg"
alert(person1.hasOwnProperty("name"));//true
alert("name" in person1);//true
delete person1.name;
alert(person1.name);//"Nicholas"
alert(person1.hasOwnProperty("name"));//false
alert("name" in person1);//true

prototype

1.每个函数都有一个 prototype 的对象属性，对象内有一个 constructor 属性，默认指向函数本身

2.每个对象都有一个 __proto__ 的属性，属相指向其父类型的 prototype

构造函数和普通函数并没有区别，使用 new 关键字调用就是构造函数，使用构造函数可以 实例化 一个对象

函数的返回值有两种可能

1.显式调用 return 返回 return 后表达式的求值

2.没有调用 return 返回 undefined

function People(name, age) {
 this.name = name;
 this.age = age;
}
var people = new People('Byron', 26);

构造函数返回值

1.没有返回值
2.简单数据类型
3.对象类型

前两种情况构造函数返回构造对象的实例，实例化对象正是利用的这个特性

第三种构造函数和普通函数表现一致，返回 return 后表达式的结果

总结

以上所述是小编给大家介绍的JavaScript中in和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中的for in循环和hasOwnProperty结合使用

    与in操作符相比,for in 在循环对象的属性时也会遍历原型链,for in 不会读取不可枚举属性,如数组的length属性. 小结 当检测某个对象是否拥有某个属性时,hasOwnProperty 是唯一可以完成这一任务的方法,在 for in 循环时,建议增加 hasOwnProperty 进行判断,可以有效避免扩展本地原型而引起的错误. 与in操作符相比,for in 在循环对象的属性时也会遍历原型链,for in 不会读取不可枚举属性,如数组的length属性. 复制代码 代码如下: /

  • Javascript hasOwnProperty 方法 & in 关键字

    此方法无法检查该对象的原型链中是否具有该属性:该属性必须是对象本身的一个成员. in 操作检查对象中是否有名为 property 的属性.也可以检查对象的原型,判断该属性是否为原型链的一部分. 复制代码 代码如下: function Test(){ this. a= 'abc'; } Test.prototype.b='efg'; var test=new Test; alert(test.hasOwnProperty('a'));//输出 true alert(test.hasOwnPrope

  • JavaScript中in和hasOwnProperty区别详解

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

  • JavaScript中push(),join() 函数 实例详解

    定义和用法 push方法 可向数组的末尾添加一个或多个元素,并返回一个新的长度. join方法 用于把数组中所有元素添加到一个指定的字符串,元素是通过指定的分隔符进行分割的. 语法 arrayObject.push(newelement1,newelement2,....,newelementX) arrayObject.join(separator). 参数描述newelement1必需.要添加到数组的第一个元素.newelement2可选.要添加到数组的第二个元素.newelementX可选

  • JavaScript中浅讲ajax图文详解

    JavaScript中浅讲ajax图文详解

    1.ajax入门案例 1.1 搭建Web环境 ajax对于各位来说,应该都不陌生,正因为ajax的产生,导致前台页面和服务器之间的数据传输变得非常容易,同时还可以实现页面的局部刷新.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 对于JavaWeb项目而言,ajax主要用于浏览器和服务器之间数据的传输. 如果是单单地堆砌知识点,会显得比较无聊,那么根据惯例,我先不继续介绍ajax,而是来写一个案例吧. 打开

  • JavaScript 中调用 Kotlin 方法实例详解

    JavaScript 中调用 Kotlin 方法实例详解 Kotlin 编译器生成正常的 JavaScript 类,可以在 JavaScript 代码中自由地使用的函数和属性 .不过,你应该记住一些微妙的事情. 用独立的 JavaScript 隔离声明 为了防止损坏全局对象,Kotlin 创建一个包含当前模块中所有 Kotlin 声明的对象 .所以如果你把模块命名为 myModule,那么所有的声明都可以通过 myModule 对象在 JavaScript 中可用.例如: fun foo() =

  • JavaScript中的splice方法用法详解

    JavaScript中的splice主要用来对js中的数组进行操作,包括删除,添加,替换等. 注意:这种方法会改变原始数组!. 1.删除-用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数) 2.插入-向数组指定位置插入任意项元素.三个参数,第一个参数(插入位置),第二个参数(0),第三个参数(插入的项) 3.替换-向数组指定位置插入任意项元素,同时删除任意数量的项,三个参数.第一个参数(起始位置),第二个参数(删除的项数),第三个参数(插入任意数量的项) 示例:

  • linux shell中“.” 和 “./”执行的区别详解

    目前注意到的区别主要在于环境变量的作用域上: 1. 如果使用" ./ " 执行,可以理解为程序运行在一个全新的shell中,不继承当前shell的环境变量的值, 同时若在程序中改变了当前shell中的环境变量(不使用export),则当前shell的环境变量值不变. 2. 如果使用" . "执行,则程序继承当前shell中的环境变量,同时,若在程序中改变了当前shell中的环境变量(不使用export),则当前shell中该环境变量的值也会改变 另外一个区别点在于,

  • Java中 % 与Math.floorMod() 区别详解

    %为取余(rem),Math.floorMod()为取模(mod) 取余取模有什么区别呢? 对于整型数a,b来说,取模运算或者取余运算的方法都是: 1.求 整数商: c = a/b; 2.计算模或者余数: r = a - c*b. 区别是: 取余运算在计算商值向0方向舍弃小数位 取模运算在计算商值向负无穷方向舍弃小数位 比如a=4,b=-3时,a/b = -1.3333... 此时,取余c=1,取模c=-2 (%在不同语言中有不同的意义,比如Java或者c/c++中%为取余,python中%则为

  • MySQL中in和exists区别详解

    MySQL中in和exists区别详解

    一.提前准备 为了大家学习方便,我在这里面建立两张表并为其添加一些数据. 一张水果表,一张供应商表. 水果表 fruits表 f_id f_name f_price a1 apple 5 a2 appricot 2 b1 blackberry 10 b2 berry 8 c1 cocount 9 供应商表 suppliers表 s_id s_name 101 天虹 102 沃尔玛 103 家乐福 104 华润万家 我们将用这两张表做演示. 二.什么是exists exists关键字后面的参数是一

  • JavaScript中window和document用法详解

    JavaScript中window和document用法详解

    一.验证表单 封装一个函数用于验证手机号 /** * @param {String}eleId * @param {Object}reg */ function checkInput(eleId,reg) { var ele = document.getElementById(eleId); ele.onblur = function (ev) { if(!reg.test(this.value)){ //不匹配 this.style.borderColor = "#ff0000" /

  • JavaScript 中this指向问题案例详解

    总结 全局环境 ➡️ window 普通函数 ➡️ window 或 undefined 构造函数 ➡️ 构造出来的实例 箭头函数 ➡️ 定义时外层作用域中的 this 对象的方法 ➡️ 该对象 call().apply().bind() ➡️ 第一个参数 全局环境 无论是否在严格模式下,this 均指向 window 对象. console.log(this === window) // true // 严格模式 'use strict' console.log(this === window

随机推荐