JavaScript构造函数(new构造js对象与原型链prototype)

构造函数详解
  • 铺垫:面向对象编程
  • 一、构造函数是什么?
  • 二、构造函数的作用?
  • 三、构造函数的执行过程?
  • 四、构造函数的返回值?
  • 五、构造函数为什么要用new关键字调用?
  • 六、构造函数的实例成员和静态成员?
  • 七、内置构造函数?

铺垫:面向对象编程

1、面向对象编程的第一步,就是要生成对象
2、例如典型的面向对象编程语言C++、Java,存在“类”(class)这个概念:“类”就是“对象”的模板,“对象”就是“类”的实例
3、在js语言的对象体系中,不是基于“类”的,而是基于构造函数(constructor)原型链(prototype)的;

4、“对象”是单个实物的抽象,通常需要一个模板,表示某一类实物的共同特征,然后“对象”根据这个模板生成。
5、js语言中使用构造函数(constructor)作为一个生成对象的模板,可以以此生成多个对象,每个对象都有相同的结构

6、举例:生产10000辆颜色不同的汽车,就会先造一个汽车模子,然后再按照这个模子造出汽车基本雏形。那这个例子里面的汽车模子就是构造函数,每一辆汽车就是实例,构造函数生成的实例都有相同的结构,颜色可能有所不同。

一、构造函数是什么?

在js中,任何用new关键字来调用的函数,都叫做构造函数,一般首字母大写。(强调new关键字,见目录五)

/* 构造函数 */
function Person (name, age) {this.name = name // 属性、方法前必须加this,this表示当前运行时的对象this.age = agethis.say = function (word) {console.log('我是人')return word}
}

/* 实例对象 */
var per = new Person(‘Jack’, 16)

console.log(per) // Person {name: ‘Jack’, age: 10, say: f}
console.log(per.constructor) // f Person() {} // 构造函数原型
console.log(per.name) // Jack
console.log(per.age) // 10
console.log(per.say(‘我是高中生’)) // 我是高中生

二、构造函数的作用?

1、使用对象字面量创建一系列同一类型的对象时,这些对象可能具有一些相似的特征(属性)和行为(方法),降低代码冗余,提高代码复用率。
2、构造新对象,设置对象的属性和方法。

三、构造函数的执行过程?

示例代码

 function Person(name, gender, hobby) {this.name = name;this.gender = gender;this.hobby = hobby;this.age = 6;
}var p1 = new Person('Jack', 'male', 'basketball'); // 创建一个新的内存 #f1var p2 = new Person('Mary', 'female', 'dancing'); // 创建一个新的内存 #f2var p3 = new Person('Jane', 'female', 'singing'); // 创建一个新的内存 #f3

代码分析:构造函数执行过程
1、一开始,Person函数还不叫作构造函数,当使用 new 关键字调用Person函数时,Person函数才叫做 构造函数
2、以 new 关键字调用时,会创建一个新的 内存空间#f1 ,标记为 Person 的 实例
2、函数体内部的 this 指向该内存空间#f1
3、执行函数体内的代码:给 this 添加属性,就相当于给实例添加属性name、gender、hobby、age;
4、默认返回this:就相当于默认返回了该内存空间,也就是上图中的 #f1 等。此时,#f1的内存空间被变量p1所接受。也就是说 p1 这个变量,保存的内存地址就是 #f1,同时被标记为 Person 的实例。

四、构造函数的返回值?

1、没有return,默认返回this - 具体原因见目录三:执行过程

function Person1 (name) {this.name = name
}
var p1 = new Person1('Tom')
console.log(p1) // Person1 {name: 'Tom'}

2、return 基本数据类型,最终返回this

function Person2 (name) {this.name = namereturn 'zhangsan'
}
var p2 = new Person2('Jack')
console.log(p2) // Person2 {name: 'Jack'}

3、return 复杂数据类型(对象),返回该that对象,this对象被丢失

function Person3 (name) {this.name = namevar that = [1, 2, 3]return that
}
var p3 = new Person3('Jack')
console.log(p3) // [1, 2, 3]

五、构造函数为什么要用new关键字调用?

1、使用new关键字调用this对象指向构造函数生成的对象实例

function Person (name) {this.name = namethis.say = function () {return `I am ${this.name}`}
}
var p1 = new Person('Jack')
console.log(p1.say()) // I am Jack

伪代码:同目录三:执行过程
1、使用new关键字调用Person函数时,Person函数才被称为构造函数;
2、创建一个this变量,该变量指向一个空对象/#f1内存空间,并且该对象继承Person函数的原型;
3、属性和方法被加入到this引用的对象中;
4、隐式返回this对象(如果没有显性返回其他对象,见目录四构造函数的返回值)

// 伪代码:
function Person (name) {// 使用new关键字时,创建this变量,指向空对象var this = {} // 空对象/#f1内存空间// 属性和方法被加入到this引用的对象中this.name = namethis.say = function () {return `I am ${this.name}`}// 返回this对象return this
}

2、直接调用:this对象指向window,不会默认返回任何对象

var p2 = Person('Tom')
console.log(p2) // undefined
console.log(window.name) // Tom
console.log(window.say()) // I am Tom

六、构造函数的实例成员和静态成员?

/* 构造函数 */
/* 构造函数中,实例成员就是构造函数内部通过this添加的成员,name、age、say就是实例成员,实例化后可以访问的成员 */
/* 通过prototype添加的成员是实例成员,也就是只要是实例化的对象都可以访问到 */
function Person(name) {this.name = name // 实例成员this.say = function (word) { // 实例成员return word}
}
Person.height = '188' // 静态成员 - 在构造函数上添加的成员
Person.prototype.weight = '50kg' // 实例成员 - 在构造函数原型链上添加的成员
var p1 = new Person('Tom') // 实例化对象
Person.age = 20 // 静态成员
Person.prototype.married = true // 实例成员
/* 静态成员只能通过构造函数进行访问 */
console.log(p1.height) // undefined
console.log(p1.age) // undefined
console.log(Person.height) // '188'
console.log(Person.age) // 20
/* 实例成员只能通过实例对象进行访问 */
console.log(p1.name) // 'Tom'
console.log(p1.weight) // '50kg'
console.log(p1.married) // true
console.log(p1.say('我是大学生')) // '我是大学生'
console.log(Person.name) // Person
console.log(Person.weight) // undefined
console.log(Person.married) // undefined
console.log(Person.say('我是大学生')) // Uncaught TypeError: Person.say is not a function

七、内置构造函数?

Object、Array、String、Boolean、Number、Date等等
他们都可以使用new关键字生成实例:var xxx = new XXX();

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

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

相关文章

Windows搭建Lychee图片管理系统结合内网穿透实现公网访问本地图床

文章目录 1.前言2. Lychee网站搭建2.1. Lychee下载和安装2.2 Lychee网页测试2.3 cpolar的安装和注册 3.本地网页发布3.1 Cpolar云端设置3.2 Cpolar本地设置 4.公网访问测试5.结语 1.前言 图床作为图片集中存放的服务网站,可以看做是云存储的一部分,既可…

【机器学习】科学库使用第3篇:机器学习概述,学习目标【附代码文档】

机器学习(科学计算库)完整教程(附代码资料)主要内容讲述:机器学习(常用科学计算库的使用)基础定位、目标,机器学习概述定位,目标,学习目标,学习目标,1 人工智能应用场景,2 人工智能小…

计算机网络|谢希仁版|数据链路层

数据链路层 数据链路层研究的是什么?数据链路层的几个共同问题数据链路与链路帧通信规程 三个基本问题封装成帧透明传输差错检测可靠传输 点对点协议PPPPPP协议应满足的需求PPP协议的组成PPP协议帧的格式各字段的意义字节填充零比特填充PPP协议的工作状态 使用广播信…

三电源切换电路。

一个三电源切换电路 电路描述 1、Q1、Q2为NMOS,Q3、Q4和Q5为PMOS管,D1为二极管。 2、BAT1和BAT2为电池,BAT2的容量比BAT1大,VIN_5V为外部电源,VOUT为输出,给系统供电。 3、VOUT会从优先级高的电源取电&a…

黑盒测试—等价分类法

等价分类法是把程序的输入域划分成若干部分(子集),然后从每个部分中选取少数代表性数据作为测试用例。每一类的代表性数据在测试中的作用等价于这一类中的其他值。测试时把有效类与无效类相互组合,得到测试结果。 例题如下&#x…

【面试HOT200】数组篇

系列综述: 💞目的:本系列是个人整理为了秋招面试coding部分的,整理期间苛求每个算法题目,平衡可读性与代码性能(leetcode运行复杂度均打败80%以上)。 🥰来源:材料主要源于…

SDN、SDWAN、CDN、SDH 分别是什么?有什么关联?

SDN(Software Defined Networking)、 SD-WAN(Software Defined Wide Area Network)、CDN(Content Delivery Network)和SDH(Synchronous Digital Hierarchy)都是与网络技术相关的缩写…

视觉检测系统,外观细节无可挑剔

在传统行业中,利用人工检测来检测产品外观缺陷依然是主流,但由于竞争的加剧,对企业生产效率的要求也越来越高。传统的检测产品外观缺陷问题的方法就是透过人工目检,或者工人采用游标卡尺等工具检测,此种方式检测速度慢…

Taskflow:work-stealing-queue(二)

work-stealing-queue设计 每个线程使用动态数组作为准备调度的deque 来存放任务(也就是work-stealing-queue)每个线程各自维护这样一个deque,将该deque当作stack使用,自己线程内的deque只能通过push和pop访问栈底(bot…

振弦式应变计:简单操作,方便实用的应变监测工具

在现代工程领域中,对于结构物的应变监测是一项至关重要的任务。振弦式应变计作为一种高精度、高稳定性的应变监测工具,因其简单操作、方便实用的特点,受到了广大工程师和技术人员的青睐。 振弦式应变计的工作原理基于振弦的振动特性。它通过将…

HCIA笔记

console 登录设备的特点: 1、带外,不依赖网络本身的连通性。 2、独占,console口不能被多人同时使用,具备唯一性。 3、本地,console口长度有限,一般只能在机房或者设备现场来使用。 4、只能实现命令行的管理…

ngAlain下使用nz-select与文件上传框出现灵异bug

bug描述 初始化页面,文件上传框无法出现: 但点击一次选择框以后,就会出现: 真的很神奇。。。 下面逐步排查看看是什么原因。 设想一: 选择框与文件框不可同时存在,删掉选择框看看: 还…

隐语SecretFlow实训营-第8讲:快速上手隐语SCQL的开发实践

SCQL使用/集成实践 目前SCQL只开放API供用户使用/集成 使用SCDBClient上手体验可以基于SCQL API开发封装白屏产品,或集成到业务链路中 使用流程: 部署系统 环境配置: 机器配置:CPU/MEM最低8C16G机构之间的网络互通 镜像&…

全面了解海外网络专线

SD-WAN海外网络专线技术 在选择海外网络专线服务时,企业需要考虑多个因素,包括服务商的可靠性、价格、技术支持和合规性。本文将探讨跨境网络专线的价格因素、合法跨境上网的方式,以及SD-WAN跨境上网专线的优势。 跨境网络专线的价格与办理…

Java基础知识总结(35)

获取成员变量 Field getField(String name):返回此Class对象对应类的指定public Field。 Field[]getFields():返回此Class对象对应类的所有public Field。 public class Person { ​public int publicPerson1;protected int protectedPerson2;int def…

STM32学习笔记(11_2)- W25Q64简介和工作原理

无人问津也好,技不如人也罢,都应静下心来,去做该做的事。 最近在学STM32,所以也开贴记录一下主要内容,省的过目即忘。视频教程为江科大(改名江协科技),网站jiangxiekeji.com 本期学…

什么是ECMAScript

ECMAScript (缩写为ES) 是一种由 Ecma 国际组织标准化的脚本语言。它最初是为了在网页浏览器中提供动态交互功能而设计的,现在已经广泛应用于客户端和服务器端开发等各种领域。 ECMAScript 定义了语法、类型、语句、关键字和操作符等基本元素,还提供了许…

Golang Gin框架

1、这篇文章我们简要讨论一些Gin框架 主要是给大家一个基本概念 1、Gin主要是分为路由和中间件部分。 Gin底层使用的是net/http的逻辑,net/http主要是说,当来一个网络请求时,go func开启另一个协程去处理后续(类似epoll)。 然后主协程持续…

蓝桥杯物联网竞赛_STM32L071_15_ADC/脉冲模块

ADC模块用的是RP1不用多说了,主要是脉冲模块,这个模块没考过 这个脉冲模块放出脉冲,主要能用TIM捕获到这个脉冲的高电平持续时间即可 CubMx配置: 脉冲模块的引脚与PB0相连,所以用PB0读取上升沿记的数和下降沿记的数&am…

Day29|回溯算法part05:491.递增子序列、46.全排列、 47.全排列 II

491. 递增子序列 leetcode上本题叫做非递减子序列&#xff0c;点名序列存在重复元素的情况。 class Solution {private List<Integer> path new ArrayList<>();private List<List<Integer>> res new ArrayList<>();public List<List<I…