【JS 构造|原型|原型链|继承(圣杯模式)|ES6类语法】上篇

news2025/1/31 2:51:51

在这里插入图片描述

⌚️⌚️⌚️个人格言：时间是亳不留情的，它真使人在自己制造的镜子里照见自己的真相!
📖Git专栏：📑Git篇🔥🔥🔥
📖JavaScript专栏：📑js实用技巧篇，该专栏持续更新中🔥🔥🔥，目的是给大家分享一些常用实用技巧，同时巩固自己的基础，共同进步，欢迎前来交流👀👀👀
👉👉👉你的一键三连是对我的最大支持💙 💜 ❤️

文章目录

  • ✔️前言
  • 🉐内容
    • 📗 构造函数
    • 📗 原型
    • 📗原型链
  • 📕总结

✔️前言

❗️ ❗️ ❗️本篇系将带来JavaScript中的构造——原型——原型链——继承——ES6类语法系列知识完整讲解。 ❗️ ❗️ ❗️
❕上篇涉及：构造——原型——原型链
❕下篇涉及：继承——ES6类语法

🉐内容

📗 构造函数

  • 何为构造函数？

在JavaScript中，用new关键字来进行调用的函数称为构造函数，一般首字母要大写。例如：

function Person(name, sex, age) {
  this.name = name;
  this.sex = sex;
  this.age = age;
}
const p1 = new Person("张三", "男", 13);
console.log(p1);

输出：
在这里插入图片描述

  • 为何要使用构造函数？

使用对象字面量创建一系列同一类型的对象时，这些对象可能具有一些相似的特征(属性)和行为(方法)，此时会产生很多重复的代码，把这些重复性的特征和属性抽象出来，做成构造函数，可以实现代码复用。举个浅显的例子，比如要生产10000个不同的纸盒子，如果按照常规的方法，就需要手动裁10000次纸，画10000次图案，这样太费时费工，而且如果数量进一步扩大，会造成更大的麻烦。但是如果造一个机器，机器中有盒子的模型，在造盒子之前只需要将盒子的尺寸和图案当做参数输入进去，那么生产盒子的效率就会大幅提高，盒子生产出来之后里边装什么东西，再进行差异化处理就行，需要汉堡的时候放汉堡，需要放披萨的时候放披萨，各自使用就好。这里边这个机器就相当于构造函数，可以反复使用生产一些自带属性和特征的初始对象。

  • 实例成员和静态成员

实例成员： 实例属性和实例方法(原型方法)的统称

静态成员： 静态属性和静态方法的统称

静态方法：即构造函数.方法，例如，Math.random()、Number.parseInt()等

原型方法：即实例对象.方法，例如、Array.prototype.sort()、String.prototype.replace()等

//Person是一个构造函数
function Person(name, sex, age) {
  //构造函数中，实例成员就是构造函数内部通过this添加的成员，name、age、sayHello就是实例成员（即构造函数实例化的对象可以访问的成员）
  this.name = name;
  this.sex = sex;
  this.age = age;
  this.sayHello = function () {
    console.log("Hello!");
  };
}
//在构造函数上添加的成员就成为静态成员
Person.height = "175cm"; //静态属性
Person.sayGoodbye = function () {
  console.log("Goodbye!");
};//静态方法

//实例化对象
const p1 = new Person("张三", "男", 24);

//通过prototype添加的成员不是静态成员，是实例成员，也就是只有是实例化的对象才可以访问到
Person.prototype.weight = "70kg";
console.log(p1.weight); //70kg
console.log(Person.weight); //undefined

//静态成员只能通过构造函数进行访问
console.log(Person.height); //输出175
console.log(p1.height); //输出undefined
console.log(Person.sayGoodbye());//输出Goodbye!

//实例成员只能通过实例对象进行访问
console.log(p1.sex); //输出男
p1.sayHello(); //输出Hello!
console.log(Person.age); //输出undefined
Person.sayHello(); //报错，Person.sayHello is not a function

输出：
在这里插入图片描述

📗 原型

  • 原型要解决的问题
    在这里插入图片描述

上图中，通过构造函数可以创建一个用户对象，但这种做法有一个严重的缺陷，就是每个用户对象中都拥有一个sayHi方法，对于每个用户而言，sayHello方法是完全一样的，没必要为每个用户单独生成一个。而要解决这个问题，就必须弄清楚原型

  • 原型是如何解决的?
    在这里插入图片描述

  1. 原型

    每个函数都会自动附带一个属性prototype，这个属性的值是一个普通对象，称之为原型对象

  2. 实例

    instance，构造函数通过new产生的对象称之为实例。

    由于JS中所有对象都是通过new产生的，因此，严格来说，JS中所有对象都称之为实例

    //例：
const obj = {
a:'0',
b:'1',
c:'2'
}
//上面等价于var obj = new Object();

📌小提示：函数也是对象：

// function isOdd(value) {
//   return value % 2 !== 0;
// }

const isOdd = new Function("value", "return value % 2 !== 0");
console.log(isOdd);
console.log(isOdd(4));

输出：
在这里插入图片描述

  1. 隐式原型

    每个实例都拥有一个特殊的属性__proto__，称之为隐式原型，它指向构造函数的原型

  • 原型存在的意义？

当访问实例成员时，先找自身；如果不存在，会自动从隐式原型中寻找。这样一来，我们可以把那些公共成员，放到函数的原型中，即可被所有实例共享

在这里插入图片描述

📗原型链

  • 所有的对象都是通过new 函数的方式创建的
//创建一个构造函数User()
function User(firstname, lastname){
  this.firstname = firstname;
  this.lastname = lastname;
}

// 对象 u1 通过 new User 创建
var u1 = new User('李', '四'); 

// 对象 u2 通过 new Object 创建
var u2 = { 
  firstName: '张',
  lastName: '三'
}
// 等效于
var u2 = new Object(); 
u2.firstName = '张';
u2.lastName = '三';

上面的代码形成的原型图如下：
在这里插入图片描述
原型对象本身也是一个对象，默认情况下，是通过new Object创建的，因此，上面的两幅原型图是可以发生关联的
在这里插入图片描述

Object.prototype.__proto__比较特殊，它固定指向null

可以看出，u1的隐式原型形成了一个链条，称之为原型链。 当读取对象成员时，会先看对象自身是否有该成员，如果没有，就依次在其原型链上查找

  • 完整的原型链
    在这里插入图片描述

  • 示例：

    // toString方法属于Object.prototype，它会把对象转换为字符串的形式 [object Object]
// 这种格式并非每个对象想要的
// 1. 解释数组的toString为什么能得到不同的格式
// 2. 如果自己的构造函数希望改变toString，如何改变
var obj = {
  a: "a",
  b: "b",
};
console.log(obj.toString());

arr = [2, 3, 4, 5];
// var arr = new Array();
// arr = [2, 3, 4, 5]; //等效于此类创建数组
console.log(arr.toString()); //arr.toString() 不等于 Object.prototype.toString()
console.log(Object.prototype.toString.call(arr)); //toString

var fun = function () {};
console.log(fun.toString());
console.log(Object.prototype.toString.call(fun)); //此类方法在过去常用作判断该对象的类型

📌小提示：在实际开发中，若在原型上更改会产生很大的影响，即更改构造函数的原型会对所有原型链上有该构造函数的原型的对象产生影响

  • 学会利用原型链判断类型

  1. instanceof关键字【常用】

    object instanceof constructor
// 判断object的原型链中，是否存在构造函数(constructor)的原型

  2. Object.getPrototypeOf()【不常用】

    Object.getPrototypeOf(object);
// 返回object的隐式原型

例子：

// 真数组
var arr1 = [1, 2, 3]; 

// 类数组(伪数组)
var arr2 = {
  0:1,
  1:2,
  2:3,
  length: 3,
};

// 判断arr1和arr2是否是真数组
console.log(arr1 instanceof Array);
console.log(arr2 instanceof Array);

// console.log(Object.prototype.toString.call(arr1));//真数组
// console.log(Object.prototype.toString.call(arr2));//假数组
  • 学会创建空原型的对象

  1. 利用Object.create()

    Object.create(target);
// 返回一个新对象，新对象以target作为隐式原型

  2. 利用Object.setPrototypeOf()

    Object.setPrototypeOf(obj, prototype);
// 设置obj的隐式原型为prototype

例子：

// 下面演示创建一个没有隐式原型的用户对象，并随意添加一些属性

// var obj = Object.create(null);//创建一个新的对象（则不需要new），并且新对象的隐式原型为null，
// obj.a = 888;
// obj.b = 9;
// console.log(obj);

var obj1={
    a:'hello',
    b:66,
}
Object.setPrototypeOf(obj1,null);
console.log(obj1);

📕总结

js构造函数到原型及原型链的部分对初学者比较抽象，需要慢慢消化，特别是🉐原型链🉐哦！！！下篇为大家带来继承思想，以及经典的★圣杯模式★…👋👋👋
📢📢📢我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=26ueuv4ee1wkk

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

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

相关文章

腾讯地图api使用——地图选点自动定位到当前位置

腾讯地图api使用——地图选点自动定位到当前位置

WebService API | 腾讯位置服务 用户在使用腾讯地图api时，需先申请腾讯位置服务API Key，该key在调用时用于唯一标识开发者身份。 1.自动获取当前位置 引入以下js文件 https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js //获…
阅读更多...
FAST_LIO_SAM 融入后端优化的FASTLIO SLAM 系统 前端：FAST_LIO2 后端：LIO_SAM

FAST_LIO_SAM 融入后端优化的FASTLIO SLAM 系统 前端：FAST_LIO2 后端：LIO_SAM

FAST_LIO_SAM Front_end : fastlio2 Back_end : lio_sam Videos : FAST-LIO-SAM Bilibili_link Source code : FAST_LIO_SAM Related worked 1.FAST-LIO2为紧耦合的lio slam系统，因其缺乏前端，所以缺少全局一致性，参考lio_sam的后端部分&…
阅读更多...
Vue3 reactive丢失响应式问题

Vue3 reactive丢失响应式问题

问题描述&#xff1a;使用 reactive 定义的对象&#xff0c;重新赋值后失去了响应式&#xff0c;改变值视图不会发生变化。 测试代码&#xff1a; <template><div><p>{{ title }}</p><ul><li v-for"(item, index) in tableData" …
阅读更多...
【小程序】组件化开发的基本使用(一)

【小程序】组件化开发的基本使用(一)

文章目录小程序组件化开发基本使用小程序组件化思想自定义组件的过程组件样式实现细节小程序组件化开发基本使用 小程序组件化思想 组件插槽定义使用 小程序在刚刚推出时是不支持组件化的, 也是为人诟病的一个点&#xff1a; 但是从v1.6.3开始, 小程序开始支持自定义组件开发…
阅读更多...
如何创建一个简易的HTML网页框架

如何创建一个简易的HTML网页框架

背景&#xff1a; 在我们初步学习了web前端开发的一些知识时&#xff0c;我们可能会考虑构建一个简单的html网站&#xff0c;但是&#xff0c;如何着手去开始我们的网站&#xff0c;对于新手来说可能是个问题。 在这篇文章中&#xff0c;我将介绍我在构建一个简易的网页时&am…
阅读更多...
Vue2中使用axios的三种方法

Vue2中使用axios的三种方法

第一种 原始方法 直接在项目中使用(不建议使用) 这种方法最简单粗暴 优点&#xff1a;不需要做封装&#xff0c;不需要做配置傻瓜式操作&#xff0c;不需要做异步处理 缺点&#xff1a;代码太繁琐&#xff0c;当遇到请求过多的时候&#xff0c;这样写不适合读写 注意&#…
阅读更多...
使用videojs播放m3u8视频

使用videojs播放m3u8视频

vue3使用videojs 播放m3u8格式视频 videojs是一个播放视频的js库&#xff0c;可以通过videojs结合videojs-contrib-hls实播放m3u8格式视频。流媒体传输协议(hls)定义了用来控制播放的m3u8文件 m3u8是一个文本文件(播放列表文件)&#xff0c;里面的内容就是被播放的音视频文件路…
阅读更多...
vue3 - 组件注册和组件通信（setup语法糖）

vue3 - 组件注册和组件通信（setup语法糖）

这里介绍的是vue3中组件的注册和组件通信父传子&#xff0c;子传父。 前提&#xff1a;用的是vue3版本且使用了setup语法糖 <script setup> .....<script> 1&#xff0c;组件注册 1.1&#xff0c;全局注册&#xff1a; 全局注册需要在 在main.js中进行注册&#x…
阅读更多...
SpringBoot整合调用微信模板方法实现微信公众号消息通知推送，Java实现微信公众号给关注用户推送自定义消息通知（手把手从0到1）

SpringBoot整合调用微信模板方法实现微信公众号消息通知推送，Java实现微信公众号给关注用户推送自定义消息通知（手把手从0到1）

目录 概述 公众号给关注用户推送自定义消息 一、申请公众号模板消息 二、获取安装“web开发者工具” 三、微信网页授权说明 四、微信网页授权 - 流程时序图 五、HTTPClient 实现微信公众号消息推送与发布&#xff08;四步走&#xff09; 六、通过weixin-java-mp SDK实现…
阅读更多...
flex布局（弹性盒子一）

flex布局（弹性盒子一）

目录 一、弹性盒子的开启 二、弹性盒子的不同样式 1.flex-direction&#xff1a;子项目的排列方向 2.flex-wrap&#xff1a;子项目多行 3. flex-flow 是flex-direction和flex-wrap的一起指定&#xff08;简写&#xff09; 一、弹性盒子的开启 设置内容区的样式&#xff1a…
阅读更多...
Vue组件库实现按需引入可以这么做

Vue组件库实现按需引入可以这么做

本文为Varlet组件库源码主题阅读系列第七篇&#xff0c;读完本篇&#xff0c;可以了解到如何通过unplugin-vue-components插件来为你的组件库实现按需引入。 手动引入 前面的文章中我们介绍过Varlet组件库的打包流程&#xff0c;最后会打包成几种格式&#xff0c;其中module和…
阅读更多...
JavaScript对象

JavaScript对象

文章目录前言一、对象1.1什么是对象1.2为什么需要对象二、创建对象的三种方式1.利用字面量创建对象2.对象的调用2.1变量、属性、函数、方法总结3.利用new Object创建对象3.1利用构造函数创建对象4.new关键字总结前言 一、对象 1.1什么是对象 现实生活中&#xff1a;万物皆对象…
阅读更多...
vue-在组件中使用v-model

vue-在组件中使用v-model

一、使用场景 子组件想要使用父组件的值,又想去改父组件的值 二、V-Model的本质 1.给子组件的 value 传个变量 2.监听子组件的input事件,并且把传过来的值赋给父组件的变量 三、关键步骤 1. props 的使用 在自定义的 vue 文件中&#xff0c;声明父组件要向子组件传递的 pr…
阅读更多...
左右等高布局

左右等高布局

开篇概述 作为这个专栏的开篇&#xff0c;简单介绍一下开这个专栏的初衷。之前在团队中做代码 review 时&#xff0c;经常会发现一些不太“健壮”的 css 代码。这些不太“健壮”的 css 代码&#xff0c;当遇到一些特殊情况时&#xff0c;界面显示就有可能出现问题。其中&#…
阅读更多...
uniapp/vue虚拟列表，数据列表渲染优化

uniapp/vue虚拟列表，数据列表渲染优化

引言 相信大家经常会遇到展示一堆数据的需求&#xff0c;几十条数据还好&#xff0c;要是几百上千条&#xff0c;甚至带上了图片。那就会卡得不行。这时候就需要按需加载。 按需加载有懒加载和虚拟列表。 懒加载&#xff1a;通过JS滚动或触底触发事件来加载更多的数据&#…
阅读更多...
报错“Cannot read properties of null (reading ‘addEventListener‘)“

报错“Cannot read properties of null (reading ‘addEventListener‘)“

场景 控制台报错"Cannot read properties of null (reading addEventListener)" 错误原因 因为 JavaScript 中操作DOM元素的函数方法需要在 HTML 文档渲染完成后才可以使用&#xff0c;如果没有渲染完成&#xff0c;此时的 DOM 树是不完整的&#xff0c;这样在调用…
阅读更多...
css鼠标变成小手(css中鼠标悬停是为小手)

css鼠标变成小手(css中鼠标悬停是为小手)

CSS控制鼠标样式变换如何写代码呢&#xff1f; 代码&#xff1a;&#xff1a;p stylecursor: crosshair演示&#xff1a;定位指示/p如果需要将鼠标变换成帮助状态的时候。代码&#xff1a;p stylecursor: help演示&#xff1a;帮助/p当然这些只是一些常见的比较实用的代码。我们…
阅读更多...
前端实现可拖拽流程的js框架

前端实现可拖拽流程的js框架

1 AntV X6 是 AntV 旗下的图编辑引擎&#xff0c;提供了一系列开箱即用的交互组件和简单易用的节点定制能力&#xff0c;方便我们快速搭建 DAG 图、ER 图、流程图等应用。 XFlow是基于 X6 图编辑引擎、面向 React 技术栈用户的专业图编辑应用级解决方案, 帮助您轻松开发复杂的…
阅读更多...
前端使用print.js实现打印

前端使用print.js实现打印

前言 项目中经常会用到前端调用浏览器打印的功能&#xff0c;也经常会遇到一些问题&#xff0c;写这篇文章是为了更好的梳理一下相关内容。下面的内容基于vue。 如果需要用到前端生成二维码可以看我的这篇文章&#xff1a;在vue项目中使用qrcodesjs2生成二维码 注&#xff1a…
阅读更多...
【学姐面试宝典】—— 前端基础篇Ⅰ（HTTP/HTML/浏览器）

【学姐面试宝典】—— 前端基础篇Ⅰ（HTTP/HTML/浏览器）

前言 博主主页&#x1f449;&#x1f3fb;蜡笔雏田学代码 专栏链接&#x1f449;&#x1f3fb;【前端面试专栏】 今天开始学习前端面试题相关的知识&#xff01; 感兴趣的小伙伴一起来看看吧~&#x1f91e; 文章目录http 和 https 的基本概念http 和 https 的区别https 协议的工…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023