day24-JS进阶(构造函数,new实例化,原型对象,对象原型,原型继承,原型链)

目录

构造函数

深入对象

创建对象三种方式

构造函数

new实例化执行过程(important!)

实例成员&静态成员

实例对象&实例成员

静态成员

内置构造函数

基本包装类型

Object

Object.keys(obj)返回所有键组成的字符串数组

Object.values(obj)返回所有值组成的字符串数组

Object.assign(obj1,obj2)返回合并的对象

Array

数组常见核心实例方法

arr.forEach()

arr.filter()

arr.map()

arr.reduce(function(){}[, ])

数组常见其他实例方法

array.from(lis) 将伪数组转换为真数组

String

常见实例方法

Number

toFixed()四舍五入创建保留几位小数

关于小数的精度问题

编程思想

面向过程

面向对象

特性:

封装性

继承性

多态性

原型

原型

constructor属性

指向:

使用场景:

对象原型

作用:

原型继承

原型链

机制:

instanceof:


构造函数

深入对象

创建对象三种方式

其中之一是利用构造函数创建对象,因此构造函数主要作用→初始化对象。

构造函数

构造函数,主要作用就是用来创建对象的。

对于对象共同的属性(属性值可不同)和方法,则将其放入构造函数中创建。

构造函数一定不要忘记this,指向当前的实例对象,也就是说 谁new我了就指向谁。

new实例化执行过程(important!)

new会改变this的指向。

实例成员&静态成员
实例对象&实例成员

通过构造函数创建的对象→实例对象;

        实例对象结构相同但地址值不同,彼此独立且互不影响。

实例对象中的属性和方法→实例成员。

静态成员

内置构造函数

基本包装类型

        基本数据类型也有专门的构造函数。

Object
Object.keys(obj)返回所有键组成的字符串数组

        ()内部的参数,参数是谁就将对象丢进去.

Object.values(obj)返回所有值组成的字符串数组
Object.assign(obj1,obj2)返回合并的对象
Array
数组常见核心实例方法
arr.forEach()
arr.filter()
arr.map()

arr.reduce(function(){}[, ])

一般使用:

arr.reduce((prev,current) => prev+current,0)

数组常见其他实例方法

MDN看用法

array.from(lis) 将伪数组转换为真数组
String
常见实例方法

        将数组转化为字符串用的数组方法是join(‘分隔符’)

                这里的分隔符是指用什么符号来将字符串分隔

        将字符串转化为数组用的字符串方法是split(‘分隔符’)

                这里的分隔符是指按照字符串中已有的什么符号进行分隔

Number
toFixed()四舍五入创建保留几位小数

关于小数的精度问题

编程思想

面向过程

        步骤/过程划分

面向对象

        功能划分

特性:

封装性

js中通过构造函数来实现封装性,即共同的属性可以封装到构造函数中,若有共同的方法,则若也直接封装到构造函数中,则在多个实例化调用同一方法时则会造成内存的浪费。

→ 需要将方法放至构造函数的原型中

继承性
多态性

原型

原型

能够利用原型对象实现方法共享。

公共的属性写到构造函数上,公共的方法写到原型对象上。

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

constructor属性

指向:

constructor属性是构造函数的原型对象中的属性。

每个原型对象都有constructor属性。指向该原型对象的构造函数。

使用场景:

其指回来有何作用呢?有什么使用场景呢?

对象原型

作用:

        即实例对象与原型对象产生什么样的联系?

实例对象之所以能访问原型对象中的属性和方法 正是因有对象原型。

实例对象中的对象原型指向构造函数的原型对象

也正因其指向原型对象,因此对象原型__proto__中的constructor属性与原型对象的指向同,都是指向构造函数

__proto__是只读属性

原型继承

        若两个有共同属性/方法的构造函数想要继承共同属性/方法,若将共同属性和方法直接放至对象中会产生如下问题。

若在Woman.prototype上添加新方法,则也会相应地添加了Man.prototype中的方法。

因为上述赋值对象操作是赋值了对象的地址,更改其一就会使对象发生变化。

 

        因此构造函数想要原型继承,不可以直接将共同属性/方法放至一个固定对象中,否则将会产生上述问题,解决方案是→将共同属性和方法放至一个构造函数中,则每次new出来的对象地址不一样赋给Woman.prototype和Man.prototype中的地址也就不一样,因此修改任一个都不会对彼此产生影响。

原型链

机制:

原型链是面试的高频题。

        只要是对象都有对象原型。

        只要是原型对象都有constructor属性。

作用域链→变量的查找规则;原型链→也是一个查找规则。


最底下那条链是基于对象原型直接指向构造函数的原型对象,此外的链都是基于原型对象的继承。

基于原型对象的继承使得不同构造函数的原型对象关联在一起!

instanceof:

万物皆对象

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Nginx支持SNI证书,已经ssl_server_name的使用

整理了一些网上的资料,这里记录一下,供大家参考 什么是SNI? 传统的应用场景中,一台服务器对应一个IP地址,一个域名,使用一张包含了域名信息的证书。随着云计算技术的普及,在云中的虚拟机有了一…

RPC分布式网络通信框架项目

文章目录 对比单机聊天服务器、集群聊天服务器以及分布式聊天服务器RPC通信原理使用Protobuf做数据的序列化,相比较于json,有哪些优点?环境配置使用项目代码工程目录vscode远程开发Linux项目muduo网络库编程示例CMake构建项目集成编译环境Lin…

在Android中实现动态应用图标

在Android中实现动态应用图标 你可能已经遇到过那些能够完成一个神奇的技巧的应用程序——在你的生日时改变他们的应用图标,然后无缝切换回常规图标。这是一种引发你好奇心的功能,让你想知道,“他们到底是如何做到的?”。嗯&…

HTML 笔记 表格

1 表格基本语法 tr:table row th:table head 2 表格属性 2.1 基本属性 表格的基本属性是指表格的行、列和单元格但并不是每个表格的单元格大小都是统一的,所以需要设计者通过一些属性参数来修改表格的样子,让它们可以更更多样…

VR全景展示带来旅游新体验,助力旅游业发展!

引言: VR(虚拟现实)技术正以惊人的速度改变着各行各业,在旅游业中,VR全景展示也展现了其惊人的影响力,为景区带来了全新的宣传机会和游客体验。 一.什么是VR全景展示? VR全景展示是…

华硕平板k013me176cx线刷方法

1.下载adb刷机工具, 或者刷机精灵 2.下载刷机rom包 华硕asus k013 me176cx rom固件刷机包-CSDN博客 3.平板进入刷机界面 进入方法参考: ASUS (k013) ME176CX不进入系统恢复出厂设置的方法-CSDN博客 4.解压ME176C-CN-3_2_23_182.zip,把UL-K013-CN-3.2.…

软件测试面试之问——角色扮演

作为软件测试工程师,在求职面试中经常会被问到这样一个问题:你认为测试工程师在企业中扮演着什么样的角色呢? 某度百科是这样概括的:“软件测试工程师在一家软件企业中担当的是‘质量管理’角色,及时发现软件问题并及…

2.5 数字传输系统

笔记: 针对这一节的内容,我为您提供一个笔记的整理方法。将内容按重要性、逻辑关系进行组织,再进行简化。 ## 2.5 数字传输系统 ### 背景介绍: 1. **早期电话网**:市话局到用户采用双绞线电缆,长途干线采…

css的gap设置元素之间的间隔

在felx布局中可以使用gap来设置元素之间的间隔&#xff1b; .box{width: 800px;height: auto;border: 1px solid green;display: flex;flex-wrap: wrap;gap: 100px; } .inner{width: 200px;height: 200px;background-color: skyblue; } <div class"box"><…

【Unity】RenderFeature笔记

【Unity】RenderFeature笔记 RenderFeature是在urp中添加的额外渲染pass&#xff0c;并可以将这个pass插入到渲染列队中的任意位置。内置渲染管线中Graphics 的功能需要在RenderFeature里实现,常见的如DrawMesh和Blit ​ 可以实现的效果包括但不限于 后处理&#xff0c;可以编写…

访问控制、RBAC和ABAC模型

访问控制、RBAC和ABAC模型 访问控制 访问控制的目的是保护对象&#xff08;数据、服务、可执行应用该程序、网络设备或其他类型的信息技术&#xff09;不受未经授权的操作的影响。操作包括&#xff1a;发现、读取、创建、编辑、删除和执行等。 为实现访问控制&#xff0c; 计…

JavaScript系列从入门到精通系列第十六篇:JavaScript使用函数作为属性以及枚举对象中的属性

文章目录 前言 1&#xff1a;对象属性可以是函数 2&#xff1a;对象属性函数被称为方法 一&#xff1a;枚举对象中的属性 1&#xff1a;for...in 枚举对象中的属性 前言 1&#xff1a;对象属性可以是函数 对象的属性值可以是任何的数据类型&#xff0c;也可以是函数。 v…

linux系统中常见注册函数的使用方法

大家好&#xff0c;今天给大家分享一下&#xff0c;linux系统中常见的注册函数register_chrdev_region()、register_chrdev()、 alloc_chrdev_region()的使用方法​。 一、函数包含的头文件&#xff1a; 分配设备编号&#xff0c;注册设备与注销设备的函数均在fs.h中申明&…

mac文件为什么不能拖进U盘?

对于Mac用户来说&#xff0c;可能会遭遇一些烦恼&#xff0c;比如在试图将文件从Mac电脑拖入U盘时&#xff0c;却发现文件无法成功传输。这无疑给用户带来了很大的不便。那么&#xff0c;mac文件为什么不能拖进U盘&#xff0c;看完这篇你就知道了。 一、U盘的读写权限问题 如果…

[Python入门教程]01 Python开发环境搭建

Python开发环境搭建 本文介绍python开发环境的安装&#xff0c;使用anaconda做环境管理&#xff0c;VS code写代码。搭建开发环境是学习的第一步&#xff0c;本文将详细介绍anaconda和vs code的安装过程&#xff0c;并测试安装结果。 视频教程链接&#xff1a;https://www.bil…

localhost和127.0.0.1都可以访问项目,但是本地的外网IP不能访问

使用localhost和127.0.0.1都可以访问接口&#xff0c;比如&#xff1a; http://localhost:8080/zhgl/login/login-fy-list或者 http://127.0.0.1:8080/zhgl/login/login-fy-list返回json {"_code":10000,"_msg":"Success","_data":…

毛玻璃用户卡交互

效果展示 页面结构组成 从效果展示可以看到&#xff0c;此效果都是比较常规的。主要的核心就是卡片的悬停效果。 CSS 知识点 backdrop-filter 回顾transitiontransform 页面基础布局实现 <section><div class"container"><div class"card&q…

基于虚拟阻抗的下垂控制——孤岛双机并联Simulink仿真

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

回顾C++

大一的时候学过C&#xff0c;当时学得也不深&#xff0c;考试也是糊弄过去的&#xff0c;最近刷力扣的时候&#xff0c;决定一边刷题&#xff0c;一边复习和学习C&#xff0c;在此记录一些C的知识点。反正遇到一点就记录一点&#xff0c;会一直更新。

jwt的基本介绍

说出我的悲惨故事给大家乐呵乐呵&#xff1a;公司刚来了一个实习生&#xff0c;老板让他写几个接口给我&#xff0c;我页面还没画完呢。他就把接口给我了&#xff0c;我敲开心&#xff0c;第一次见这么高效率的后端。但我很快就笑不出来了。他似乎不知道HTTP通信是无状态的。他…