1、原型与原型链

已于 2022-04-03 12:04:12 修改
阅读量890 收藏
点赞数
文章标签： javascript
于 2022-04-02 11:02:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45065754/article/details/123915265
版权

1、总结：

  • 原型就是一个对象，每一个对象都有它自己对应的一个原型对象，它可以使用自己原型对象上的所有属性与方法。获取原型的方法有两种，一种是所有数据都有的(__proto__)方法，一种是函数所特有的，通过构造函数的prototype属性方法获取。原型的作用就是来扩展对象，方便继承使用原型的属性和方法，直接调用即可，不用再重新写过。
  • 原型链就是一个对象的原型继承其他对象作为它的原型，因为原型本质是一个对象，所以它可以无限继承原型，就是原型上有原型，原型上还有原型，无限原型，直到最上边的原型（ Object原型），这就是原型链的基本概念。具体体现在查找属性/方法中，先查找实例对象的属性/方法，没有找到，然后再往上原型找，没有找到再住上找原型的原型，直到找到Object的原型，都没有找到就返回报错。

2、什么是原型？

  • 原型是一个对象，每一个对象都有它自己对应的一个原型对象(__proto__)，它可以使用自己原型对象上的所有属性和方法。

源代码解析：

<script>
	//  1、什么是原型？原型是一个对象
	//  2、每个对象都有它自己对应的一个原型对象(__proto__)，它可以使用自己原型对象上的所有属性和方法
	//  3、实例
	//  3.1、创建对象(person)
	let person = { name: 'jasmine' }
	//  3.2、设置对象的原型(person.__proto__),添加age属性和getAge()方法
	person.__proto__.age = 18;
	person.__proto__.getAge = function () { console.log(this.age); }
	//  3.3、对象获取原型的属性和方法
	console.log(person.age);
	person.getAge();
</script>

3、获取原型的方法（2种）

获取原型的方法两种
所有对象都可以获取原型的方法通过对象的(__proto__)获取
函数所特有获取原型的方法通过构造函数的prototype属性获取

源代码解析：

<script>
	//  1、什么是原型？原型是一个对象
	//  2、每个对象都有它自己对应的一个原型对象(__proto__)，它可以使用自己原型对象上的所有属性和方法
	//  3、获取原型的第一个方法(__proto__)
	//  3.1、创建对象(person)
	let person = { name: 'jasmine' }
	//  3.2、设置对象的原型(person.__proto__),添加age属性和getAge()方法
	person.__proto__.age = 18;
	person.__proto__.getAge = function () { console.log(this.age); }
	//  3.3、对象获取原型的属性和方法
	console.log(person.age);
	person.getAge();

	//  4、构造函数的this指向谁？指向new创建的对象
	function Person(name, age) {
		this.name = name;
		this.age = age;
	}

	let person1 = new Person('QiQi', 28);
	//  5、获取原型的第二个方法(prototype属性)，函数所特有的
	Person.prototype.getAge = function () {
		console.log(this.age);
	}
	person1.getAge();

</script>

4、原型对象的作用

  • 用原型来扩展对象，方便继承使用原型的属性和方法，比如说，我想获取格式化日期，我就可以利用原型方法来获取，方便使用，不用再重新写。

源代码解析：

	//  6、原型对象的作用，用原型来扩展对象,方便继承使用原型的属性和方法
	let date = new Date();
	Date.prototype.formate = function () {
		let year = this.getFullYear();
		let month = this.getMonth() + 1;
		let date = this.getDate();
		return `${year}年${month}月${date}日`;
	}
	console.log(date.formate());

5、什么是原型链

  • 因为原型是一个对象，所以一个对象有原型，而这个原型又可以继承其他对象作为它的原型，原型上有原型，原型上还有原型，无限原型，这就叫原型链。

  • 调用方法：先在对象上找方法，找不到就往原型上找，再找不到就再往上个原型上找，一直住上找，直到找到最上边的(Object)原型为null为止，都找不到就报错。

源代码解析：

//  7、ES5继承(prototype)
	function User(username, password) {
		this.username = username;
		this.password = password;
		this.login = function () {
			console.log('用户登陆')
		}
	}

	function Admin() {
		this.selectUser = function () {
			console.log('查询用户信息');
		}
	}
	/*  8、原型链：因为原型是一个对象，所以一个对象有原型，而这个原型又可以继承其他对象作为它的原型，
	原型上有原型，原型上还有原型，无限原型，这就叫原型链*/
	Admin.prototype = new User();

	/*  9、调用方法：先在对象上找方法，找不到就往原型上找，再找不到就再往上个原型上找，
	一直住上找，直到找到最上边的(Object)原型为null为止，都找不到就报错。*/
	Object.prototype.name = 'Object';
	Object.prototype.login = function () {
		console.log('Object原型上的登陆方法');
	}

	let admin = new Admin();
	admin.login();
	//  10、所有对象的最上边的原型就是(Object)的原型，都可以调用其属性和方法
	let text = {};
	text.login();
	console.log(text.name);

6、源代码：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>原型与原型链</title>
</head>

<body>

</body>
<script>
	//  1、什么是原型？原型是一个对象
	//  2、每个对象都有它自己对应的一个原型对象(__proto__)，它可以使用自己原型对象上的所有属性和方法
	//  3、获取原型的第一个方法(__proto__)
	//  3.1、创建对象(person)
	let person = { name: 'jasmine' }
	//  3.2、设置对象的原型(person.__proto__),添加age属性和getAge()方法
	person.__proto__.age = 18;
	person.__proto__.getAge = function () { console.log(this.age); }
	//  3.3、对象获取原型的属性和方法
	console.log(person.age);
	person.getAge();

	//  4、构造函数的this指向谁？指向new创建的对象
	function Person(name, age) {
		this.name = name;
		this.age = age;
	}

	let person1 = new Person('QiQi', 28);
	//  5、获取原型的第二个方法(prototype属性)，函数所特有的
	Person.prototype.getAge = function () {
		console.log(this.age);
	}
	person1.getAge();


	//  6、原型对象的作用，用原型来扩展对象,方便继承使用原型的属性和方法
	let date = new Date();
	Date.prototype.formate = function () {
		let year = this.getFullYear();
		let month = this.getMonth() + 1;
		let date = this.getDate();
		return `${year}年${month}月${date}日`;
	}
	console.log(date.formate());

	//  7、ES5继承(prototype)
	function User(username, password) {
		this.username = username;
		this.password = password;
		this.login = function () {
			console.log('用户登陆')
		}
	}

	function Admin() {
		this.selectUser = function () {
			console.log('查询用户信息');
		}
	}
	/*  8、原型链：因为原型是一个对象，所以一个对象有原型，而这个原型又可以继承其他对象作为它的原型，
	原型上有原型，原型上还有原型，无限原型，这就叫原型链*/
	Admin.prototype = new User();

	/*  9、调用方法：先在对象上找方法，找不到就往原型上找，再找不到就再往上个原型上找，
	一直住上找，直到找到最上边的(Object)原型为null为止，都找不到就报错。*/
	Object.prototype.name = 'Object';
	Object.prototype.login = function () {
		console.log('Object原型上的登陆方法');
	}

	let admin = new Admin();
	admin.login();
	//  10、所有对象的最上边的原型就是(Object)的原型，都可以调用其属性和方法
	let text = {};
	text.login();
	console.log(text.name);
</script>

</html>

7、学习视频来源：

【前端面试题：原型对象（三）原型继承与原型链-哔哩哔哩】

jasmine_qiqi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
什么是原型，什么是原型链
weixin_59519449的博客
04-12 472
每个原型对象中都有 prototype 属性，指向一个对象，这个对象就叫做原型或者原 型对象 每个对象都有__proto__，指向构造函数的原型对象，层层递进到 null 为止
什么是原型？什么是原型链？
a1016428360的博客
09-24 6914
1、什么是原型？ 任何对象实例都有一个原型，也叫原型对象，这个原型对象由对象的内置属性_proto_指向它的构造函数的 prototype 指向的对象，即任何对象都是由一个构造函数创建的，但是不是每一个对象都有 prototype，只有方法才有 prototype。 2、什么是原型链？ 原型链基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。我们知道，每个构造函数都有一个原型对象，每个原型对象都有一个指向构造函数的指针，而实例又包涵一个指向原型对象的内部指针。 ..
什么是原型与原型链
zz_LXW的博客
08-07 417
前言 此文参照了阮一峰大神在自己博客写的几篇关于JS继承原理的文章，在此直接放出连接： Javascript继承机制的设计思想 Javascript 面向对象编程（一）：封装 Javascript面向对象编程（二）：构造函数的继承 Javascript面向对象编程（三）：非构造函数的继承 JS一切皆是对象？ JS中一切皆是对象吗？这句话其实是错的，首先从设计语言上来考虑，如果一切皆是对象，那就...
什么是原型，什么是原型链? (面试题)
weixin_59519449的博客
11-08 800
每个原型对象中都有 prototype 属性，指向一个对象，这个对象就叫做原型或者原 型对象 每个对象都有__proto__，指向构造函数的原型对象，层层递进到 null 为止
【原型和原型链】什么是原型和原型链
热门推荐
沉迷学习 日渐消瘦
06-21 10万+
一、原型 ①所有引用类型都有一个__proto__(隐式原型)属性，属性值是一个普通的对象 ②所有函数都有一个prototype(原型)属性，属性值是一个普通的对象 ③所有引用类型的__proto__属性指向它构造函数的prototype var a = [1,2,3]; a.__proto__ === Array.prototype; // true 二、原型链 ...
详解JavaScript原型与原型链
01-21
了解JavaScript的继承与原型链之前首先需要了解JavaScript中对象创建的方式。 在JavaScript中创建对象 JavaScript中对象创建的方式有两种：工厂方法（Factory Functions）、构造器方法（Constructor Functions） 。 ...
JavaScript中的原型与原型链
01-08
在刚接触JavaScript的对象的时候，我的内心是懵逼的，什么原型、原型链，好像跟我之前学的其他语言的对象不太一样，今天我们就来好好捋一捋JavaScript中的原型与原型链。 在一般进行对象定义时，我们往往会首先定义...
JS原型与原型链的深入理解
10-20
主要和大家一起深入理解JS原型与原型链，原型是JavaScript中一个比较难理解的概念，本文为大家解决这个难题，感兴趣的小伙伴们可以参考一下
JavaScript原型及原型链终极详解
10-23
JavaScript中的原型和原型链是理解JavaScript继承机制的关键概念。在JavaScript中，每个对象都有一个内部属性`__proto__`，它链接到创建该对象的构造函数的原型对象。原型对象通常包含了可以被实例对象共享的方法和...
SCM供应链系统仿真原型
07-13
SCM（供应链管理）供应链系统仿真原型是一种模拟实际供应链流程的工具，用于理解...总的来说，SCM供应链系统仿真原型是理解和优化供应链管理的有效手段，它结合了理论与实践，为教育、研究和企业应用提供了宝贵的平台。
原型和原型链
Sunshine_GirlXue的博客
05-11 4080
一、什么是原型 原型：每一个javascript对象(除null外)创建的时候，都会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型中’继承’属性。 例如： var Obj=new Object(); 创建一个对象的时候都会同时关联一个对象，关联的这个对象就是新建的对象obj的原型 二、prototype 在Javascript中，每一个函数或者对象都有一个prototype属性，该属性指向函数的原型对象。 当用该函数构造出一些对象之后，这些对象也继承了原型对象上的属性 functio
什么是原型、原型链？原型和原型链的作用（有图方便理解）
weixin_42125732的博客
04-23 3万+
原型：JS声明构造函数(用来实例化对象的函数)时，会在内存中创建一个对应的对象，这个对象就是原函数的原型。构造函数默认有一个prototype属性，prototype的值指向函数的原型。同时原型中也有一个constructor属性，constructor的值指向函数对象。 通过构造函数实例化出来的对象，并不具有prototype属性，其默认有一个__proto__属性，__proto__的值指向构造函数的原型。在原型对象上添加或修改的属性，在所有实例化出的对象上都可共享。 /*代码基本架构 1.每个函数.
原型是什么？原型和原型链的一些心得体会
qq_31906983的博客
10-13 748
最近在复习原型，感觉有很多要重点对待的，对面向对象的理解很有帮助。遂记。 我的理解： 原型的主要作用：共享数据，节省空间！ 一、为什么要用原型？ 例如：有一个构造函数  Person ： function Person（name)  {  this.name = name; this.eat= function () { console.lo...
什么是原型、原型链、继承？
xiao___fang的博客
05-23 5160
prototype的概念： 每一个构造函数都有一个prototype属性，这个属性会在生成实例的时候，成为实例对象的原型对象。javascript的每个对象都继承另一个对象，后者称为“原型”对象。 prototype原型： ...
【原型和原型链】什么是原型和原型链（最清晰易懂）
qq_51066068的博客
04-14 7589
一、原型 ①所有引用类型都有一个__proto__(隐式原型)属性，属性值是一个普通的对象②所有函数都有一个prototype(原型)属性，属性值是一个普通的对象③所有引用类型的__proto__属性指向它构造函数的prototype var a = [1,2,3]; a.__proto__ === Array.prototype; // true 因为最终都指向得对象是Object：不理解接着往下看 prototype和constructor prototype属性，它是函数所独有的，它.
原型和原型链详解
taowuhua的博客
06-04 5831
原型和原型链怎么来的？ 1994年，网景公司（Netscape）发布了Navigator浏览器0.9版，但是刚开始的Js没有继承机制，更别提像同时期兴盛的C++和Java这样拥有面向对象的概念。在实际的开发过程中，构造函数内部的属性方法，每次new一个实例对象的时候，都会创建内部的这些属性和方法，并且不同的实例对象之间，不能共享这些方法，造成了资源的浪费。工程师们发现没有继承机制很难解决一些问题，必须有一种机制能将所有的对象关联起来。于是有了原型这个概念。 Brendan Eich鉴于以上情况，但不想把
原型及原型链详解
dyy_csdn的博客
02-28 3万+
每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么假如我们让原型对象等于另一个类型的实例，结果会怎样？显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立。如此层层递进，就构成了实例与原型的链条。这就是所谓的原型链的基本概念。——摘自《javascript高级程序设计》
Javascript学习笔记(prototype对象)
竹官阁
12-15 274
prototype 对象 来自《JavaScript 标准参考教程（alpha）》，by 阮一峰 目录 概述 构造函数的缺点 prototype 属性的作用 原型链 constructor 属性 instanceof 运算符 Object.getPrototypeOf() Object.setPrototypeOf() Object.create() O
知识总结：什么是原型、原型对象、原型链？原型链如何继承？如何访问原型对象上的属性？属性的访问规则是什么？如何设置原型对象的属性？
小草莓的博客
07-28 2049
1、隐式原型和显示原型JavaScript 的所有对象中都有一个原型，称为隐式原型（__proto__）。隐式原型指向构建出这个实例的类的显示原型（prototype）。this.major = '语文'Student.prototype.type = '学生'let student = new Student('小草莓')console.log('对象的隐式原型：student.__proto__', student.__proto__)
原型与原型链 详细一点
最新发布
07-15
原型和原型链是 JavaScript 中的重要概念，用于实现对象的继承和属性访问。 在 JavaScript 中，每个对象都有一个隐式的属性__proto__，它指向该对象的原型（prototype）。原型是一个普通的对象，它包含共享的属性和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

jasmine_qiqi

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

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

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

打赏作者

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

抵扣说明：

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

余额充值