什么是原型、原型链?原型和原型链的作用(有图方便理解)

本文详细阐述了JavaScript中构造函数的使用、原型对象的作用,以及原型链的工作原理。重点介绍了数据共享、内存优化和原型链查找机制,包括显式原型与隐式原型的区别,以及原型链在继承中的关键作用。

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

原型:JS声明构造函数(用来实例化对象的函数)时,会在内存中创建一个对应的对象,这个对象就是原函数的原型。构造函数默认有一个prototype属性,prototype的值指向函数的原型。同时原型中也有一个constructor属性,constructor的值指向函数对象。
通过构造函数实例化出来的对象,并不具有prototype属性,其默认有一个__proto__属性,__proto__的值指向构造函数的原型。在原型对象上添加或修改的属性,在所有实例化出的对象上都可共享。

/*代码基本架构
1.每个函数function都有一个prototype,即显示原型(属性)
2.每个通过函数实例出来的对象都有一个__proto__,可称为隐式原型(属性)
3.对象的隐式原型的值为其对应构造函数的显示原型的值
*/

//显示原型与隐式原型
function Fn(){  // 内部语句:this.prototype = {}
	
}
//1.每个函数function 都有一个prototype 即显式原型(属性),默认指向一个空的object对象
console.log(Fn.prototype)
//2. 每个实例对象都有一个__proto__,可称为隐式原型(属性)
var fn = new Fn() //内部语句: this.__proto__ = Fn.prototype
console.log(fn.__proto__)
//3.对象的隐式原型的值为其对应构造函数的显示原型的值
console.log(Fn.prototype === fn.__proto__)

在这里插入图片描述

原型的作用:
1.数据共享 节约内存内存空间
2.实现继承

原型链:当在实例化的对象中访问一个属性时,首先会在该对象内部(自身属性)寻找,如找不到,则会向其__proto__指向的原型中寻找,如仍找不到,则继续向原型中__proto__指向的上级原型中寻找,直至找到或Object.prototype.__proto__为止(值为null),这种链状过程即为原型链。如下图所示好理解(根据代码参考下图)
原型链的作用:查找对象的属性(方法)

console.log(Object.prototype.__proto__) //浏览器本身创建了一个Object
function Fn() {
	this.test1 = function(){
		console.log('test1()')
	}
}
Fn.prototype.test2 = function(){
	console.log('test2()')
}

var fn = new Fn()

fn.test1()
fn.test2()
console.log(fn.toString())

在这里插入图片描述

原型链的源头是Object!所以万物皆对象呀!

原型链面试题


var A = function() {}

A.prototype.n = 1

var b = new A()

A.prototype = {
  n: 2,
  m: 3
}

var  c = new A()

console.log(b.n, b.m, c.n, c.m) // 1 undefined 2 3

```html
var F = function() {}

Object.prototype.a = function() {
  console.log('a()')
}

Function.prototype.b = function() {
  console.log('b()')
}

var f = new F()

f.a() // a()
f.b() // b is not a function(报错)
F.a() // a()
F.b() // b()

特别注意:

Object.prototype.constructor.proto === Function.prototype // true

Function.prototype.proto === Object.prototype // true

Object.prototype.proto === null // true

JavaScript 中,每个对象都有一个原型对象,它充当对象的模板或蓝,用于继承属性方法。原型对象可以包含属性方法,这些属性方法可以被继承到它的后代对象中。 原型链是一种机制,它通过将一个对象的原型设置为另一个对象来实现继承。这种机制允许我们在一个对象中访问另一个对象的属性方法。当我们试访问一个对象的属性或方法时,JavaScript 引擎会先查找该对象本身是否拥有该属性或方法,如果没有,则会沿着原型链向上查找,直到找到一个拥有该属性或方法的对象为止。 下面是一个带清晰理解原型原型链的示例: ![原型链示意](https://img-blog.csdn.net/20171019160118755?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbWljaGFlbC82NzAzMTU1Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/q/50) 在上中,我们创建了一个 `Person` 构造函数,并设置了它的原型对象 `Person.prototype`。然后,我们创建了一个 `person1` 对象,并将其原型设置为 `Person.prototype`。这意味着 `person1` 继承了 `Person.prototype` 对象中的属性方法。同样,我们创建了一个 `person2` 对象,并将其原型设置为 `Person.prototype`。因此,`person2` 也继承了 `Person.prototype` 对象中的属性方法。 现在,假设我们试访问 `person1` 对象的 `name` 属性。JavaScript 引擎首先会查找 `person1` 对象本身是否有 `name` 属性,如果没有,它会沿着原型链向上查找,直到找到 `Person.prototype` 对象为止。在这个例子中,我们可以看到 `person1` 对象的原型是 `Person.prototype` 对象,而 `Person.prototype` 对象中有一个名为 `name` 的属性,因此引擎会返回 `Person.prototype` 对象中的 `name` 属性值。 同样,如果我们试访问 `person2` 对象的 `sayHello` 方法,JavaScript 引擎会首先查找 `person2` 对象本身是否有 `sayHello` 方法,如果没有,它会沿着原型链向上查找,直到找到 `Person.prototype` 对象为止。在这个例子中,`person2` 对象的原型是 `Person.prototype` 对象,而 `Person.prototype` 对象中有一个名为 `sayHello` 的方法,因此引擎会调用 `Person.prototype` 对象中的 `sayHello` 方法。 这就是原型原型链的基本概念,它们是 JavaScript 中实现继承的核心机制。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值