原型和原型链

最新推荐文章于 2025-04-01 15:57:53 发布

北海几经夏

最新推荐文章于 2025-04-01 15:57:53 发布

阅读量118

点赞数 1

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/weixin_39333120/article/details/115378522

版权

前端专栏收录该内容

10 篇文章

订阅专栏

文章目录

学习资料：构造函数原型对象prototype

构造函数

function Star(uname, age){
	this.uname = uname;
	this.age = age;
	this.sing = function(){
		console.log("我会唱歌");
	}
}
var ldh = new Star('ldh',18);
var zxy = new Star('zxy',19);

ES6之前，我们面向对象是通过构造函数来实现的，但是构造函数里面有一个缺点，将方法放到构造函数里面，这样呢就会有个问题，在我们创建实例的时候，都会为我们这个方法单独再开辟一个内存空间来存放同一个函数，这样就比较浪费内存。这个时候想到了一个解决方案，把公共的方法定义到了我们构造函数的原型对象身上，这样就实现了我们这个方法的共享，所有的实例都可以使用这个方法了。
在这里插入图片描述

原型 prototype

原型是一个对象，每一个构造函数都有一个prototype属性，也称prototype为原型对象
原型的主要作用：共享方法

    构造函数通过原型分配的函数是所有对象所共享的。
    Javascript规定，每一个构造函数都有一个prototype属性，指向另一个对象，注意这个prototype就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有
    我们可以把那些不变的方法，直接定义在prototype对象上，这样所有对象的实例就可以共享这些方法

一般情况下，我们的公共属性定义到构造函数里面，公共的方法我们放到原型对象上面

function Star(uname, age){
	this.uname = uname;
	this.age = age;
}
Star.prototype.sing = function(){
	console.log("我会唱歌");
}

对象原型 proto

对象都会有一个属性__ proto __指向构造函数的prototype原型对象，之所以我们对象可以使用构造函数prototype原型对象的属性和方法，就是因为对象有__ proto __原型的存在。

__ proto __对象原型和原型对象prototype是等价的
__ proto __对象原型的意义就在于为对象的查找机制提供一个方向，或者说一条路线，但是它是一个非标准属性，因此实际开发中，不可以使用这个属性，它只是内部指向原型对象prototype

> ldh.__proto__ === Star.prototype
> true

在这里插入图片描述

构造函数 constructor

对象原型 ( __ proto__ )和 构造函数原型对象 (prototype)里面都有一个属性constructor属性，constructor我们称为构造函数，因为它指回构造函数本身。
constructor主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数。这样就知道我们的对象是通过哪一个构造函数创建出来的。

function Star(uname, age){
	this.uname = uname;
	this.age = age;
}
//Star.prototype.sing = function(){
//	console.log("我会唱歌");
//}
//Star.prototype.movie= function(){
//	console.log("我会演电影");
//}
// 如上所示，给构造函数追加多个方法的时候，不需要手动指回
// 当如下所示定义多个方法的时候，我们需要手动的利用constructor这个属性指回原来的构造函数。
// 因为第一种是追加方法，第二种是赋值，相当于把前面的构造函数覆盖掉了
Star.prototytpe = {
	constructor: Star,
	sing: function(){
		console.log("我会唱歌");
	},
	movie: function(){
		console.log("我会唱歌");
	}
}

如果我们修改了原来的原型对象，给原型对象赋值的是一个对象，则必须手动的利用constructor指回原来的构造函数

构造函数、实例、原型对象三者之间的关系

在这里插入图片描述

我们先有一个Start构造函数，我们知道每一个构造函数里面都会有一个原型对象，是通过构造函数的prototype指向我这个原型对象的，同样的，在我这个原型对象里面也有一个属性叫做constructor，它又指回了我们这个构造函数，这是构造函数和原型对象之间的相互关系。
我可以通过构造函数来创建一个实例对象，在实例对象里面也有一个原型 __ proto __，指向我们的这个原型对象，对象实例里面也有一个constructor可以指回我们的构造函数。只不过，对象实例的contsructor是通过原型对象指回构造函数的。

原型链

Star原型对象(Star.prototype)也是一个对象，只要是一个对象，就有__ proto __原型的存在。
Star原型对象(Star.prototype)里面的__ proto __原型指向的是Object里面的原型对象
Object里面的原型对象是由谁创建出来的呢？
毫无疑问，是由Object构造函数创建出来的。
那么，Object原型对象(Object.prototype)也是一个对象，它里面的__ proto __原型指向谁呢？答案是 null

> Star.prototype.__proto__ === Object.prototype
> true

在这里插入图片描述
__ proto __原型组合成了一条链，也就是上图最右边的（最长的）那条链
给访问对象成员提供了非常好的一条路，先看ldh对象实例上有没有这个成员；如果没有的话就到Star这个原型对象上看看有没有这个成员；如果还没有，就再往上一层，看看Object原型对象上有没有这个成员；如果再没有，往上就找不到了，就返回没有找到这个成员。所以这个原型链，就好比是一条线路一样，让我们去查找的时候，按着这条路一层一层的往上找就可以了，这个就是我们说的原型链。