06—js函数(构造函数,原型,原型链。。。。。。)

一、初识函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

通过函数可以封装任意多条语句,而且可以在任何地方,任何时间进行调用和执行

二、创建函数

(1)function命令, 使用关键词 function来声明函数

注:关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。

  • 被提前

变量的声明被提前:使用var关键字声明的变量,会在所有的代码执行之前被声明但不会赋值

函数的声明被提前,使用function声明的函数,会在所有的代码执行之前就被创建

(2)函数表达式, 使用变量初始化函数(字面量方式定义函数)

 

  1. 注意:以表达式定义的函数并没有“被提前”。
  2. 调用f的时候,f只是被声明了,还没有被赋值,等于undefined,所以会报错。

(3) Function() 

三、函数的调用

函数会在什么情况下调用:

1、当事件发生时(点击按钮,例如轮播图中的小圆点)

2、当js代码调用时(cfb();)

3、函数创建后自动调用(如下)

 

  • 立即调用的函数表达式(IIFE)

        IIFE( 立即调用函数表达式)是一个在定义时就会立即执行的  JavaScript 函数

  • 通常情况下,只对匿名函数使用这种“立即执行的函数表达式

立即调用的函数表达式目的有两个

一.是不必为函数命名,避免了污染全局变量;

二.是IIFE内部形成了一个单独的作用域,可以封装一些外部无法读取的私有变量。

 4、间接调用,通过它们的call()和apply()方法间接调用   

四、函数的参数

形参:形式上的参数,没有实际值形参只作用于函数内部(函数体后面()中的参数是形参)

实参:实际上有值的参数调用函数的时候()中传入的参数值是实参

注意:实参传多了不会出错,代码只会对应的取前面的参数;

       实参传少了,会出错输出NAN(非数值类型)

五、全局变量和局部变量,作用域(scope)

1、函数外部的变量函数中可以使用(全局变量)

2、但是函数中的变量,函数外不能使用。(局部变量)

3、函数内部不用var声明,直接赋值方式声明的变量是全局变量。

六、带有返回值的函数

  1. Return返回执行结果,不会在页面中显示,需要用变量来接收
  2. 函数遇到return,会立即返回结果,并终止函数
  3. 返回值类型可以是任意类型,也可以是一个对象,也可以是一个函数

七、将函数作为参数(回调函数)

常见的回调函数?(面试)

  1. Dom事件回调函数
  2. 定时器回调函数
  3. Ajax回调请求
  4. 生命周期回调函数

八、匿名函数

匿名函数:就是没有函数名

1、第一种匿名函数:函数没有函数名,而是直接赋值给一个变量通过变量调用或者直接调用

注:1.匿名函数的调用,必须放在函数声明之后

2.普通函数调用,是可以在函数声明之前的

2、第二种匿名函数:完全匿名也没有变量

1.自调用

2.当事件发生时调用

3.函数中调用

九、递归函数

函数可以调用自身,这就是递归(recursion)

递归函数就是自己调自己

十、函数的内部属性和方法

1.Arguments

Arguments是一个函数中自带的对象

arguments 是一个对应于传递给函数的参数(实参)的类数组对象。

arguments.length  传递给函数的参数数量。(实参)

函数的length属性是只读属性,代表函数形参的数量,也就是在函数定义时给出的形参个数。

2.prototype属性(原型) 

  1. 每一个函数都包含一个prototype属性,这个属性指向一个对象的引用,这个对象称做“原型对象”(prototype object)。
  2. prototype 属性允许您向对象添加属性和方法                                                                  
  3. 注意: Prototype 是全局属性,适用于所有的Javascript对象。
  4. 这个prototype的属性值是一个对象(属性的集合,再次强调!),默认的只有一个叫做constructor的属性,指向这个函数本身

3.函数对象自带的call()方法和apply()方法

每个函数都包含两个非继承而来的方法:call()方法和apply()方法。

定义:call和apply可以用来重新定义函数的执行环境,也就是this的指向;call和apply都是为了改变某个函数运行时的context,即上下文而存在的,换句话说,就是为了改变函数体内部this的指向。

call()

调用一个对象的方法,用另一个对象替换当前对象,可以继承另外一个对象的属性,它的语法是:

apply()

和call()方法一样,只是参数列表不同,语法:

//obj:这个对象将代替Function类里this对象
//argArray:这个是数组,它将作为参数传给Function
//说明:如果argArray不是一个有效数组或不是arguments对象,那么将导致一个TypeError,如果没有提供argArray和obj任何一个参数,那么Global对象将用作obj。
function add(a, b) {
    return a + b;
}
function sub(a, b) {
    return a - b;
}

function People(name, age) {
    this.name = name;
    this.age = age;
}
//为什么add.call(sub, 2, 1)的执行结果是3呢,因为call()方法改变了this的指向,使得sub可以调用add的方法,
//也就是用sub去执行add中的内容
//再来看一个例子:

function Student(name, age, grade) {
    People.call(this, name, age);
    this.grade = grade;
}

var student = new Student('小明', 21, '大三');
console.log(student.name + student.age + student.grade);//小明21大三

//总结一句话就是call()可以让括号里的对象来继承括号外函数的属性。

总结一句话就是call()可以让括号里的对象来继承括号外函数的属性。

console.log(add.call(sub, 2, 1));//3

  • Apply()和call()中的参数是谁,那么this就指向谁

## 作用

共同作用:修改this指向

其次就是它们不同的传参方式:注意上一句话中说他们的作用时有两个关键词 ‘函数’和‘this’,想要修改this 的指向,那么必然有一个this修改后的指向,而函数必然后关系到传参问题:call方法可以传给该函数的参数分别作为自己的多个参数,而apply方法必须将传给该函数的参数合并成一个数组作为自己的一个参数:

## 区别​

不同之处是:

  1. call() 方法接受的是**一个参数列表**
  2. apply() 方法接受的是**一个包含多个参数的数组**。

如果要使用数组而不是参数列表,则 apply() 方法非常方便。

  1. person.fullName.apply(person1, ["Oslo", "Norway"]);
  2. person.fullName.call(person1, "Oslo", "Norway");

十一、构造函数

构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 一起使用。我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。

  •  new 在执行时会做四件事情: (重点)

在内存中创建一个新的空对象。

让 this 指向这个新的对象。

执行构造函数里面的代码,给这个新对象添加属性和方法。

返回这个新对象(所以构造函数里面不需要 return )

  •  this (重点)

this (重点)

1.this出现在全局函数中,永远指向window ;

2.当某个函数为对象的一个属性时,在这个函数内部this指向这个对象;

3.this出现在构造函数中,指向构造函数新创建的对象;

函数内部使用this,谁调用的函数this指向谁;

十二、原型

原型是function 对象的一个属性,它定义了构造函数制造对象的公共祖先,通过该构造函数产生的对象可以继承该原型的属性和方法,原型也是对象。prototype原型最大的作用,共享属性和方法

JavaScript对象具有“自有属性”,也有一些属性是从原型对象Object.prototype 继承而来的。

如果对象自身和它的原型,都定义了一个同名属性,那么优先读取对象自身的属性,这叫做“覆盖”。

十三、原型链

1)每个函数function都有一个prototype,即显式原型(属性)

prototype对象有一个constructor属性,默认指向prototype对象所在的构造函数

2)每个实例对象都有一个__proto__,可称为隐式原型(属性)

3)对象的隐式原型的值为其对应构造函数的显式原型的值

4)内存结构(图)

十四、操作符

(1)instanceof运算符

instanceof运算符返回一个布尔值,表示指定对象是否为某个构造函数的实例。

instanceof运算符的左边是实例对象,右边是构造函数。它的运算实质是检查右边构建函数的原型对象,是否在左边对象的原型链上。

(2)检测一个对象是否是另一个对象的原型,可以使用isPrototypeOf()方法。

isPrototypeOf() 方法用来检测一个对象是否存在于另一个对象的原型链中,如果存在就返回 true,否则就返回 false

(3)Object.getPrototypeOf()

Object.getPrototypeOf方法返回一个对象的原型。这是获取原型对象的标准方法

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

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

相关文章

虚拟现实(VR)开发框架

虚拟现实(VR)开发框架为开发者提供了构建VR应用程序所需的基本工具和功能。它们通常包括3D引擎、场景图、输入系统、音频系统和网络功能。下面是一些流行的VR开发框架。北京木奇移动技术有限公司,专业的软件外包开发公司,欢迎交流…

借助 AI 对话文档:100% 私密且无数据泄漏 | 开源日报 No.224

zylon-ai/private-gpt Stars: 50.0k License: Apache-2.0 PrivateGPT 是一个可以与您的文档进行交互的项目,利用 GPT 的强大功能,100% 私密且无数据泄漏。 提供 API 支持构建私密、上下文感知的 AI 应用程序遵循和扩展 OpenAI API 标准支持普通和流式响…

51单片机实验04 -数码管的动态显示实验

目录 一、实验目的 二、实验内容 三、实验原理 四、实验方法 五,实验效果及代码 1,效果 2,代码 六,课后习题 1,使用定时器T0的中断函数1 从999999~0计时 1)效果 2)代码 2&#xff0c…

国内低代码平台大揭秘:十大排名榜单综述

国内低代码平台有:Zoho Creator、腾讯云云开发、阿里云宜搭、华为云AppCube、爱速搭、白码、织信、活字格、ClickPaaS、简道云。 一、Zoho Creator Zoho Creator是一款基于云计算的低代码平台,旨在帮助企业和开发者快速构建和部署应用程序。该平台提供…

论AEM CV-100 K50E|K60E|NSA升级注意事项

新加坡AEM公司在中国的平台深圳维信仪器报道:近日有很多小伙伴过来咨询,CV-100如何升级?都是想要使用最新的测试功能,比如上图的TDR高精度测试,可以准确的判定被测线缆的故障点。 5.0.307版本不含有tdr高精度测试&…

一键下载全自动安装Office全家桶

概述 今天分享一款超级强大的工具软件,该软件实现了一键自动化下载、安装Office全家桶的功能。整套安装流程堪称行云流水,从下载到安装全自动,无需上手操作。只需要安装该工具软件后,点击安装即可。软件会自动识别不同的操作系统架…

虹科技术丨全新Linux环境PCAN驱动程序发布!CAN/CAN FD通信体验全面升级!

来源:虹科汽车电子 虹科技术丨全新Linux环境PCAN驱动程序发布!CAN/CAN FD通信体验全面升级! 原文链接:https://mp.weixin.qq.com/s/4RXqjUa_odEaxAhcfQOHaA 欢迎关注虹科,为您提供最新资讯! #PCAN #Linu…

《Linux运维总结:Kylin V10+ARM架构CPU基于docker-compose一键离线部署redis6.2.8之容器版哨兵集群》

总结:整理不易,如果对你有帮助,可否点赞关注一下? 更多详细内容请参考:《Linux运维篇:Linux系统运维指南》 一、部署背景 由于业务系统的特殊性,我们需要面向不通的客户安装我们的业务系统&…

【linux】Ubuntu 修改用户名

第一次打开Ubuntu时不小心把初始用户名“siriusiot”写成“siriousiot”(多了一个o) 。作为技术人,我们要保持严谨,我们要纠正过来(其实就是单词拼错了怕被笑话)。 打开终端,输入: …

高效解决Visual Studio Code中文乱码问题

文章目录 问题解决步骤 问题 Visual Studio Code新建一个文件编码方式总是默认GBK,如果我不修改成默认UTF-8,那么每次运行,如果有中文需要输出就会乱码! 解决步骤 之后我会持续更新,如果喜欢我的文章,请记…

2024的新宠儿——Mamba(3):Mamba的三大创新

mamba(其对应论文为:https://arxiv.org/abs/2312.00752,这是其对应的GitHub代码地址:GitCode - 开发者的代码家园),在语言、音频、DNA序列模态上都实现SOTA,在最受关注的语言任务上,Mamba-3B超越同等规模的Transformer,与两倍大的Transformer匹敌,并且相关代码、预训练模…

【计算机毕业设计】微信小程序:MHK自学平台的设计与实现——后附源码

🎉**欢迎来到我的技术世界!**🎉 📘 博主小档案: 一名来自世界500强的资深程序媛,毕业于国内知名985高校。 🔧 技术专长: 在深度学习任务中展现出卓越的能力,包括但不限于…

vue3【详解】 vue3 比 vue2 快的原因

使用 Proxy 实现响应式 vue3使用的 Proxy 在处理属性的读取和写入时,比vue2使用的defineProperty 有更好的性能(速度加倍的同时,内存还能减半!) 更新类型标记 Patch Flag 在编译模板时(将vue语法转换为js描…

搜维尔科技:【工业仿真】煤矿机械安全事故VR警示教育系统

产品概述 搜维尔科技 煤矿机械安全事故VR警示教育系统 系统内容: 系统采用虚拟现实技术模拟矿井井下机械安全技术及事故,展现井下常见机械伤害事故,表现伤害事故的隐患点,能够模拟事故发生和发展过程;营造井下灾害发…

创业之路:专注与腾挪的艺术

在创业的道路上,每一个创业者都面临着无数的挑战和选择。著名投资人吴世春曾言:“树挪死,人挪活;顺利时学会专注,一旦不顺时学会腾挪。”这句话道出了创业过程中专注与腾挪的重要性,也为创业者们指明了方向…

STL-List

前言 我们将进入到CSTL 的学习。STL在各各C的头文件中,以源代码的形式出现,不仅要会用,还要了解底层的实现。源码之前,了无秘密。 STL六大组件 Container通过Allocator取得数据储存空间,Algorithm通过Iterator存取Con…

C语言 选择控制结构(1) 了解选择结构 关系运算符讲解 基本逻辑判断演示

接下来 我们来说 选择控制结构 在生活中 我们也有很多需要分支结构的例子 比如: 计算两个整数的最大值 计算n个数的最大值,最小值 判断三角形三边能否构成三角形? 判断某年是否是闰年? 判断输入的英文字母是大写还是小写? 我们在程序开发中 需要根据某种条件 进…

Docker(二)Docker+ server部署极简前端页面

本篇文章介绍如何使用 Dockerserver 将一个极简前端页面进行部署 1.本地运行一个简单的前端页面&#xff0c;再把它部署到服务器上 index.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name&quo…

书生·浦语大模型第二期实战营(5)笔记

大模型部署简介 难点 大模型部署的方法 LMDeploy 实践 安装 studio-conda -t lmdeploy -o pytorch-2.1.2conda activate lmdeploypip install lmdeploy[all]0.3.0模型 ls /root/share/new_models/Shanghai_AI_Laboratory/ln -s /root/share/new_models/Shanghai_AI_Laborato…

一键部署本地AI大模型,全脚本实现

一、快捷部署 #!/bin/bash ################################################################################# # 作者&#xff1a;cxytoctalkhwy 2024-04-09 # 功能&#xff1a;自动部署Ollama&#xff08;Docker方式&am…