0

0

js如何访问对象的原型属性

畫卷琴夢

畫卷琴夢

发布时间:2025-08-04 08:29:01

|

400人浏览过

|

来源于php中文网

原创

在javascript中,访问对象原型属性主要有三种途径:1. 使用非标准的__proto__属性,可直接访问实例的原型,但不推荐在生产环境中使用;2. 使用标准方法object.getprototypeof(),推荐用于安全、规范地获取对象的原型;3. 通过构造函数的prototype属性间接操作原型,适用于定义共享方法和属性。这三种方式共同揭示了javascript原型链的核心机制,理解它们的关系有助于掌握继承、优化性能、避免常见误区,并在实际开发中有效利用原型继承实现代码复用和多态。

js如何访问对象的原型属性

在JavaScript中,访问一个对象的原型属性,主要有几种途径:你可以通过非标准的

__proto__
属性来直接查看,也可以使用更规范、推荐的
Object.getPrototypeOf()
方法,或者如果你知道其构造函数,则可以通过构造函数的
prototype
属性来间接操作。每种方式都有其适用场景和需要注意的地方。

js如何访问对象的原型属性

解决方案

谈到JavaScript里对象原型属性的访问,这其实是理解JS面向对象核心的关键一步。我个人觉得,理解它就像是拆开一个盒子,看看里面那些“看不见”的连接是如何工作的。

首先,最直接但也最不推荐在生产代码中直接使用的,是

__proto__
。这玩意儿就像是个后门,虽然方便你快速窥视一个实例对象指向的原型,但它并非ECMAScript标准的一部分(尽管现代浏览器都支持),而且直接修改它可能会带来性能问题。我通常只在调试或者快速验证原型链的时候会用它,比如:

js如何访问对象的原型属性
function Person(name) {
    this.name = name;
}
Person.prototype.greet = function() {
    console.log(`Hello, my name is ${this.name}`);
};

const alice = new Person('Alice');
console.log(alice.__proto__ === Person.prototype); // true
console.log(alice.__proto__.greet); // [Function: greet]

接着,更推荐、更标准的做法是使用

Object.getPrototypeOf()
。这是个正规军,它返回指定对象的原型(即内部的
[[Prototype]]
)。当你需要获取一个对象的原型,并且不打算直接修改它时,这几乎是你的首选。它清晰、安全,并且符合标准。

function Animal(name) {
    this.name = name;
}
Animal.prototype.speak = function() {
    console.log(`${this.name} makes a sound.`);
};

const dog = new Animal('Buddy');
const protoOfDog = Object.getPrototypeOf(dog);
console.log(protoOfDog === Animal.prototype); // true
protoOfDog.speak(); // 'Buddy makes a sound.' (这里调用的还是实例的speak,因为speak方法在原型上,实例本身没有,会沿着原型链查找)
// 如果你想要访问原型上的特定属性,可以直接通过 protoOfDog.property_name
console.log(Object.getPrototypeOf(dog).speak === Animal.prototype.speak); // true

最后,当你谈论“原型属性”时,很多时候你是在指构造函数的

prototype
属性。这才是真正定义了“类”的共享行为的地方。当你定义一个构造函数时,它的
prototype
属性会自动被创建一个对象,所有通过这个构造函数创建的实例,都会将它们的
[[Prototype]]
(即
__proto__
指向的那个对象)链接到这个
prototype
对象上。所以,如果你想给所有实例添加共享方法或属性,你通常会直接操作
Constructor.prototype

js如何访问对象的原型属性
function Car(model) {
    this.model = model;
}
// 通过构造函数的prototype属性添加方法,这是最常见和推荐的方式
Car.prototype.drive = function() {
    console.log(`${this.model} is driving.`);
};

const myCar = new Car('Tesla');
myCar.drive(); // Tesla is driving.
// 此时,myCar的__proto__就是Car.prototype
console.log(myCar.__proto__ === Car.prototype); // true

理解这三者之间的关系至关重要:实例的

__proto__
(或
Object.getPrototypeOf(instance)
的返回值)指向的是它构造函数的
prototype
属性所指向的对象。它们其实是同一个东西,只是从不同的角度去访问。

为什么我们需要理解原型链?

理解JavaScript的原型链,对我来说,就像是拿到了一张JS对象继承的“地图”。没有这张地图,很多时候你会迷失在各种对象和方法之间,不知道它们是从哪里来的,也不知道它们为什么会表现出那样的行为。这不仅仅是个理论知识,它直接关系到你写出的代码是否高效、是否易于维护。

首先,原型链是JavaScript实现继承的根本机制。不同于Java或C++那种基于类的继承,JS是基于原型的。这意味着当你尝试访问一个对象的某个属性或方法时,如果这个对象本身没有,JS引擎会沿着它的原型链向上查找,直到找到该属性或者到达原型链的顶端(

null
)。这解释了为什么你创建一个数组,就能直接调用
push()
map()
方法,因为这些方法都定义在
Array.prototype
上,而你的数组实例的原型链指向了它。

其次,理解原型链能帮助你编写更高效的代码。共享的方法和属性应该放在原型上,而不是每个实例上都复制一份。比如,如果你有1000个

Person
对象,每个对象都有一个
greet
方法。如果
greet
方法定义在每个实例上(
this.greet = function() {...}
),那么内存中会有1000个
greet
函数的副本。但如果
greet
定义在
Person.prototype
上,内存中只需要一份
greet
函数,所有实例共享它。这在大型应用中,对内存和性能的影响是显而易见的。

再者,它对

this
上下文的理解也至关重要。当一个方法通过原型链被调用时,
this
的指向仍然是调用该方法的那个实例对象,而不是原型对象本身。这有时会让初学者感到困惑,但一旦理解了原型链的查找机制,就会觉得非常自然。

最后,在调试时,如果你知道一个方法可能定义在原型上,或者一个属性可能是从原型继承而来,你就能更快地定位问题。比如,一个对象行为异常,你可能会检查它的原型链上是否有意外的修改,或者某个方法是否被错误地覆盖了。

访问原型属性时常见的误区有哪些?

在实际开发中,关于原型属性的访问,我见过不少“坑”,自己也掉进去过。这些误区往往源于对原型链机制理解不够深入,或者习惯了其他语言的类继承思维。

你好星识
你好星识

你的全能AI工作空间

下载

一个非常常见的误区就是混淆

__proto__
prototype
。很多初学者会觉得它们是同一个东西,或者可以互换使用。但实际上,
__proto__
是实例对象内部指向其原型的链接,而
prototype
是构造函数的一个属性,它指向的是一个对象,这个对象才是所有由该构造函数创建的实例的共享原型。一个用于实例,一个用于构造函数。我见过有人尝试
myInstance.prototype.method()
,这肯定是错的,因为实例没有
prototype
属性。

另一个危险的误区是直接修改或扩展内置对象的

Object.prototype
Array.prototype
。虽然技术上可行,比如
Array.prototype.myCustomMethod = function() {...}
,但这是非常不推荐的做法。这种行为会污染全局环境,导致“原型链污染”。想象一下,你的代码给
Array.prototype
加了一个方法,而你使用的某个第三方库也加了一个同名方法,或者期望
Array
原型是“干净”的,这就可能导致冲突或不可预知的行为。这就像你在公共图书馆的每一本书上都写上你的名字,虽然你觉得很酷,但对其他人来说就是灾难。

还有,很多人在遍历对象属性时,不使用

hasOwnProperty()
for...in
循环会遍历对象自身以及原型链上可枚举的属性。如果你只是想处理对象自己的属性,不加
hasOwnProperty
过滤,就会不小心处理到原型上的属性,这在某些场景下会导致逻辑错误。

function Vehicle() {
    this.type = 'car';
}
Vehicle.prototype.color = 'red';

const myVehicle = new Vehicle();

for (let key in myVehicle) {
    console.log(key + ': ' + myVehicle[key]);
    // 输出:
    // type: car
    // color: red
}

console.log('--- 使用 hasOwnProperty ---');
for (let key in myVehicle) {
    if (myVehicle.hasOwnProperty(key)) {
        console.log(key + ': ' + myVehicle[key]);
        // 输出:
        // type: car
    }
}

不加

hasOwnProperty
color
这个原型属性也会被遍历到,这往往不是你想要的。

最后,有时会有人误以为原型链上的方法调用会比实例自身的方法慢很多。虽然理论上存在查找开销,但在现代JS引擎中,这种开销通常微乎其微,几乎可以忽略不计。过度优化而将所有方法都复制到实例上,反而会带来更大的内存开销。性能瓶颈往往出现在更复杂的计算或DOM操作上,而不是原型链的查找。

如何在实际开发中有效利用原型继承?

在日常的JavaScript开发中,原型继承是构建可维护、可扩展代码的基石。我通常会从几个方面去思考如何有效地利用它。

首先,定义共享方法和属性。这是最基本也是最重要的应用。当你有多个对象实例需要共享同一个方法或属性时,将其定义在构造函数的

prototype
上是最佳实践。这不仅节省内存,也让代码逻辑更清晰。比如,一个
User
对象,
login()
logout()
这些行为应该放在
User.prototype
上,而不是每个
User
实例都带一份。

// 示例:定义共享方法
function User(name, email) {
    this.name = name;
    this.email = email;
}

User.prototype.login = function() {
    console.log(`${this.name} logged in.`);
};

User.prototype.getProfile = function() {
    return { name: this.name, email: this.email };
};

const user1 = new User('Alice', 'alice@example.com');
const user2 = new User('Bob', 'bob@example.com');

user1.login(); // Alice logged in.
console.log(user2.getProfile()); // { name: 'Bob', email: 'bob@example.com' }

其次,实现继承和多态。通过原型链,我们可以轻松实现对象之间的继承关系。例如,

Student
可以继承
Person
的属性和方法。这通常通过
Object.create()
或者ES6的
class
语法(它只是原型继承的语法糖)来实现。

// 示例:实现继承
function Person(name) {
    this.name = name;
}
Person.prototype.sayHello = function() {
    console.log(`Hello, my name is ${this.name}.`);
};

function Student(name, studentId) {
    Person.call(this, name); // 调用父类构造函数
    this.studentId = studentId;
}

// 核心继承步骤:将Student的原型指向Person原型的一个新对象
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student; // 修正constructor指向

Student.prototype.study = function() {
    console.log(`${this.name} (ID: ${this.studentId}) is studying.`);
};

const studentA = new Student('Charlie', 'S001');
studentA.sayHello(); // Hello, my name is Charlie. (继承自Person)
studentA.study();    // Charlie (ID: S001) is studying.

这种模式让代码复用性大大提高,并且通过方法重写(多态),你可以让子类拥有父类方法的不同实现。

再者,利用

Object.create()
创建纯粹的原型继承对象。当你不需要一个完整的构造函数,只是想创建一个新对象,其原型是另一个现有对象时,
Object.create()
非常有用。这在实现某些设计模式,比如原型模式时特别方便。

// 示例:使用Object.create()
const baseShape = {
    color: 'red',
    getArea: function() { return 0; }
};

const circle = Object.create(baseShape);
circle.radius = 5;
circle.getArea = function() {
    return Math.PI * this.radius * this.radius;
};
circle.color = 'blue'; // 覆盖原型上的属性

console.log(circle.color); // blue
console.log(circle.getArea()); // 78.539...
console.log(Object.getPrototypeOf(circle) === baseShape); // true

最后,虽然ES6的

class
语法让面向对象编程看起来更像传统语言,但本质上它依然是基于原型链的。理解其背后的原型机制,能让你更好地调试和优化使用
class
的代码。当你看到
super
关键字时,要知道它其实是在操作原型链上的方法。在复杂场景下,对原型链的深刻理解,能让你在面对一些“魔幻”的JS行为时,不至于一头雾水。

相关专题

更多
java
java

Java是一个通用术语,用于表示Java软件及其组件,包括“Java运行时环境 (JRE)”、“Java虚拟机 (JVM)”以及“插件”。php中文网还为大家带了Java相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

832

2023.06.15

java正则表达式语法
java正则表达式语法

java正则表达式语法是一种模式匹配工具,它非常有用,可以在处理文本和字符串时快速地查找、替换、验证和提取特定的模式和数据。本专题提供java正则表达式语法的相关文章、下载和专题,供大家免费下载体验。

738

2023.07.05

java自学难吗
java自学难吗

Java自学并不难。Java语言相对于其他一些编程语言而言,有着较为简洁和易读的语法,本专题为大家提供java自学难吗相关的文章,大家可以免费体验。

734

2023.07.31

java配置jdk环境变量
java配置jdk环境变量

Java是一种广泛使用的高级编程语言,用于开发各种类型的应用程序。为了能够在计算机上正确运行和编译Java代码,需要正确配置Java Development Kit(JDK)环境变量。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

397

2023.08.01

java保留两位小数
java保留两位小数

Java是一种广泛应用于编程领域的高级编程语言。在Java中,保留两位小数是指在进行数值计算或输出时,限制小数部分只有两位有效数字,并将多余的位数进行四舍五入或截取。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

398

2023.08.02

java基本数据类型
java基本数据类型

java基本数据类型有:1、byte;2、short;3、int;4、long;5、float;6、double;7、char;8、boolean。本专题为大家提供java基本数据类型的相关的文章、下载、课程内容,供大家免费下载体验。

446

2023.08.02

java有什么用
java有什么用

java可以开发应用程序、移动应用、Web应用、企业级应用、嵌入式系统等方面。本专题为大家提供java有什么用的相关的文章、下载、课程内容,供大家免费下载体验。

430

2023.08.02

java在线网站
java在线网站

Java在线网站是指提供Java编程学习、实践和交流平台的网络服务。近年来,随着Java语言在软件开发领域的广泛应用,越来越多的人对Java编程感兴趣,并希望能够通过在线网站来学习和提高自己的Java编程技能。php中文网给大家带来了相关的视频、教程以及文章,欢迎大家前来学习阅读和下载。

16925

2023.08.03

公务员递补名单公布时间 公务员递补要求
公务员递补名单公布时间 公务员递补要求

公务员递补名单公布时间不固定,通常在面试前,由招录单位(如国家知识产权局、海关等)发布,依据是原入围考生放弃资格,会按笔试成绩从高到低递补,递补考生需按公告要求限时确认并提交材料,及时参加面试/体检等后续环节。要求核心是按招录单位公告及时响应、提交材料(确认书、资格复审材料)并准时参加面试。

0

2026.01.15

热门下载

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

精品课程

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

共28课时 | 3.1万人学习

AngularJS教程
AngularJS教程

共24课时 | 2.6万人学习

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

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