JavaScript原型与原型链

本文详细解析JavaScript中原型的概念,包括原型对象、显式原型与隐式原型的区别,以及原型链的工作原理。通过实例演示如何利用原型实现属性共享,同时探讨原型链在查找属性时的作用。

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

原型

我们创建的每个函数都有一个 prototype(原型) 属性,这个属性是一个指向一个对象的指针,这个对象的用途是存储由该函数实例化出的所有对象所共享的属性和方法。

在默认情况下,所有原型对象都会自动获得一个 constructor(构造函数) 属性,这个属性是一个指向 prototype 属性所在函数的指针

举个例子,如下代码:

func Person() {
	Person.prototype.name = "jack"
	Person.prototype.age = 18
	Person.prototype.sayHello = function() {
		alert("Hello!")
	}
}

var person1 = new Person()
var person2 = new Person()

此时,构造函数为空,我们将所有的属性和方法都放在了 Person 的 prototype 属性中。但是我们依然可以调用构造函数创建新对象,并且新对象都会具有相同的属性和方法。但与构造函数模式不同的是,新对象的这些属性和方法是由所有实例共享的。

理解参见下图:
在这里插入图片描述

显式原型与隐式原型

每个函数 function都有一个 prototype,即显示原型, 每个实例对象都有一个 _proto_,即隐式原型, 对象得隐式原型的值为其对应构造函数的现实原型的值。

函数 prototype 属性:在定义函数时自动添加,默认是一个空 object 对象。
对象得 _proto_ 属性:在创建对象时自动添加的,默认值为构造函数的 prototype 属性值
程序员能直接操作显示原型,但不能直接操作隐式原型(ES6之前)

显示原型和隐式原型的介绍如上,详细作用与理解参见原型链

原型链

有如下代码:

function Fn() {
	this.test1 = function() {
		console.log("test1")
	}
}

Fn.prototype.test2 = function() {
	console.log("test2")
}

var fn = new Fn()

Fn是一个构造函数,然后构造了 fn对象,但是在对象构造之前内存中已经有了一个 object 对象。所以原型链如下:
在这里插入图片描述

解释原型链:
访问一个对象得属性时,先在自身属性中查找,找到返回,如果没有,再沿着_proto_ 这条链向上查找,找到返回,如果最终没有找到,返回 undefined

别名:隐式原型链

作用:查找对象的属性

最后贴一张 普通函数、object对象、Function对象之间的原型链,可参考可研究
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值