JavaScript中in和hasOwnProperty区别详解

作者:异步漫步时间:2026-10-22 06:44:07浏览:413

本文详细解析JavaScript中in操作符与hasOwnProperty方法的差异。in检查属性是否存在于对象或其原型链中,而hasOwnProperty仅判断实例自身是否拥有该属性。通过示例展示如何屏蔽原型属性、使用delete恢复访问,并简述构造函数返回值对实例化的影响。

in与hasOwnProperty的区别

在JavaScript中,每次读取对象的属性时,引擎都会执行一次查找过程,目标是找到指定名称的属性。查找首先从对象实例本身开始。如果实例中存在该属性,则直接返回其值;若未找到,则继续沿着原型链向上查找,即检查指针指向的原型对象。如果在原型对象中找到了该属性,则返回原型中该属性的值。

虽然可以通过对象实例访问保存在原型中的值,但不能通过实例直接重写原型中的属性值。如果在实例中定义了一个与原型属性同名的新属性,该实例属性会屏蔽(shadow)原型中的同名属性。这种屏蔽仅阻止访问原型中的属性,并不会修改原型属性本身。即使将实例中的该属性设置为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

每个函数都拥有一个prototype对象属性,该对象内部包含一个constructor属性,默认指向函数本身。

每个对象实例都有一个__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区别,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对本站网站的支持!

作者最新文章