JS 原型和原型链

已于 2024-08-03 00:56:12 修改
阅读量643 收藏 16
点赞数 26
分类专栏： JavaScript 文章标签： javascript
于 2024-08-02 16:53:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yavlgloss/article/details/140872837
版权

构造函数

封装是面向对象思想中比较重要的一部分，js 面向对象可以通过构造函数实现的封装。

  • 同样的将变量和函数组合到了一起并能通过 this 实现数据的共享，所不同的是 JS 借助构造函数创建出来的实例对象之间是彼此不影响的

在这里插入图片描述

  • 存在浪费内存的问题，我们希望所有的对象使用同一个函数，这样就比较节省内存，那么我们要怎样做呢?
    在这里插入图片描述

原型

1、prototype

目标：能够利用原型对象实现方法共享

  • 构造函数通过原型分配的函数是所有对象所 共享的。

  • JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象，所以我们也称为原型对象

  • 这个对象可以挂载函数，对象实例化不会多次创建原型上函数，节约内存

  • 我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法。

  • 构造函数和原型对象中的this 都指向 实例化的对象

  • 注意：这里不可以使用箭头函数，因为箭头函数的this指向上一层

应用

举例【 我们可以把那些不变的方法，直接定义在 prototype 对象上】

 // 我们可以把那些不变的方法，直接定义在 prototype 对象上
  function Star(uname, age) {
    this.uname = uname
    this.age = age
  }
  Star.prototype.sing = function() {
    console.log(唱歌)
  }

  const ldh = new Star('刘德华',55)
  const zxy = new Star('张学友',58)
  console.log(ldh.sing === zxy.sing); //true

【构造函数和原型对象中的this 都指向 实例化的对象】

 let that
  function Star(uname) {
    that = this
    this.uname = uname
  }
  let that2
  Star.prototype.sing = function() {
    that2 = this
    console.log('唱歌');
  }
  // 构造函数中的this指向实例化对象
  const ldh = new Star('刘德华')
  console.log(that === ldh) // true
  
  // 原型对象中的this指向实例化对象
  ldh.sing()
  console.log(that2 === ldh) // true

①：给数组扩展求最大值方法和求和方法

比如： 以前学过 const arr = [1,2,3]。arr.reverse() 结果是 [3,2,1]

扩展完毕之后：arr.sum() 返回的结果是 6

  // 求最大值
  Array.prototype.max = function() {
    return Math.max(...this) // 展开运算符
  }
  Array.prototype.min = function() {
    return Math.min(...this) // 展开运算符
  }
  Array.prototype.sum = function() {
    return this.reduce( (prev,item)=> prev + item,0)
  }

  const arr = new Array(1,2,3) // 数组实例化
  console.log(arr);

  console.log(arr.max());
  console.log(arr.min());
  console.log(arr.sum());

2、constructor 属性

每个原型对象 prototype 里面都有个constructor 属性（constructor 构造函数）

作用： 该属性指向该原型对象的构造函数， 简单理解，就是指向我的爸爸，我是有爸爸的孩子

在这里插入图片描述

  function Star() {
  }
  const ldh = new Star()
  console.log(Star.prototype.constructor === Star); // true

constructor 的具体作用讲解：

  // 背景需求：我们在原型中添加函数的时候，有可能需要一次性加很多个。
  function Star2() {
  }

  // Star2.prototype.sing = function() {
  //   console.log('唱歌');
  // }
  // Star2.prototype.dance = function() {
  //   console.log('跳舞');
  // }
  console.log(Star2.prototype); // {constructor: ƒ}
  console.log(Star2.prototype.constructor); //ƒ Star2() {}

  // 我们想到或许可以用这种方法添加函数：
  Star2.prototype = {
    sing: function() {
      console.log('唱歌');
    },
    dance: function() {
      console.log('跳舞');
    }
  }
  console.log(Star2.prototype); //{sing: ƒ, dance: ƒ}
  console.log(Star2.prototype.constructor); // ƒ Object() { [native code] }

  // 但是这种方式出现了问题，这样子的prototype是赋值，不是追加。
  // 原型失去了原本的constructor

// 解决方法是 加一条constructor: Star 重新指回去。这就是加一条constructor的用处
  Star2.prototype = {
    constructor: Star,
    sing: function() {
      console.log('唱歌');
    },
    dance: function() {
      console.log('跳舞');
    }
  }
  console.log(Star2.prototype); // {sing: ƒ, dance: ƒ}
  console.log(Star2.prototype.constructor); // ƒ Star2() {}

3、对象原型

在这里插入图片描述
对象都会有一个属性 __proto__指向构造函数的 prototype 原型对象，之所以我们对象可以使用构造函数 prototype 原型对象的属性和方法，就是因为对象有 __proto__ 原型的存在。

在这里插入图片描述
__proto__对象原型里面也有一个 constructor属性，指向创建该实例对象的构造函数

  function Star() {}
  const ldh = new Star()
  console.log(ldh);
  // 当前实例对象指向哪个原型对象prototype
  console.log(ldh.__proto__ === Star.prototype); //true
  
  // __proto__对象原型里面也有一个 constructor属性，指向创建该实例对象的构造函数
  console.log(ldh.__proto__.constructor === Star); //true

构造函数、实例对象、原型的关系

先有构造函数 function Star。用户通过 new Star，创建实例对象。构造函数 Star中 有属性：prototype原型（因为原型是一个对象，所以也叫作原型对象）。

实例对象 new Star()中：

实例对象有一个属性__proto__（对象原型）指向构造函数的 prototype属性（原型对象）。

实例对象的__proto__.constructor指回构造函数 Star。

原型对象prototype中：

constructor指回构造函数 Star。

在这里插入图片描述

  • 练习
  1. prototype是什么？哪里来的？

原型（原型对象）

构造函数都自动有原型

  1. constructor属性在哪里？作用干啥的？

prototype原型和对象原型__proto__里面都有

都指向创建实例对象/原型的构造函数

  1. __proto__属性在哪里？指向谁？

在实例对象里面

指向原型 prototype

在这里插入图片描述

4、原型继承

继承是面向对象编程的另一个特征，通过继承进一步提升代码封装的程度，JavaScript 中大多是借助原型对象实现继承的特性。

说明：

有女人构造函数Women、男人构造函数Men。

  function Women() {
    this.eyes = 2
    this.head = 1
  }
  const red = new Women()
  console.log(red);


  function Men() {
    this.eyes = 2
    this.head = 1
  }
  const black = new Men()
  console.log(black);

因为构造函数中的属性都是一样，所以可以提取一个Person

  const Person = {
    eyes = 2
    head = 1
  }
  function Women() {}
  function Man() {}

  Women.prototype = Person // 通过原型继承
  Women.prototype.constructor = Women //  补充一个指回

  Man.prototype = Person
  Man.prototype.constructor = Man


  const red = new Women()
  console.log(red);
  const black = new Man()
  console.log(black);

通过原型继承

现在想要给女人增加一个生孩子函数 baby

Women.prototype.baby = function { console.log('生孩子')}

console.log(red);
console.log(black);

结果发现男人也能生孩子。这是因为两者都继承了同一个对象Person

所以通过 Women.prototype = Person 和 Man.prototype = Person 这种继承是不合理的

所以可以通过构造函数 new对象，而不是const 生成对象

function Person() {
    this.eyes = 2
    this.head = 1
}
function Women() {}
function Man() {}

Women.prototype = new Person() // 通过原型继承
Women.prototype.constructor = Women //  补充一个指回

Man.prototype = new Person()
Man.prototype.constructor = Man

//实例验证
Women.prototype.baby = function() {
  console.log('baby')
}
const red = new Women()
console.log(red);
const black = new Man()
console.log(black);

在这里插入图片描述

5、原型链

__proto__属性的链状结构

基于原型对象的继承使得不同构造函数的原型对象关联在一起，并且这种关联的关系是一种链状的结构，我们将原型对象的链状结构关系称为原型链

在这里插入图片描述

  • 举例说明
  // function Object() {

  // }

  function Person() {

  }
  const ldh = new Person()

  // 构造函数Person 有prototype(原型)
  console.log(Person.prototype); 
  console.log(Person.prototype.__proto__ === Object.prototype);  // true

  //【前提】：每一个构造函数都有原型，每一个对象都有__proto_属性

  // Person是我们定义的构造函数，构造函数Person 有prototype(原型)
  // 【Person.prototype】是一个对象，每个对象里面都有一个__PROTO__，
  // Person.prototype.__PROTO__指向 "构造出【Person.prototype】这个对象的构造函数 的prototype "  
  // 有一个最大构造函数 Objct，这个构造函数构造出 Person.prototype 
  // 因此，Person.prototype.__PROTO__指向Object 的prototype

原型对象(也就是一个对象实例)，指向 构造出这个对象的构造函数(function) 的prototype
原型对象

在这里插入图片描述

查找规则

__proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线

查找规则如下：

① 当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。

② 如果没有就查找它的原型（也就是 __proto__指向的 prototype 原型对象）

③ 如果还没有就查找原型对象的原型（Object的原型对象）

④ 依此类推一直找到 Object 为止（null）

⑤ __proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线

⑥ 可以使用 instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上

const arr = [1,2,3] // arr是对象 相当于 const arr = new Array(1,2,3)
arr.map(function() {
  // 略
})

1、当访问 arr 的方法 map 时，首先查找这个对象自身有没有该属性。
发现没有
2、查找 arr 的原型（也就是 arr.__proto__指向的 prototype 原型对象）
该prototype 原型对象 属于 构造函数 Array的原型，找到了
  • instance of
  const zxy = new Person()
  console.log(zxy instanceof Person); // zxy 属于 Person 吗 : true
  console.log(zxy instanceof Object); // zxy 属于 Object 吗 : true
  console.log(zxy instanceof Array);  // zxy 属于 Array 吗 :  false
  console.log(Array instanceof Object); // true

小结 原型和原型链

1．原型：函数都有prototype属性，称之为原型，也称为原型对象
原型可以放一些属性和方法，共享给实例对象使用
原型可以做继承
2．原型链：查找一个对象的属性和方法的时候，先在自身找，找不到则沿着__proto__向上查找，我们把__proto__形成的链条关系称原型链

__proto__属性是每一个对象以及函数都有的一个属性。__proto__属性指向的是创建他的构造函数的prototype。原型链就是通过这个属性构件的。

aPurpleBerry
关注
  • 26
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS中的原型和原型链（图解）
qq_36996271的博客
09-09 5万+
JS中的原型和原型链 讲原型的时候，我们应该先要记住以下几个要点，这几个要点是理解原型的关键： 1、所有的引用类型（数组、函数、对象）可以自由扩展属性（除null以外）。 2、所有的引用类型都有一个’_ _ proto_ _’属性(也叫隐式原型，它是一个普通的对象)。 3、所有的函数都有一个’prototype’属性(这也叫显式原型，它也是一个普通的对象)。 ...
对js原型和原型链的理解
qq_45770253的博客
08-11 3244
       学习到 JavaScript 原型这个地方的时候，最开始是比较懵的状态，今天早上起来看了下红宝书中对于原型的解释，慢慢的也就有了些了解，但是解释的比较官方。接下来，我会把自己的理解分享下来，尽量用通俗易懂的话来描述。如果有什么不对的地方，希望大家指正。 1、原型 1.1 prototype        JavaScript 中，当我们创建一个函数的时候
JavaScript原型和原型链（详细解读）
程麒阁的博客
04-09 7971
原型和原型链 一、原型概述 1.概念 原型在JavaScript是一个很重要的概念，它是面向对象可以继承的基础。知道吗，JavaScript的设计模式就是原型模式（二十三个经典设计模式之一），正是因为它有这个模式，所以它才十分的灵活。可以基于原型模式实现更多的面向对象设计模式。 二、原型链 1.什么是原型链？ 原型链是原型的查找机制，是一条寻址链。其实原型上的方法或属性查找，都是按照一定的顺序沿着原型链进行查找的。如果查找到最后仍然没有找到这个原型和方法，那么JS就会抛出没有这个属性或方法的异常。 2.什么
JS：原型和原型链
elevenhope的博客
02-11 4557
一、原型 原型：每当定义一个对象（函数也是对象）时，就会生成一个__proto__属性，被称为隐式原型；这个__proto__属性指向的是这个对象的构造函数的prototype，被称为显式原型。每一个对象都会从原型中“继承”属性。 首先看一个例子，创建一个Student类，并创建类的实例对象student： class Student{ constructor(name, score) { this.name = name; this.score = score;
JS原型和原型链最详解（附图）
苟日新 日日新 又日新
07-28 1029
JS原型最详解，原型链、原型和原型对象。
js 原型与原型链
似水流年QC的博客
03-27 717
对象的作用在于，当访问一个对象的属性或方法时，如果该对象内部不存在这个属性，那么就会从它的 __proto__ 属性所指向的（原型）对象中寻找（原型也是对象，也有它自己的原型），如果原型对象中也找不到，就会继续在该原型对象的原型对象中找，以此类推，直到找到属性或方法为止，或者查找到顶层原型对象 null，就结束查找，返回 undefined。在 JavaScript 中的对象中都有一个 __proto__ 属性，从上图可以看出一个对象指向另一个对象，即指向相对应的对象的原型对象。
JS原型和原型链详解
Zhang_wang_yun的博客
04-07 1327
原型是Javascript中的继承的基础，JavaScript的继承就是基于原型的继承。说到原型会涉及两个概念：构造函数、原型对象。
深入理解javascript原型和原型链
猫老板的豆
03-11 1558
prototype（原型）下面的就是原型（也叫显式原型），它是一个对象，我们也称它为原型对象。Person.prototype.say = function () { // 通过原型添加方法// 原型对象say: ƒ(), // 原型上共享的方法，不会反复开辟存储空间，减少内存浪费。上面这个对象，就是大家常说的原型对象。
js 原型和原型链
qq_42744920的博客
04-27 1445
一、前言 今天我们来学习老生常谈的两个问题：原型以及原型链； 首先，来看一段代码： class Student{ constructor(name,age){ this.name = name; this.age = age; } introduce(){ console.log(`我是${this.name}，年龄${this.age}岁`)； } } const student = new Student('zhangsan',18); console.log(stud
js原型和原型链以及原型继承
weixin_71601024的博客
08-10 179
一、原型对象 所有函数都有原型对象 1.可以通过构造函数访问原型对象 prototype ---存放公共方法 2.可以通过实例对象访问原型对象 __proto__ ---存放公共方法
javascript原型和原型链
01-08
一、原型规则 1、所有的引用类型（数组、对象、函数）都具有对象特性，即可自由扩展属性（除了“null”） var array=[];array.a=1; var object={};object.a=1; function func(){}; func.a=1; 2、所有的引用类型...
图解JS原型和原型链实现原理
10-14
JavaScript中的原型和原型链是其继承机制的核心，理解这两者对于深入学习JS至关重要。本文将通过详细的图解和实例代码，帮助你理解这两个概念及其实现原理。 首先，我们需要明白JavaScript的发展背景。JavaScript...
JS原型和原型链原理与用法实例详解
11-21
本文实例讲述了JS原型和原型链原理与用法。分享给大家供大家参考，具体如下： Javascript语言的继承机制一直很难被人理解。 它没有”子类”和”父类”的概念，也没有”类”（class）和”实例”（instance）的区分，...
一篇文章让你搞懂JavaScript 原型和原型链
01-22
原型和原型链作为深入学习JavaScript最重要的概念之一，如果掌握它了后，弄清楚例如：JavaScript的继承，new关键字的原来、封装及优化等概念将变得不在话下，那么下面我们开始关于原型和原型链的介绍。 什么是原型？...
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 273
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 206
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 872
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
【Vue3】自定义组件
又言又语
07-30 429
本文介绍 Vue3 中如何自定义组件。页面组件：用于构建独立页面，通常存放在src/pages或src/views目录下。功能组件：将页面中一些独立的功能封装成独立组件，譬如：分页组件、日期时间组件等。功能组件通常存放在目录下。本文主要说明如何自定义功能组件。
vite静态资源处理，处理vite项目中src和url路径问题
最新发布
WanweI897的博客
08-02 251
处理vite项目中src和url路径问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值