【基础类】—原型链系统性知识

一、创建对象有几种方法

  1. 字面量创建对象
    1-1. 什么是字面量
    字面量就是所见即所,指的是常量;用来为变量赋值时的常数量
    代码例子:123;‘ABC’, {name: ‘张三’}, undefined , true
    生活例子:门店的招牌,手机号,身份证,排队号

1-2 字面量对象: 通过字面量的方式创建对象

let o1 = {name: '张三', age: 22}
// 生活例子: 一个叫张三的对象
  1. Object 方法创建对象
    2-1 Object方法将输入的参数转换为对象
    在这里插入图片描述
    ① null 和 undefined 返回空对象
    ② 数字返回数字类型的对象;字符串返回字符串类型对象;函数返回函数对象
    ③ 参数如果是对象,返回参数本身
    生活例子:Object方法类似于分类,你把任意物品给到某个人或机器,然后他会对物品分类,
    比如 给香蕉,水果:香蕉;菠菜, 蔬菜:菠菜,薯片,零食:薯片

2-2 Object 方法创建对象

let o2 = new Object({name: '菠菜'})
// 生活例子:一个名叫菠菜的对象
  1. 构造函数创建对象
    3-1 什么是构造函数
    用 new 关键字来调用的函数,称为构造函数。构造函数首字母一般大写
let M = function () {
    this.name ='243'
}
// 普通函数
console.log(M) 
ƒ () {
    this.name ='243'
}
// new M()构造函数 , 构造函数返回函数内部的对象,如果内部有定义属性,返回内部属性对象,如没有返回空对象
console.log(new M())
M {name: '243'}

3-2 用构造函数创建对象

let M = function () {
	this.name = '张三'
}
let o3 = new M()
o3
M {name: '张三'}
  1. Object.create创建一个新对象
    静态方法以一个现有对象作为原型,创建一个新对象
var P = {name: 'o4'}
var o4 = Object.create(P)
o4 
{}

二、原型、构造函数、实例、原型链

let M = function () {
   this.name = '张三'
}
let o3 = new M()

在这里插入图片描述

  1. 构造函数: 普通函数被new 使用后,就是构造函数, M就是构造函数
  2. 实例:实例是类的具象化产品,而对象是一个具有多种属性的内容结构,实例都是对象,而对象不全是实例。
  3. 构造函数可以通过 new运算符 生成一个实例,例如o3
  4. 构造函数也是函数,所有函数上都有prototype属性(函数声明时自动生成),构造函数的prototype属性指向原型对象(初始化空对象)
  5. 原型对象 的构造器 constructor 默认指向声明的构造函数,
M.prototype.constructor  === M
true
  1. 实例的__proto__属性指向原型对象,即构造函数的prototype属性
o3.__proto__===M1.prototype
true

在这里插入图片描述
7. 原型链:创建一个实例对象,通过实例对象的__proro__属性找创建实例的原型对象,一直往上找,直到找到构造函数Object的prototype属性指向的原型对象,原型链的顶点为null, 这个链条就是原型链

o5.__proto__.__proto__ === Object.prototype
true
o5.__proto__.__proto__.__proto__
// null
  1. 原型对象增加属性和方法,都可以被实例所继承,所以当多个实例有相同的方法就可以存在原型对象上
let M = function (name) {
	this.name = name
}
let o3 = new M()
M.prototype.say = function () {
    console.log('你好')
}
o3.say()
// 你好
  1. 构造函数的__proto__属性 等于 函数的原型对象
M.__proto__ === Function.prototype

三、instanceof的原理

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

// o3 是 M构造函数的一个实例
o3 instanceof M 
true
// o3 是原型链上构造函数的实例
o3 instanceof Object
true
// M的原型对象的__proto__ === Object的原型对象
M.prototype.__proto__ === Object.prototype
true

// o3的__proto__的构造器 === M,表示o3由M构造函数直接生成
o3.__proto__.constructor === M
true
// o3的__proto__的构造器 不等于Object,表示o3不是由Object 构造函数直接生成
o3.__proto__.constructor === Object
false

四、new运算符

new 运算符的工作原理:

let M = function (name) {
	this.name = name
}
let o3 = new M()
  1. new 的第一个步骤,一个新对象被创建
  2. 新对象继承构造函数的原型对象, var o3 = new M(), o3 继承 M.prototype 上的方法和属性
  3. 构造函数M被执行。 执行的时候,相应的参数会被传入,同时上下文(this)会被指定为这个新实例
    PS:当构造函数不传递参数时, new M 等同于 new M()
  4. 如果构造函数返回了一个对象,那么这个对象会取代整个new出来的结果。如果构造函数没有返回对象,那么new出来的结果为步骤1创建的对象(空对象)
var new2 = function (func) {
    // 步骤1和2
    var o =Object.create(func.prototype)
    // 步骤3 
    var k = func.call(o)
    // 步骤4
    if (typeof k === 'object') {
        return k
    } else {
        return o
    }
}

o6 = new2(M)
M {name: '张三'}
o6 instanceof M
true
o6 instanceof Object
true
o6.__proto__.constructor === M
true

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

[C++项目] Boost文档 站内搜索引擎(4): 搜索的相关接口的实现、线程安全的单例index接口、cppjieba分词库的使用、综合调试...

有关Boost文档搜索引擎的项目的前三篇文章, 已经分别介绍分析了: 项目背景: 🫦[C项目] Boost文档 站内搜索引擎(1): 项目背景介绍、相关技术栈、相关概念介绍…文档解析、处理模块parser的实现: 🫦[C项目] Boost文档 站内搜索引擎(2): 文档文本解析模块…

CDN(内容分发网络)

CDN的全称是 Content Delivery Network, 即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞&a…

CentOS7 安装 MongoDB5

MongoDB是一种NoSQL数据库,它存储数据的方式与传统的关系型数据库不同。MongoDB使用文档数据库模型,将数据存储在自包含的、可扩展的BSON文档中。MongoDB具有高可用性、自动分片、动态查询能力、灵活性等优点,适合于许多不同的应用场景。 下…

ACM Journals的Word模板使用心得

按照说明一步一步按照顺序调整格式,体力活,考验耐心细心。 两个模板,第一个是 Submission Template投稿用的,第二个是Primary Article Template接收后用的。 及时保存备份,以便恢复到最初满意的状态。 格式确定后&a…

EMC框架简单归纳

电磁干扰的产生原因&#xff1a;电压/电流的变化中不必要的部分。 电磁干扰的耦合途径有两种&#xff1a;导线传导和空间辐射。 导线传导干扰原因是电流总是走“最小阻抗”路径。以屏蔽线为例&#xff0c;低频&#xff08;f<1kHz&#xff09;时&#xff0c;导线的电阻起到主…

函数的递归与迭代

递归经典问题&#xff1a;&#xff08;自行尝试&#xff09; 1、汉诺塔问题 2、青蛙跳台阶问题 练习1、 练习2、

API HOOK技术在MFC程序破解过程中的应用

更新&#xff0c;修改了一下typora的上传脚本&#xff0c;把图片全部上传到看雪上了 本文已于2023-08-02首发于个人博客 图片加载不出来&#xff0c;放了一个PDF版本在附件里 文中有几张图片是动图&#xff0c;如果不会动&#xff0c;可以去我的个人博客看 最近破解了一个M…

W5500-EVB-PICO 做TCP Server进行回环测试(六)

前言 上一章我们用W5500-EVB-PICO开发板做TCP 客户端连接服务器进行数据回环测试&#xff0c;那么本章将用开发板做TCP服务器来进行数据回环测试。 TCP是什么&#xff1f;什么是TCP Server&#xff1f;能干什么&#xff1f; TCP (Transmission Control Protocol) 是一种面向连…

MYSQL进阶-查询优化- 实战 STATUS

回城传送–》《100天精通MYSQL从入门到就业》 文末有送书活动&#xff0c;可以参加&#xff01; 文章目录 一、练习题目二、SQL思路SQL进阶-查询优化- SHOW STATUS初始化数据解法SHOW STATUS是什么实战经验&#xff1a;常用的mysql状态查询1、QPS(每秒处理的请求数量)计算思路…

flutter相关URL schemes

先看效果 使用 url_launcher库 做唤起其他app操作 url_launcher | Flutter Package 配置 安卓 flutter 项目目录下的 android\app\src\main\AndroidManifest.xml 如果不配置的话 有些手机就打不开app <queries><!-- If your app checks for SMS support --><…

Web前端之NodeJS、Vue

文章目录 一、Babel转码器1.1 Babel安装流程1.2 Babel命令行转码 二、Promise对象三、测试方式四、Vue&#xff08;渐进式JS框架&#xff09;4.1 准备4.2 创建一个项目4.3 运行一个项目 五、模板语法5.1 文本5.2 原始html5.3 属性Attribute5.4 使用JavaScript表达式 六、条件渲…

禁止别人调试自己的前端页面代码

为啥要禁止&#xff1f; 由于前端页面会调用很多接口&#xff0c;有些接口会被别人爬虫分析&#xff0c;破解后获取数据 为了 杜绝 这种情况&#xff0c;最简单的方法就是禁止人家调试自己的前端代码 无限 debugger 前端页面防止调试的方法主要是通过不断 debugger 来疯狂输…

chatGPT应用于房地产行业

作为 2023 年的房地产专业人士&#xff0c;您无疑认识到技术对行业的重大影响。近年来&#xff0c;一项技术进步席卷了世界——人工智能。人工智能彻底改变了房地产业务的各个方面&#xff0c;从简化管理任务到增强客户互动。 在本文中&#xff0c;我们将探讨几种巧妙的人工智…

CEC2013(MATLAB):能量谷优化算法EVO求解CEC2013的28个函数

一、能量谷优化算法EVO 能量谷优化算法&#xff08;Energy valley optimizer&#xff0c;EVO&#xff09;是MahdiAzizi等人于2023年提出的一种新颖的元启发式算法&#xff0c;其灵感来自关于稳定性和不同粒子衰变模式的物理原理。能量谷优化算法&#xff08;Energy valley opt…

spss什么是描述性分析,以及如何去处理。

描述性分析是数据分析的第一步&#xff0c;是了解和认识数据基本特征和结构的方法&#xff0c;只有在完成了描述性统计分析&#xff0c;充分的了解和认识数据特征后&#xff0c;才能更好地开展后续更复杂的数据分析。因此&#xff0c;描述性分析是开展数据分析过程中最基础且必…

Idea添加mybatis的mapper文件模版

针对Java开发人员&#xff0c;各种框架的配置模版的确是需要随时保留一份&#xff0c;在使用的时候&#xff0c;方便复制粘贴&#xff0c;但是也依然不方便&#xff0c;我们可以给开发工具&#xff08;IDE&#xff09;中添加配置模版&#xff0c;这里我介绍下使用idea开发工具&…

高忆管理:今年来尚未有公司递表,香港SPAC市场为何“熄火”?

香港SPAC上市准则敞开之后&#xff0c;从第一家公司上市到现在已经有1年多的时刻。&#xff08;【深度】王石、李宁、卫哲争相发起建立SPAC&#xff0c;香港版“上市盲盒”会火吗&#xff1f; 界面新闻了解到&#xff0c;今年以来&#xff0c;香港SPAC并没有新动态&#xff0c;…

数据链路层 -帧结构

帧结构 802.3 有线网卡的帧格式802.11 无线网卡的帧格式 802是指一个国际标准委员会 IEEE 802 帧头主要包括三个部分&#xff1a; 目标MAC&#xff08;6个字节&#xff09;源MAC &#xff08;6个字节&#xff09;类型 &#xff08;包含两种类型&#xff1a;0x0800【IP协议】 …

麻省理工学院利用水泥和炭黑制造出超级电容器

麻省理工学院的研究人员展示了一种使用低成本水泥和炭黑的制造的超级电容器&#xff0c;这一发明可能会彻底颠覆可再生能源的存储。 ​为了解决太阳能、风能和潮汐能等间歇性和非周期性电源的普及问题&#xff0c;实用并且廉价的电力储存技术一直是重要的环节。MIT的研究人员最…

vue中全局状态存储 pinia和vuex对比 pinia比vuex更香 Pinia数据持久化及数据加密

前言 毕竟尤大佬都推荐使用pinia&#xff0c;支持vue2和vue3&#xff01; 如果熟悉vuex&#xff0c;花个把小时把pinia看一下&#xff0c;就不想用vuex了 支持选项式api和组合式api写法pinia没有mutations&#xff0c;只有&#xff1a;state、getters、actionspinia分模块不…