JavaSrcipt 函数高级

一  原型与原型链

prototype

每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象或者显示原型)

原型对象prototype中有一个属性constructor, 它指向函数对象

 function a(){}console.log(typeof a,typeof Date)console.log(a.prototype, Date.prototype)console.log(a.prototype.constructor === a,Date.prototype.constructor === Date)

 

 注意仅函数有

   let arr = []let obj = []console.log(arr.prototype) // undefinedconsole.log(obj.prototype) // undefined

可以给原型对象添加属性(一般都是方法)

能让后代拥有同样的方法

function F() {}F.prototype.age = 12; //添加属性F.prototype.setAge = function (age) {// 添加方法this.age = age;};// 创建函数的实例对象var f = new F();console.log(f.age);//12f.setAge(23);console.log(f.age);//23

显式原型与隐式原型

显式原型通常指的是通过构造函数来定义对象的原型。每个构造函数都有一个 prototype 属性,这个属性指向一个对象,用于设置通过该构造函数创建的实例对象的原型

function Person(name) {this.name = name;
}Person.prototype.sayHello = function() {console.log('Hello, ' + this.name);
};const person = new Person('Alice');
person.sayHello(); // Hello, Alice

隐式原型指的是通过实例对象访问的 __proto__ 属性。每个对象都有一个隐式原型,它指向该对象的构造函数的 prototype 属性。虽然 __proto__ 现在已经被标准化,但它不是官方推荐的访问方式(推荐使用 Object.getPrototypeOf())。

const person = new Person('Bob');
console.log(person.__proto__ === Person.prototype); // true

原型链

原型链是 JavaScript 实现继承的核心机制。它是通过对象的原型(prototype__proto__)属性形成的一种链式结构,用于实现属性和方法的继承与查找。

function A() {this.name = "A";
}A.prototype.sayHello = function () {console.log("Hello from A");
};function B() {this.age = 30;
}B.prototype = new A(); // B 的原型设置为 A 的实例,实现继承
B.prototype.constructor = B; // 修复 constructor 指向B.prototype.sayHi = function () {console.log("Hi from B");
};const b = new B();console.log(b.name); // "A" - 从 A 的原型链上找到
b.sayHello(); // "Hello from A" - 从 A 的原型链上找到
b.sayHi(); // "Hi from B" - B 自己的方法console.log(b.__proto__ === B.prototype); // true
console.log(B.prototype.__proto__ === A.prototype); // true
console.log(A.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__); // null

属性问题

读取会从原型链找,设置不会

 function Person(name, age) {this.name = name;this.age = age;}Person.prototype.setName = function (name) {this.name = name;}Person.prototype.sex = '男';var p1 = new Person('Tom', 12)p1.setName('Jack')console.log(p1.name, p1.age, p1.sex,111)p1.sex = '女'console.log(p1.name, p1.age, p1.sex,222)

instanceof 运算符

instanceof 是 JavaScript 中用于检查对象是否是某个构造函数的实例的运算符。它通过检查对象的原型链,判断某个对象是否继承自某个构造函数的 prototype

function A() {}
const a = new A();console.log(a instanceof A); // true
console.log(a instanceof Object); // true

二 闭包函数

理解闭包

如何产生闭包?

* 当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时, 外部函数调用,就产生了闭包

产生闭包的条件?

  • 函数嵌套
  • 内部函数引用了外部函数的数据(变量/函数)
  • 调用了外部的函数

常见的闭包

将函数作为另一个函数的返回值

function outerFunction() {let count = 0; // 局部变量return function innerFunction() {count++; // innerFunction 是闭包console.log(count);};
}const closureFunction = outerFunction();
closureFunction(); // 1
closureFunction(); // 2

将函数作为实参传递给另一个函数调用

 function showMsgDelay(msg, time) {setTimeout(function () {console.log(msg)}, time)}showMsgDelay('hello', 1000)//上面的代码中,闭包是里面的function,因为它是嵌套的子函数,而且引用了外部函数的变量msg。

 闭包的作用

(1). 使用函数内部的变量在函数执行完后, 仍然存活在内存中(延长了局部变量的生命周期)

(2). 让函数外部可以操作(读写)到函数内部的数据(变量/函数)

function fun1() {var a = 3;function fun2() {a++; //引用外部函数的变量--->产生闭包console.log(a);}return fun2;}var f = fun1(); //由于f引用着内部的函数-->内部函数以及闭包都没有成为垃圾对象f(); //间接操作了函数内部的局部变量f();

闭包的缺点

(1). 缺点

* 函数执行完后, 函数内的局部变量没有释放, 占用内存时间会变长

* 容易造成内存泄露

(2). 解决

* 能不用闭包就不用

* 及时释放

内存溢出与内存泄露

内存溢出

  •  一种程序运行出现的错误
  • 当程序运行需要的内存超过了剩余的内存时, 就出抛出内存溢出的错误

 内存泄露

  • 占用的内存没有及时释放
  • 内存泄露积累多了就容易导致内存溢出
  • 常见的内存泄露:
    • 意外的全局变量
    • 没有及时清理的事件回调函数
    • 闭包
    • 没有及时清理的定时器 setTimeout,setInterval
    • 大量循环打印控制台日志

 

三 递归函数

递归是函数的高级用法,本质上是函数自已调用自已,它的行为非常类似循环

递归函数的特性

(1). 重复执行

(2).调用自身

(3). 【必须】要有条件控制,避免死循环,如果递归函数没有条件控制,那么他就是死循环

递归本身是一种循环操作,简单情况下可以替换循环语句的使用

注意:递归慎用,能用循环解决的事情,尽量别用递归

// 递归函数 :在函数内部调用自己,通过条件控制避免死循环// 一直造成foo函数重复调用-- 死循环var i = 0;function foo() {if (i >= 3) return;//限制条件i++;console.log("递归函数");foo(); // 2.内部调用自己}foo(); // 1.外部调用// 递归三特性-- 重复执行 / 调用自身 / 条件控制避免死循环!

递归函数常用案例

斐波拉契数列

  <!-- 经典案例2:斐波拉契数列1,1,2,3,5,8,13,21,34,55,89...求第n项 --><script>//递归方法function fib(n) {if (n === 1 || n === 2) return n;return fib(n - 1) + fib(n - 2);}console.log(fib(10)); //34//非递归方法function fib(n) {var a = 0;var b = 1;var c = a + b;for (var i = 3; i < n; i++) {a = b;b = c;c = a + b;}return c;}console.log(fib(10)); //34</script>

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

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

相关文章

蓝桥杯每日真题 - 第17天

题目&#xff1a;&#xff08;最大数字&#xff09; 题目描述&#xff08;13届 C&C B组D题&#xff09; 题目分析&#xff1a; 操作规则&#xff1a; 1号操作&#xff1a;将数字加1&#xff08;如果该数字为9&#xff0c;变为0&#xff09;。 2号操作&#xff1a;将数字…

sysbench压测DM的高可用切换测试

一、配置集群 1. 配置svc.conf [rootlocalhost dm]# cat /etc/dm_svc.conf TIME_ZONE(480) LANGUAGE(CN)DM(192.168.112.139:5236,192.168.112.140:5236) [DM] LOGIN_MODE(1) SWITCH_TIME(300) SWITCH_INTERVAL(200)二、编译sysbench 2.1 配置环境变量 [dmdba~]# vi ~/.bas…

解决vue-pdf的签章不显示问题

在使用vue-pdf 4.3.0时发现上传一般的普通pdf正常预览&#xff0c;但是上传带有红头文件的和和特殊字体的pdf无法正常内容显示&#xff0c;文字丢失问题。 1、查看控制台报错信息 2、缺少字体原因 getNumPages(url) {var loadingTask pdf.createLoadingTask({url: url,//引入…

免费开源!DBdoctor推出开源版系统诊断工具systool

​前言 在开发和运维过程中&#xff0c;经常会遇到难以定位的应用问题&#xff0c;我们通常需要借助Linux系统资源监控工具来辅助诊断。然而&#xff0c;系统的IO、网络、CPU使用率以及文件句柄等信息通常需要通过多个独立的命令工具来获取。在没有部署如Prometheus这样的综合…

Redis基本的全局命令

在学习redis基本的全局命令之前呢&#xff0c;我们必须先进入redis-cli客户端才行。 如图&#xff1a; get和set get和set是redis两个最核心的命令。 get&#xff1a;根据key来获取value。 set&#xff1a;把key和value存储进去。 如set命令如图&#xff1a; 对于上述图中&…

招商蛇口|在低密园林里,开启生活的“任意门”

“最好的建筑是这样的&#xff0c;我们深处在其中,却不知道自然在哪里终了&#xff0c;艺术在哪里开始。” 凭借深耕西安10载的城市远见&#xff0c;以及建立在成功人居经验之上的敏锐洞察&#xff0c;招商蛇口将林语堂名言里的生活&#xff0c;变成了现实。 都市化越是加速&…

2024年亚太数学建模竞赛问题C宠物产业及相关产业发展分析与对策

随着人们消费理念的发展&#xff0c;随着经济的快速发展和人均收入的提高&#xff0c;宠物产业作为一个新兴产业在全球范围内逐渐积聚势头。1992年&#xff0c;中国小动物保护协会成立&#xff0c;随后1993年&#xff0c;皇家狗狗、玛氏等国际宠物品牌进入中国市场。随着“宠物…

嵌入式面试八股文(九)·FreeRTOS与Linux的区别与相同点、多进程与多线程的区别、为什么项目使用多线程

目录 1. FreeRTOS与Linux的区别与相同点 1.1 相同点 1.1.1 任务调度 1.1.2 多任务支持 1.1.3 内存管理 1.1.4 中断处理 1.1.5 同步机制 1.2 不同点 1.2.1 设计目标 1.2.2 实时性 1.2.3 内存管理 1.2.4 进程管理 1.2.5 多核支持 1.2.6 硬件支持 1.…

SpringBoot(8)-任务

目录 一、异步任务 二、定时任务 三、邮件任务 一、异步任务 使用场景&#xff1a;后端发送邮件需要时间&#xff0c;前端若响应不动会导致体验感不佳&#xff0c;一般会采用多线程的方式去处理这些任务&#xff0c;但每次都需要自己去手动编写多线程来实现 1、编写servic…

css:感觉稍微高级一点的布局

精灵图 有时候我们下载网页里的小元素图片的时候&#xff0c;就会一下子下载一大张&#xff0c;这就是精灵图&#xff0c;也叫雪碧图&#xff08;sprites&#xff09; 一个网页由很多图像作为修饰&#xff0c;当网页中图像过多时&#xff0c;服务器会频繁地解释和发送氢气图片…

docker安装zabbix +grafana

安装zabbix grafana 1、部署 mkdir -p /opt/zabbix/{data,backups}mkdir -p /opt/grafanasudo chown -R 472:472 /opt/grafanasudo chmod -R 755 /opt/grafanacat > docker-compose.yml <<-EOF version: 3.3services:mysql-server:image: mysql:8.1container_name: m…

什么是Hadoop

Hadoop 介绍 Hadoop 是由 Apache 开发的开源框架&#xff0c;用于处理分布式环境中的海量数据。Hadoop 使用 Java 编写&#xff0c;通过简单的编程模型允许在集群中进行大规模数据集的存储和计算。它具备高可靠性、容错性和扩展性。 分布式存储&#xff1a;Hadoop 支持跨集群…

六大核心应用场景,解锁AI检测系统的智能安全之道

AI检测系统基于深度学习、计算机视觉和多模态数据融合技术&#xff0c;广泛应用于工业、能源、制造等高风险作业领域&#xff0c;旨在实现作业安全、流程规范和效率提升的智能化管理。以下是系统主要应用场景的概述&#xff1a; 1. 高风险作业安全监控 应用场景&#xff1a;高压…

Verilog HDL可综合与不可综合语句

目录 什么是逻辑综合 可综合语句 不可综合语句 逻辑综合建模建议 综合流程 什么是逻辑综合 所谓逻辑综合就是在标准单元库和特定的设计约束的基础上&#xff0c;把设计的高层次描述转换成优化的门级网表的过程。 标准单元库&#xff08;工艺库&#xff09;可以包含简单的…

SpringBoot中设置超时30分钟自动删除元素的List和Map

简介 在 Spring Boot 中&#xff0c;你可以使用多种方法来实现自动删除超时元素的 List 或 Map。以下是两种常见的方式&#xff1a; 如果你需要简单的功能并且不介意引入外部依赖&#xff0c;可以选择 Guava Cache。如果你想要更灵活的控制&#xff0c;使用 Spring 的调度功能…

@RequestBody、@Data、@Validated、@Pattern(regexp=“?“)(复习)

目录 一、注解RequestBody。 二、注解Data。 三、注解Validated、Pattern(regexp"?")。 1、完成实体参数&#xff08;对象属性&#xff09;校验。 2、NotNull、NotEmpty、Email。 一、注解RequestBody。 &#xff08;如&#xff1a;JSON格式的数据——>Java对象&…

使用uniapp开发微信小程序使用uni_modules导致主包文件过大,无法发布的解决方法

在使用uniapp开发微信小程序时候&#xff0c;过多的引入uni_modules的组件库&#xff0c;会导致主包文件过大&#xff0c;导致无法上传微信小程序&#xff0c;主包要求大小不超过1.5MB.分包大小每个不能超过2M。 解决方法&#xff1a;分包。 1.对每个除了主页面navbar的页面进…

NVR录像机汇聚管理EasyNVR大华NVR管理平台:深耕视频监控市场的多元化兼容

在当今快速发展的视频监控行业中&#xff0c;技术的日新月异与设备种类的繁多给系统集成与运维带来了前所未有的挑战。为了应对这一现状&#xff0c;EasyNVR作为一款集视频流接收、转发、存储、管理于一体的综合型视频服务平台&#xff0c;凭借其深厚的技术积累和对市场的精准洞…

游戏行业趋势:“AI、出海、IP”大热下,如何提升竞争力?

游戏&#xff1a;新品供给影响业绩释放节奏&#xff0c;后续游戏新品逐步上线&#xff0c;或驱动板块业绩修复 2024年前三季度A股游戏板块实现营业收入681.8亿元&#xff0c;同比增长5.1%&#xff0c;实现归母净利润73.3亿元&#xff0c;同比下滑30.4%&#xff0c;或主要受 20…

【vba源码】导入excel批注信息

Hi&#xff0c;大家好呀&#xff01; 又到了一周一分享的时间&#xff0c;上周繁忙的我都没有给大家直播&#xff0c;视频也没更新&#xff0c;那这周大家放心&#xff0c;都会给大家更新&#xff0c;今天我们来讲点啥呢&#xff1f;每周找优质的内容给大家更新是我最最痛苦的…