0

0

js如何判断属性是否在原型上

小老鼠

小老鼠

发布时间:2025-08-13 13:54:02

|

236人浏览过

|

来源于php中文网

原创

要判断javascript对象的属性是否来自原型链,最稳妥的方法是结合in操作符和object.prototype.hasownproperty.call()。1. 使用prop in obj检查属性是否存在于对象或其原型链上;2. 使用object.prototype.hasownproperty.call(obj, prop)判断属性是否为对象自身属性;3. 若前者为true且后者为false,则该属性来自原型链。此方法可准确区分实例属性与原型属性,避免因对象重写hasownproperty导致的判断错误,确保属性来源判断的可靠性,适用于深拷贝、序列化等需精确控制属性的场景。

js如何判断属性是否在原型上

要判断一个JavaScript对象的属性究竟是它自己的(实例属性)还是从原型链上继承来的,最常用也最稳妥的方法就是结合

in
操作符和
Object.prototype.hasOwnProperty.call()
。简单来说,如果一个属性存在于对象上(
prop in obj
为真),但它又不是对象自身的属性(
obj.hasOwnProperty(prop)
为假),那么这个属性就一定是从原型链上继承而来的。

js如何判断属性是否在原型上

解决方案

判断属性是否在原型上,核心思路就是利用

in
操作符和
hasOwnProperty
方法的不同行为。
in
操作符会检查对象本身及其整个原型链上是否存在某个属性,而
hasOwnProperty
方法则只检查属性是否直接存在于对象实例上,不考虑原型链。

所以,一个属性如果满足以下两个条件,就可以确定它来自原型:

js如何判断属性是否在原型上
  1. 属性存在于对象或其原型链上(
    propertyName in object
    返回
    true
    )。
  2. 属性不是对象自身的属性(
    object.hasOwnProperty(propertyName)
    返回
    false
    )。

结合起来就是:

!(obj.hasOwnProperty(prop)) && (prop in obj)

看个例子:

js如何判断属性是否在原型上
function Person(name) {
    this.name = name; // 实例属性
}

Person.prototype.greet = function() { // 原型属性
    console.log(`Hello, my name is ${this.name}`);
};

const person1 = new Person('Alice');
person1.age = 30; // 实例属性

// 检查 'name' 属性
console.log('--- 检查 name (实例属性) ---');
console.log(`'name' in person1: ${'name' in person1}`); // true
console.log(`person1.hasOwnProperty('name'): ${person1.hasOwnProperty('name')}`); // true
console.log(`'name' 在原型上吗? ${!person1.hasOwnProperty('name') && ('name' in person1)}`); // false

// 检查 'greet' 属性
console.log('\n--- 检查 greet (原型属性) ---');
console.log(`'greet' in person1: ${'greet' in person1}`); // true
console.log(`person1.hasOwnProperty('greet'): ${person1.hasOwnProperty('greet')}`); // false
console.log(`'greet' 在原型上吗? ${!person1.hasOwnProperty('greet') && ('greet' in person1)}`); // true

// 检查 'toString' 属性 (更深的原型链,来自 Object.prototype)
console.log('\n--- 检查 toString (更深的原型属性) ---');
console.log(`'toString' in person1: ${'toString' in person1}`); // true
console.log(`person1.hasOwnProperty('toString'): ${person1.hasOwnProperty('toString')}`); // false
console.log(`'toString' 在原型上吗? ${!person1.hasOwnProperty('toString') && ('toString' in person1)}`); // true

// 检查 'age' 属性 (实例属性)
console.log('\n--- 检查 age (实例属性) ---');
console.log(`'age' in person1: ${'age' in person1}`); // true
console.log(`person1.hasOwnProperty('age'): ${person1.hasOwnProperty('age')}`); // true
console.log(`'age' 在原型上吗? ${!person1.hasOwnProperty('age') && ('age' in person1)}`); // false

// 检查一个不存在的属性
console.log('\n--- 检查 nonexistent (不存在的属性) ---');
console.log(`'nonexistent' in person1: ${'nonexistent' in person1}`); // false
console.log(`person1.hasOwnProperty('nonexistent'): ${person1.hasOwnProperty('nonexistent')}`); // false
console.log(`'nonexistent' 在原型上吗? ${!person1.hasOwnProperty('nonexistent') && ('nonexistent' in person1)}`); // false

这里值得一提的是,

hasOwnProperty
方法本身也可能被对象覆盖。为了避免这种情况,更健壮的做法是使用
Object.prototype.hasOwnProperty.call(obj, prop)

const objWithOverriddenHasOwnProperty = {
    myProp: 1,
    hasOwnProperty: function() {
        return false; // 故意返回 false
    }
};

console.log('\n--- 使用 Object.prototype.hasOwnProperty.call() ---');
console.log(`objWithOverriddenHasOwnProperty.hasOwnProperty('myProp'): ${objWithOverriddenHasOwnProperty.hasOwnProperty('myProp')}`); // false (被覆盖了)
console.log(`Object.prototype.hasOwnProperty.call(objWithOverriddenHasOwnProperty, 'myProp'): ${Object.prototype.hasOwnProperty.call(objWithOverriddenHasOwnProperty, 'myProp')}`); // true (正确判断)

// 所以判断原型属性,更严谨的写法是:
const isPrototypeProperty = (obj, prop) => !Object.prototype.hasOwnProperty.call(obj, prop) && (prop in obj);

console.log(`'myProp' 在 objWithOverriddenHasOwnProperty 的原型上吗? ${isPrototypeProperty(objWithOverriddenHasOwnProperty, 'myProp')}`); // false (因为它是实例属性)

这样处理,哪怕遇到一些“奇奇怪怪”的对象,比如它们自己重写了

hasOwnProperty
,我们的判断逻辑依然能保持准确性。

为什么单靠
in
操作符不足以判断原型属性?

说实话,刚接触JavaScript的时候,我个人也曾被

in
操作符的行为搞得有点迷糊。它看起来很直观,但实际使用起来,它的“包容性”有时会让人产生误解。
in
操作符的职责是检查某个属性名是否存在于对象的可枚举属性(包括自身和原型链上的)中。它不会区分这个属性是直接在对象上定义的,还是从原型链上继承来的。

举个例子,

Object.prototype
上有很多我们常用的方法,比如
toString
valueOf
等等。当你创建一个空对象
{}
时,即使你没有明确定义这些方法,
'toString' in {}
依然会返回
true
。这正是因为它沿着原型链找到了
Object.prototype.toString

const myObj = {};
console.log(`'toString' in myObj: ${'toString' in myObj}`); // true
console.log(`myObj.hasOwnProperty('toString'): ${myObj.hasOwnProperty('toString')}`); // false

你看,

in
操作符告诉我们属性存在,但
hasOwnProperty
却说它不是
myObj
自己的。这就明确了
toString
是来自原型的。所以,如果只用
in
,你根本不知道这个属性是“亲生”的还是“借用”的。在很多需要精确控制属性来源的场景下,比如序列化对象、深度克隆或者遍历对象属性时,这种不区分来源的特性就会带来问题。

聚好用AI
聚好用AI

可免费AI绘图、AI音乐、AI视频创作,聚集全球顶级AI,一站式创意平台

下载

除了
hasOwnProperty
,还有哪些方法可以探究属性来源?

当然有,JavaScript提供了好几种内省机制来帮助我们理解对象的结构。不过,它们通常用于更高级的场景,或者获取更详细的信息,而不仅仅是判断“是不是原型属性”。

一个很有用的方法是

Object.getPrototypeOf()
。这个方法会返回指定对象的原型(即
[[Prototype]]
内部属性的值)。你可以通过它向上遍历原型链,然后结合
Object.getOwnPropertyDescriptor()
来检查每个原型对象上是否有该属性。

function Vehicle() {}
Vehicle.prototype.wheels = 4;

function Car() {}
Car.prototype = Object.create(Vehicle.prototype); // Car 继承自 Vehicle
Car.prototype.constructor = Car;
Car.prototype.engine = 'V6';

const myCar = new Car();
myCar.color = 'red';

let currentProto = Object.getPrototypeOf(myCar); // 获取 myCar 的直接原型 (Car.prototype)
const propName = 'wheels';

let foundOnPrototype = false;
while (currentProto) {
    if (Object.prototype.hasOwnProperty.call(currentProto, propName)) {
        console.log(`${propName} 在 ${currentProto.constructor.name}.prototype 上找到。`);
        foundOnPrototype = true;
        break;
    }
    currentProto = Object.getPrototypeOf(currentProto); // 继续向上查找原型链
}
console.log(`'${propName}' 是原型属性吗?${foundOnPrototype}`); // true

// 检查一个实例属性
currentProto = Object.getPrototypeOf(myCar);
const instancePropName = 'color';
foundOnPrototype = false;
while (currentProto) {
    if (Object.prototype.hasOwnProperty.call(currentProto, instancePropName)) {
        foundOnPrototype = true;
        break;
    }
    currentProto = Object.getPrototypeOf(currentProto);
}
console.log(`'${instancePropName}' 是原型属性吗?${foundOnPrototype}`); // false

这种手动遍历原型链的方式,虽然比

hasOwnProperty
组合拳复杂,但在你需要知道属性具体在原型链的哪一层时,它就显得非常有用了。

另外,

Object.getOwnPropertyDescriptor(obj, propName)
可以获取一个属性的完整描述符(包括它的
value
writable
enumerable
configurable
等特性),但它只针对对象自身的属性。如果你想知道一个属性是否是原型属性,你可以先尝试用
Object.getOwnPropertyDescriptor(obj, propName)
,如果返回
undefined
,那说明它不是自身属性。接着,你可以沿着原型链向上,对每个原型对象调用
Object.getOwnPropertyDescriptor
,直到找到这个属性。这听起来有点绕,但对于需要深入了解属性特性的场景,它提供了最详细的信息。

在实际项目中,区分实例与原型属性有哪些具体用途?

在日常开发中,区分实例属性和原型属性并非只是为了满足好奇心,它在很多实际场景中都有着重要的意义。

一个非常典型的场景就是对象的序列化和深拷贝。当我们想把一个JavaScript对象转换成JSON字符串(比如通过

JSON.stringify()
),或者进行一次深拷贝时,通常我们只希望处理对象“自己”的属性,也就是实例属性。原型上的方法或属性,通常我们不希望被序列化进去,因为它们是共享的,而且很可能包含循环引用或者函数(JSON不支持函数)。如果这时候不加区分地遍历所有属性,就可能导致意料之外的结果,甚至报错。
for...in
循环会遍历所有可枚举的属性(包括原型链上的),因此在使用
for...in
时,几乎总是需要搭配
hasOwnProperty
来过滤掉原型属性,确保你只操作实例数据。

// 错误的深拷贝尝试 (会把原型属性也拷贝过去)
function badDeepClone(obj) {
    const newObj = {};
    for (const key in obj) {
        // 缺少 hasOwnProperty 检查
        if (typeof obj[key] === 'object' && obj[key] !== null) {
            newObj[key] = badDeepClone(obj[key]);
        } else {
            newObj[key] = obj[key];
        }
    }
    return newObj;
}

// 正确的深拷贝,只拷贝实例属性
function goodDeepClone(obj) {
    if (typeof obj !== 'object' || obj === null) {
        return obj;
    }
    const newObj = Array.isArray(obj) ? [] : {};
    for (const key in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, key)) { // 关键:只处理自身属性
            if (typeof obj[key] === 'object' && obj[key] !== null) {
                newObj[key] = goodDeepClone(obj[key]);
            } else {
                newObj[key] = obj[key];
            }
        }
    }
    return newObj;
}

此外,在框架或库的开发中,这种区分更是基础。例如,当你设计一个继承体系时,你可能希望某些方法是共享的(放在原型上),而某些数据是每个实例独有的(放在实例上)。精确地控制属性的归属,能帮助你避免意外的数据共享问题,或者在调试时快速定位问题。

再比如,防止意外覆盖。如果你在对象实例上定义了一个与原型上同名的属性,那么实例属性会“遮蔽”原型属性。了解这一点,能帮助你避免无意中覆盖了原型上重要的方法或属性,从而导致程序行为异常。

总的来说,理解并能准确判断属性的来源,是深入理解JavaScript对象模型和原型链的关键一步。它不仅仅是理论知识,更是编写健壮、可维护代码的实际工具

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

457

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

549

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

337

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

82

2025.09.10

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

761

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

221

2023.09.04

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1570

2023.10.24

字符串介绍
字符串介绍

字符串是一种数据类型,它可以是任何文本,包括字母、数字、符号等。字符串可以由不同的字符组成,例如空格、标点符号、数字等。在编程中,字符串通常用引号括起来,如单引号、双引号或反引号。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

651

2023.11.24

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

49

2026.03.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 6.1万人学习

ASP 教程
ASP 教程

共34课时 | 5.9万人学习

Vue3.x 工具篇--十天技能课堂
Vue3.x 工具篇--十天技能课堂

共26课时 | 1.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号