【JavaScript】原型链

news2024/11/17 9:50:58

文章目录

      • 构造函数
      • 原型
      • 对象访问机制
      • 内置构造函数
      • 一切皆对象
      • 原型链

构造函数

        - 本质还是一个函数
        - 和 new 关键字连用
        - 特点
                            1. 自动创建一个对象
                            2. 自动返回一个对象
                            3. 让函数的this指向这个对象 

        书写构造函数的时候
                            1. 属性写在函数内
                            2. 方法写在原型上

构造函数的不合理
把方法写在构造函数内的时候,随着实例增加,会额外创建很多一样的方法

原型

        💡  每一个 函数天生自带一个属性 prototype, 是一个对象
        💡   每一个 对象天生自带一个属性 __proto__, 指向所属的构造函数的原型 prototype

对象访问机制

            当访问一个对象的成员的时候,首先会在自己身上找
            如果没有,会自动找到自己的__proto__

原型 prototype
把公共的方法提取出来,在原型上书写,只用书写和创建一次
在JS中有若干内置构造函数
Object
Array
Date
RegExp
Function

function Person() { }

    // p1是一个实例对象, 是Person的实例对象
    // p1所属的构造函数 Person
    // p1的 __proto__ 指向 Person.prototype
    const p1 = new Person()
    console.log(p1.__proto__ === Person.prototype);

  /* 
      p1是一个实例化对象,Person是一个构造函数,p1所属的构造函数是Person 
      p1是一个对象,天生自带__proto__,所以p1.__proto__是小袋鼠的家也就等同于袋鼠妈妈的口袋.所以p1.__proto__是指向所属构造函数原型也就是Person.prototype,指向的意思是相等
      */

// 举一反三
			// 任何一个数组, 所属的构造函数是 Array
      // 任何一个对象, 所诉的构造函数是 Object

      function Array() {}
      function Object() {}
      let arr = new Array();
      let obj = new Object();
    	//都是全等的
      console.log(arr.__proto__ === Array.prototype);
      console.log(obj.__proto__ === Object.prototype);

内置构造函数

扩展方法
在内置构造函数的原型上扩展一个新方法, 所有的数组都可以使用这个方法
案例1: 给Array上的原型扩展一个方法, 返回数组里面的最大值

// 需求, 扩展一个方法, 返回数组里面的最大值
      Array.prototype.getMax = function () {
        // let max = Math.max(...arr);
        let max = Math.max(...this); //this指向arr
        return max;
      };

      let arr = [1, 2, 2, 2, 3, 400, 200, 300];
      console.log(arr.getMax());

案例2: 给Array上的原型扩展一个方法, 给数组去重

// 需求 扩展一个方法, 给数组去重
Array.prototype.noRepeat = function () {
  let newArr = [];
  arr.forEach((item) => {
    if (newArr.indexOf(item) == -1) {
      newArr.push(item);
    }
  });
  return newArr;
};


let arr = [1, 2, 2, 2, 3, 400, 200, 300];
console.log(arr.noRepeat());

现在我们来解决: 把公共的方法提取出来,在原型上书写,只用书写和创建一次, 这样所有的对象都可以使用

//使用内置构造函数原型创建新方法
Object.prototype.sing = function () {
  console.log("唱跳rap");
};

function Teacher() {}
// 之前的思路是直接给构造函数单独创建一个方法
// Teacher.prototype.sing = function () {
//         console.log("唱跳rap");
//       };

function Student() {}
// 之前的思路
// Student.prototype.sing = function () {
//         console.log("唱跳rap");
//       };

let t1 = new Object();
let s1 = new Object();

t1.sing();
s1.sing();
console.log(t1.sing());//这里打印会有undefined是因为打印的是函数的返回值,函数没有return
console.log(s1.sing());

小结: 之前的思路是直接给构造函数单独创建一个方法,这样每个构造函数都需要创建一个相同的方法会很麻烦,所以我们直接给内置的构造函数扩展一个方法,这样所有的对象都可以直接使用

一切皆对象

    对象
        - 一种数据结构  {name: 'tom' ,age : 18}
        - 一类内容中的一个真实个例
             属的构造函数就是Array
                     只要是 {} 所属的构造函数就是Object
                     只要是 function () {} 所属的构造函数就是Function

原型链

问题1 p.__proto__指向

function Person() {}
const p = new Person();
/* 
      问题1  p.__proto__指向
      每一个对象的__proto__指向所属构造函数的原型Person.prototype
       */
console.log(p.__proto__ === Person.prototype);
// console.log(typeof Person.prototype); //对象数据类型

问题2 Person.prototype.proto 指向哪里

function Person() {}
const p = new Person();
  /* 
      问题2 Person.prototype.__proto__ 指向哪里
      分析:
      1.这里将Person.prototype看做一个整体 是一个对象数据类型(原型概念)
      2.Person.prototype.__proto__ 指向所属构造函数的原型
      3.所属的构造函数是一个对象,所以指向Object.prototype
      */
      console.log(Person.prototype.__proto__ === Object.prototype);

问题3 Person.proto 指向哪里

function Person() {}
const p = new Person();
 /* 
      问题3 Person.__proto__ 指向哪里
      分析:
      1.Person.__proto__ 指向所属构造函数的原型
      2.所属构造函数是一个函数,所以指向Funciton.prototype
      */
      console.log(Person.__proto__ === Function.prototype);


问题4 Function.proto 指向哪里

function Person() {}
const p = new Person();
 /* 
     问题4 Function.__proto__ 指向哪里
      分析:
      1.Function.__proto__ 指向所属构造函数的原型
      2.所属构造函数是谁?  由于Function本身是一个构造函数,所以指向Function,这个比较特殊
      */
      console.log(Function.__proto__ === Function.prototype);
      


问题5 Object.proto 指向哪里

function Person() {}
const p = new Person();
 /* 
     问题5 Object.__proto__ 指向哪里
      分析:
      1.Object.__proto__ 指向所属构造函数的原型
      2.Object是一个内置构造函数,所以指向Function
      */
      console.log(Object.__proto__ === Function.prototype);


问题6 Function.prototype.proto 指向哪里

function Person() {}
const p = new Person();
  /* 
     问题6 Function.prototype.__proto__ 指向哪里
      分析:
      1.Function.prototype.__proto__指向所属构造函数的原型
      2.Function.prototype所属构造函数是Object
      */
      console.log(Function.prototype.__proto__ === Object.prototype);


问题7 Object.prototype.proto 指向哪里

function Person() {}
const p = new Person();
  /* 
     问题7 Object.prototype.__proto__ 指向哪里
     分析:
     1.Object.prototype 是顶级原型
     2.Object.prototype.__proto__ 指向null
      */
      console.log(Object.prototype.__proto__ === null);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/186324.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Android studio 护眼模式配置、字体大小设置、内存大小设置等各类疑难杂症

Android studio 4.1 1、左边目录栏颜色配置: 2、代码编辑区域背景色设置 3、控制台背景色设置 4、菜单栏、工具栏、左边栏字体大小设置 5、编码区字体大小设置 6、修改内存大小、显示内存 例如:修改android-studio/bin/studio.vmoptions studio64.vmop…

NANK南卡护眼台灯Pro评测,护眼台灯天花板般存在!

现代大环境下,生活节奏和压力的不断加快加重,如今的手机、电脑屏幕以及长时间的工作学习都会出现用眼过度的问题,久而久之,各种眼睛刺痛、干涩、肿胀等近视问题接踵而至。为了保障自己的健康,近些年,人们纷…

回归预测 | MATLAB实现SSA-CNN麻雀算法优化卷积神经网络多输入单输出

回归预测 | MATLAB实现SSA-CNN麻雀算法优化卷积神经网络多输入单输出 目录回归预测 | MATLAB实现SSA-CNN麻雀算法优化卷积神经网络多输入单输出预测效果基本介绍模型描述程序设计参考文献预测效果 基本介绍 MATLAB实现SSA-CNN麻雀算法优化卷积神经网络多输入单输出。 1 .data为…

基础课程11:调试工具

目标 有时事情不会按照预期进行,从总线(如果有的话)检索到的错误消息不能提供足够的信息。幸运的是,GStreamer附带了大量调试信息,这些信息通常会提示问题可能是什么。本教程展示了: 如何从GStreamer获取更多调试信息。 如何将自己的调试信…

电力电子器件简介

文章目录1、二极管2、BJT3、晶闸管(SCR)4、TRIAC5、GTO(全控器件)6、功率MOSFET(开关速度快、电压驱动更容易)7、IGBT8、总结![在这里插入图片描述](https://img-blog.csdnimg.cn/1d309b3d449040788c6437f8…

【胖虎的逆向之路】04——脱壳(一代壳)原理脱壳相关概念详解

【胖虎的逆向之路】04——脱壳(一代壳)原理&脱壳相关概念详解 【胖虎的逆向之路】01——动态加载和类加载机制详解 【胖虎的逆向之路】02——Android整体加壳原理详解&实现 【胖虎的逆向之路】03——Android一代壳脱壳办法&实操 文章目录【…

高速路如何避免ETC车辆漏计问题,ETC通道出入车辆校准看板

人群密集场所事故预防措施和应急管理方案的制定,对每一个交通枢纽和大型社会活动场所都显得尤为重要。对于交通管理部门来说,获取准确、可靠的交通数据已经变得越来越重要。 所以呢,ETC出入车辆校准看板是必要的。ETC出入车辆校准看板&#x…

如何使用路由策略解决 ISIS与OSPF双点双向产生的次优路径、环路隐患?

3.1.0 如何使用路由策略解决 ISIS与OSPF双点双向产生的次优路径、环路隐患 一、双点双向中的次优路径解决方法 双点双向中由于默认路由优先级造成次优路径的产生,而解决的方法就是修改路由优先级。 双点双向错误的解决方法 关于修改路由优先级,需要注…

2022 医疗卫生行业应急响应形势分析报告 脱敏板

声明 本文是学习2022医疗卫生行业网络安全分析报告. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 医疗卫生行业应急响应形势分析 2021年1-12月,奇安信集团安服团队共参与和处置全国范围内医疗卫生行业网络安全应急响应事件84起&#xf…

is not defined at HTMLInputElement.onclick

vue项目中一小部分功能想要使用原生的onclick 事件,发现报错Uncaught ReferenceError: 函数名 is not defined at HTMLInputElement.onclick搜索了相关blog,得出结论是onclick事件调用的方法必须是全局变量或者说是window的方法解决方法:将cl…

leetcode:43. 字符串相乘(附加一些C++string其他小练习)

目录 一.leetcode:43. 字符串相乘 1.问题描述 2.问题分析 3.问题求解 二. leetcode:541. 反转字符串 II 1.问题描述 2.题解 三. leetcode:125. 验证回文串 1.问题描述 2.双指针法求解 一.leetcode:43. 字符串相乘 43…

数据结构(括号匹配与表达式计算)

目录 括号配对 括号匹配算法 表达式计算 后缀式的计算 中缀式转后缀式 括号配对 编译器做语法检查的任务之一是检查符号是否配对,最简单的符号匹配问题是括号是否匹配,如开括号( 及{ 后面必须依次跟随相应的闭括号 }及 )。 如下段程序中的括号、引号…

谷歌竞价账户效果不好的原因?

很多外贸企业喜欢用谷歌竞价来推广自己的网站,提升自己的竞争力。是一种能很快看到效果的宣传方式。但是很多公司在谷歌竞价上投入了大量的资金,却收效甚微。为什么?下面我们来看看如何解决我们在google竞价推广中会遇到的一些问题。很多人在…

Linux的文件权限理解

目录 前言 1、用户、用户组、其他人 1.1用户、用户组、其他人之间的概念理解 1.2Linux系统中有用户身份与用户组记录的文件 2、Linux文件权限概念 第一列 第二列 第三列 第四列 第五列 第六列 第七列 Linux文件权限的重要性 3、Linux的目录与文件的权限意义 权限…

计算机图形学 第5章 二维变换与裁剪到Cohen-Sutherland直线裁剪算法

目录学习目标前驱知识规范化齐次坐标二维几何变换矩阵物体变换与坐标变换二维几何变换二维图形基本几何变换矩阵平移变换矩阵比例变换矩阵旋转变换矩阵反射变换矩阵错切变换矩阵二维仿射变换二维复合变换相对于任意方向的二维几何变换二维图形裁剪世界坐标系2.用户坐标系观察坐…

VSCode中设置Python语言自动格式化的方案

安装Python扩展 在VSCode的扩展(Externsions)中使用下面命令检索Python扩展 category:debuggers Python 打开一个Python文件,可以在VSCode的右下角看到运行环境。 安装PEP8 python3.10 -m pip install -U autopep8 安装Flake8 python3.10 …

上百个数字经济新场景 低代码完美搭建 实现项目落地

数字经济 自人类社会进入信息时代以来,数字技术的快速发展和广泛应用衍生出数字经济(Digital Economy)。与农耕时代的农业经济,以及工业时代的工业经济大有不同,数字经济是一种新的经济、新的动能,新的业态,其引发了社…

MicroBlaze系列教程(3):AXI_TIMER的使用

文章目录 @[toc]AXI_TIMER简介常用函数使用示例参考资料工程下载本文是Xilinx MicroBlaze系列教程的第3篇文章。 AXI_TIMER简介 AXI_TIMER支持两路可编程32位计数器,可以配置为中断、捕获、PWM模式,两个32位计数器可以级联为一个64位计数器。 IP核支持的最高频率: 常用…

nacos 服务发现获取列表源码分析

nacos 服务发现获取列表源码是注册中心最重要的技术点之一,其获取服务列表理论上是在首次接口调用时获取,有时候配置饥饿加载,即服务启动时就获取服务列表:今天我们从一个入口解析获取配置列表; 一、客户端源码 1、自动装配&…

推荐系统之推荐缓存服务

5.6 推荐缓存服务 学习目标 目标 无应用 无 5.6.1 待推荐结果的redis缓存 目的:对待推荐结果进行二级缓存,多级缓存减少数据库读取压力步骤: 1、获取redis结果,进行判断 如果redis有,读取需要推荐的文章数量放回&am…