对象原型与属性容易混淆的函数

本文深入探讨了JavaScript中对象属性的获取方法,包括原型链的访问、属性的获取及判断属性位置的技术细节。此外,还介绍了如何区分实例属性与原型属性,并提供了枚举属性的相关知识。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

书目:《JAVASCRIPT高级程序设计 》CH6 面向对象的程序设计
参考链接1:JavaScript 获取对象属性和方法
参考链接2:isPrototypeOf和 instanceof 的区别
参考链接3:JavaScript中的constructor、instanceof、isPrototypeOf、typeof以及hasOwnProperty

function Person(){this.age = 100}
var person1 = new Person;
person1.name="Greg"

获取原型

①isPrototypeOf()

//确认对象的原型//取代typeof
isPrototypeOf() 方法用于测试一个对象是否存在于另一个对象的原型链上
语法: prototypeObj.isPrototypeOf(object)
参数: object 在该对象的原型链上搜寻
返回值: Boolean,表示调用对象是否在另一个对象的原型链上。

Person.prototype.isPrototypeOf(person1);  //true

②Object.getPrototypeOf()

//获取对象的原型

alert(Object.getPrototypeOf(person1) == Person.prototype)  //true

③instanceof

instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。
语法: object instanceof constructor
参数: object 要检测的对象. constructor 某个构造函数
描述:instanceof 运算符用来检测 constructor.prototype 是否存在于参数 object 的原型链上。

alert(person1 instanceof Person);//返回true
alert(person1instanceof Object);//返回true

获取属性

①Object.keys() 

//ES5,接收一个对象作为参数,返回一个包含所有可枚举属性的字符串数组
//对原型调用,返回原型属性
//若对实例调用,则只返回实例属性

var keys = Object.keys(Person.prototype);//返回原型属性
    alert(keys);  //"age"
    var p1keys=Object.keys(person1);//返回实例属性
 alert(p1keys);  //"name"

②for..in..

//返回原型中可枚举的属性,以及原型中不可枚举但在实例中进行了覆盖定义的属性
//与Object.keys()相同

③Object.getOwnPropertyName()  

//如果你想要获得所有实例属性,无论他是否可枚举,可以使用这个方法

var keys = Object.getOwnPropertyNames(Person.prototype);
alert(keys);  //"constructor, age"

判断属性的位置: 在原型中定义,还是在实例中

①hasOwnProperty()  

//判断属性是否是存在于自己的实例中,如果是:返回true,如果仅仅存在自己的原型中,则返回false

person1.hasOwnProperty("name");   //true
person1.hasOwnProperty("age");   //false因为age是原型的属性,而不是自己实例的属性

②单独使用in操作符

//会在通过通对象能够访问给定属性时返回true,无论该属性存在于实例中还是原型中.

alert("name" in person1);//true
alert("age" in person1);//true

同时使用两种方法

就可以确定属性是否存在于原型中:

function hasPrototypeProperty(object,name){
   return !object.hasOwnProperty && (name in property);//存在于原型中才返回true 
}

倘若实例中对原型的属性进行了重新定义,那么hasPrototypeProperty返回false,因为会先搜索实例中的属性,搜索到之后 ,原型中的属性用不到了.

枚举

1.所有开发者定义的属性,均是可枚举的;
2.不可枚举的属性有: toLocaleString()、toString()、valueOf()、hasOwnProperty()、propertyIsEnumerable()  
3.es5将constructor和prototype的 [ [ Enumerable ] ] = false ,即可枚举属性设置为了 false
4.当以对象字面量的形式重写prototype并重设constructor属性时,将导致[[Enumberable]]特性被设置为true.(P155)

<think>好的,我现在需要回答用户关于构造函数和原型对象关系的问题。首先,我得回忆一下用户提供的引用内容,特别是引用[1]、[2]、[4],因为它们详细讨论了构造函数、原型对象和实例对象之间的联系。 用户的问题有两个部分:构造函数和原型对象的关系,以及如何理解它们的关联。我需要确保回答覆盖这两个方面,并且结构清晰。根据引用,构造函数有一个prototype属性指向原型对象,而原型对象有一个constructor属性指回构造函数。这是一个相互引用的闭环关系。同时,实例对象通过__proto__属性连接到原型对象。 接下来,我需要用简单易懂的中文解释这些关系,避免使用过于专业的术语。可以分点说明,比如构造函数的prototype属性、原型对象的constructor属性、实例的__proto__属性,以及原型链的作用。这样用户能逐步理解每个部分的作用和联系。 另外,用户提到的示例代码可能有助于说明问题。比如,引用[2]中的Person构造函数,可以举这个例子来说明原型对象如何存储方法,所有实例共享这些方法。这样可以突出原型对象在内存效率上的优势,避免每个实例重复创建方法。 还要注意引用用户提供的引用内容,在适当的地方添加引用标记,比如在提到构造函数和原型对象相互指向时引用[1]和[4]。同时,确保回答符合系统级指令,如使用正确的LaTeX格式,虽然这个问题可能不需要数学公式,但如果有涉及变量或术语,可能需要用$符号包裹。 最后,生成相关问题时要围绕构造函数、原型对象、原型链以及实际应用场景展开,帮助用户进一步学习。例如,如何访问原型对象的方法,原型链的作用,或者为什么共享方法更高效。 检查是否存在可能的错误,比如是否正确解释了constructor属性和prototype属性的指向,是否混淆了__proto__和prototype。根据引用[4],实例的__proto__指向构造函数的prototype,而构造函数的prototype属性指向原型对象,原型对象的constructor又指回构造函数。需要确保这些点准确无误。 总结回答的结构:先总述关系,再分点详细说明每个属性,接着用代码示例说明,最后总结关联。这样用户能够逐步理解,结构清晰。</think>### 构造函数原型对象的关系解析 #### 核心关系 构造函数通过`prototype`属性指向原型对象,原型对象通过`constructor`属性反向指向构造函数,两者形成闭环引用。实例对象通过`__proto__`属性关联到原型对象,构成原型链的基础[^1][^4]。 #### 分步说明 1. **构造函数的`prototype`属性** 每个构造函数(如`Person`)在创建时,系统会自动为其分配一个原型对象(即`Person.prototype`)。构造函数的`prototype`属性直接指向该原型对象。 例如: ```javascript function Person(name) { this.name = name; } console.log(Person.prototype); // 输出原型对象 ``` 2. **原型对象的`constructor`属性** 原型对象中有一个`constructor`属性,默认指向其关联的构造函数。这一设计使得可以通过原型反向追溯构造函数。 ```javascript console.log(Person.prototype.constructor === Person); // 输出true ``` 3. **实例对象的`__proto__`属性** 当通过`new`关键字创建实例时(如`const obj = new Person()`),实例的`__proto__`属性会自动指向构造函数的原型对象。 ```javascript const obj = new Person("张三"); console.log(obj.__proto__ === Person.prototype); // 输出true ``` 4. **原型链的作用** 实例对象访问属性时,若自身不存在该属性,会通过`__proto__`逐级向上查找原型对象中的属性,形成原型链。这种机制实现了属性和方法的共享[^2][^4]。 例如,若将方法定义在原型上: ```javascript Person.prototype.sayHello = function() { console.log("Hello!"); }; obj.sayHello(); // 调用原型方法 ``` #### 关联示意图 $$ \begin{aligned} &\text{构造函数} \xrightarrow{\text{prototype}} \text{原型对象} \\ &\text{原型对象} \xrightarrow{\text{constructor}} \text{构造函数} \\ &\text{实例对象} \xrightarrow{\text{__proto__}} \text{原型对象} \end{aligned} $$ #### 实际意义 - **共享方法,节省内存**:将公共方法定义在原型对象中,所有实例共享同一方法,避免重复创建[^2]。 - **实现继承**:通过原型链,子类可以访问父类原型中的属性和方法[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

picoasis

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值