【JavaScript 进阶教程】函数的定义 调用 及 this指向问题

news2024/11/20 11:51:51

这篇文章开始我们函数的进阶篇,和我们JavaScript基础学的函数有了很多拓展,这篇文章首先我们从函数的定义,调用,及其 this指向 来一个总结。 

文章目录:

一:函数的定义 

1.1 命名函数 

1.2 匿名函数 

1.3 利用 new Function() 声明函数

1.4 重要结论

 二:函数的调用

2.1 普通函数调用

2.2 立即执行函数调用

2.3 对象内方法调用

2.4 构造函数调用

2.5 事件函数的调用

2.6 定时器函数的调用

 三:各个函数的内部this指向问题


一:函数的定义 

函数的定义共三种方式:1.命名函数,2.匿名函数,3.利用 new Function() 来创建。

1.1 命名函数 

命名函数就是我们最常见的声明函数的方式,也叫做自定义函数

    <script>
        function fn(){
            console.log('我是命名函数');
        }
        fn()
    </script>

 


1.2 匿名函数 

匿名函数即没有名字的函数,匿名函数的调用需要使用立即执行函数,绑定事件时使用的也是匿名函数

    <script>
    //立即执行函数来调用匿名函数
       (function(a,b){     
           console.log(a+b);
       })(1,2)

    //绑定事件来使用匿名函数
       var div1=document.querySelector('div')
       div1.addEventListener('click',function(){
         console.log('我是绑定事件使用的匿名函数');
       })
    </script>


1.3 利用 new Function() 声明函数

还有一种不常见的函数声明方法是 new Function(),这个办法我们知道是个构造函数。但是由于这种方式比较繁琐麻烦,并且如果执行函数还需要转化语言格式为可识别的脚本语言,因此不使用这种方式声明函数,只需要知道 所有的函数都是Function构造函数的实例化对象(后面结论会说)


参数格式为:

  • new Function(‘参数一’,‘参数二’,‘参数三’,...... ,‘函数体)

(注意参数全部为字符串形式)

    <script>
         var fn=new Function('a','b','console.log(a+b)')
         fn(2,3)
    </script>


1.4 重要结论

通过刚才的第三种函数的声明方法,是个构造函数,我们会想到什么,为什么函数也有构造函数,难道函数也是对象吗?是的那我们接下来验证一下

    <script>
         var fn=new Function('a','b','console.log(a+b)')
         fn(1,3)
         console.dir(fn instanceof Object)
    </script>

 

结论:

      对此我们知道了函数也是对象就可以得到以下关系

  • 函数属于对象
  • 所有的函数都是Function构造函数的实例化对象

 二:函数的调用

函数的调用分为以下六种情况:

  • 普通函数调用
  • 立即执行函数调用
  • 对象内方法调用
  • 构造函数调用
  • 事件函数调用
  • 定时器函数调用

2.1 普通函数调用

普通函数调用可以直接写函数名调用,也可以使用 call() 方法调用

    <script>
        function fn(){
            console.log('我是一个普通函数的调用');
        }
        fn()
        fn.call()
    </script>


2.2 立即执行函数调用

立即执行函数通常用于匿名函数的调用,立即执行函数是自动调用的

    <script>
        (function(){
            console.log('立即执行函数调用了');
        })()
    </script>


2.3 对象内方法调用

对象内方法调用只需要  :实例化对象名称.方法名称

    <script>
        var obj={
            fn:function(){
                console.log('对象内的方法调用了');
            }
        }
        obj.fn()
    </script>


2.4 构造函数调用

构造函数的调用只需要 new实例化对象就可调用

    <script>
        function Animal(){}
        new Animal()
    </script>

2.5 事件函数的调用

事件对象调用需要触发事件就可以调用

    <script>
       var div1=document.querySelector('div')
       div1.addEventListener('click',function(){
         console.log('事件对象调用了');
       })
    </script>

2.6 定时器函数的调用

定时器内的函数为时间到后自动调用

    <script>
      window.setInterval(function(){
        console.log('定时器函数触发了');
      },1000)
    </script>


 三:各类函数的内部this指向问题

函数内部的 this 指向谁,是由我们调用时才知道的,一般情况是指向函数的调用者,下面是上一板块出现的几类函数的this指向

函数类型this 的指向

普通函数调用

window

立即执行函数调用

window

对象内方法调用

该方法的所属对象

构造函数调用

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

事件函数调用

绑定事件的对象

定时器函数调用

window

 以上就是函数进阶第一板块的内容,创作不易,支持下吧!!

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

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

相关文章

若依(ruoyi)框架:如何实现灵活自定义路由配置

如何灵活自定义路由配置业务背景如何实现方式一&#xff1a;直接在前端路由表&#xff08;router/index.js&#xff09;里面某个路由的meta属性里面配置。方式二&#xff1a;在后台返回动态路由的接口中组装meta信息如何改造效果展示使用方法总结业务背景 随着项目的深入开发&a…

使用 iframe出现了缓存,导致页面不会刷新的解决方案

事情是这样的&#xff0c;我在打代码的时候&#xff0c;需要在A页面里引入B页面我使用了iframe 这个标签 来引入页面B但是我发现 当我更改完页面B的内容 将它上传到服务器后&#xff0c;我访问这个A页面&#xff0c;这个我使用iframe 引入的页面B 的内容并没有更新,经过一番研究…

VsCode工具开发vue项目必装插件

VsCode工具开发vue项目必装插件 目录VsCode工具开发vue项目必装插件1.概述2.VsCode插件清单2.1.Vetur插件让vue文件代码高亮2.2.Vue VSCode Snippets自动生成vue模板内容插件1.安装插件2.使用插件生成vue模板代码2.3.LiveServer实时刷新网页1.安装LiveServer2.使用LiveServer打…

若依框架搭建和使用

一.搭建系统 若依官网&#xff1a;RuoYi 若依官方网站 |后台管理系统|权限管理系统|快速开发框架|企业管理系统|开源框架|微服务框架|前后端分离框架|开源后台系统|RuoYi|RuoYi-Vue|RuoYi-Cloud|RuoYi框架|RuoYi开源|RuoYi视频|若依视频|RuoYi开发文档|若依开发文档|Java开源框…

Jasper Report详细使用教程(保姆级教程),整合Springboot使用

Jasper Report详细使用教程1、下载Jaspersoft Studio2、编写jrxml文件3、编译模板文件4、输出PDF报表&#xff08;SpringBoot整合&#xff09;5、解决中文乱码&#xff08;不显示的问题&#xff09;6、最后1、下载Jaspersoft Studio 官网下载地址&#xff1a;https://communit…

CSS网页布局

&#x1f4dc;个人简介 ⭐️个人主页&#xff1a;微风洋洋&#x1f64b;‍♂️ &#x1f351;博客领域&#xff1a;编程基础&#x1f4a1;,后端&#x1f4a1;,大数据,信息安全 &#x1f345;写作风格&#xff1a;干货,干货,还是tmd的干货 &#x1f338;精选专栏&#xff1a;【J…

叮咚,您有一封告白信件待查收(原生HTML+CSS+JS绘制表白信件,代码+链接+步骤详解)

马上就要5月20号啦&#xff0c;准备好如何向心仪的她/他表白了嘛&#xff01;特此出一篇告白小信件&#xff0c;效果图如下。纯htmlcss绘制&#xff0c;包含详细教程注释&#xff0c;干货满满哦。 链接置于文章结尾总结处。 文章目录一、叮咚&#xff01;查收您的信件&#x…

js二十五道面试题(含答案)

目录 1.线程和进程是什么&#xff1f;举例说明 2. js中的基础数据类型有哪几种? 了解包装对象吗&#xff1f; 3.对内存泄漏的了解 4.js中数组合并的方法 5.合并对象的方法 6.什么是作用域&#xff0c;什么是作用域链&#xff1f; 7.JS如何实现异步编程&#xff08;5种&…

1.vite初识、vite搭建项目

1.vite优势 1.1启动速度 解释一下冷启动&#xff1a;它是指输入启动指令后他编译到启动完成的过程&#xff1b; 当你使用vite和webpack后你就会得出这个结论&#xff0c;vite相对于webpack启动速度还是略胜一筹的&#xff0c;当你的项目是小型项目时&#xff0c;不是特别明显…

TypeScript 报错汇总

TypeScript 报错汇总 在这篇文章中将记录我遇到的ts错误&#xff0c;应该会持续更新。 有时候从错误点入手学习似乎是一个不错的选择&#xff0c;所以也欢迎你私信我一些ts的问题。 一、内置工具 1.1 Pick & Partial 先看看Pick和Partial工具的源码&#xff1a; type…

浅析什么是伪类和伪元素?伪类和伪元素的区别解析

一、理解什么是伪类&#xff1f;什么是伪元素&#xff1f; 1、伪类种类 伪类作用对象是整个元素 a:link{color:#111} a:hover{color:#222}div:first-child{color:#333} div:nth-child&#xff08;3&#xff09;{color:#444} 尽管这些条件不是基于DOM的&#xff0c;但结果每一…

面试必问JavaScript基础面试题(附答案详解)

文章目录前言1、JavaScript的数据类型有哪些&#xff1f;2、null&#xff0c;undefined的区别&#xff1f;3、JS中变量的作用域是什么&#xff1f;4、说说var、let、const之间的区别?区别一&#xff1a;作用域区别二&#xff1a;定义变量区别三&#xff1a;let与const区别5、栈…

微信小程序云开发 | 插件的微信小程序云开发

1、插件开发简介 1●插件简介 插件是对一组JavaScript接口、自定义组件或页面的封装&#xff0c;可嵌入小程序中使用。插件不能独立运行&#xff0c;必须嵌入在其他小程序中才能被用户使用&#xff1b;而第三方小程序在使用插件时&#xff0c;也无法看到插件的代码。因此&…

英雄联盟轮播图手动轮播

感谢大朋友们小朋友们的催更&#xff0c;这个月都在努力复习功课&#xff0c;无异于对待期末考试。 通过前一个个小案例越做越熟悉&#xff0c;代码越来越简洁&#xff0c;整体架构越来越规范 一步一步循序渐进&#xff0c;今天写一个英雄联盟轮播图手动轮播练练手。 清除网页的…

js逆向点点数据:自动扣webpak-webpackJsonp思路

url链接:点点数据-App应用市场数据分析,AppStore排行榜,ASO,ASM优化平台 请求数据是k&#xff0c;网址是个标准的webpak&#xff0c;不过有有很多个js文件&#xff0c;文件加起来十几mb&#xff0c;就很恶心 扣的话还是扣知乎webpak的老办法&#xff0c;导出加载器&#xff0c…

【蓝桥杯Web】第十四届蓝桥杯Web模拟赛 3 期 | 精品题解(上)

&#x1f9d1;‍&#x1f4bc; 个人简介&#xff1a;一个不甘平庸的平凡人&#x1f36c; &#x1f5a5;️ 蓝桥杯专栏&#xff1a;蓝桥杯题解/感悟 &#x1f5a5;️ TS知识总结&#xff1a;十万字TS知识点总结 &#x1f449; 你的一键三连是我更新的最大动力❤️&#xff01; &…

Promise.allSettled()方法介绍

前言&#xff1a; 本篇文章介绍 Promise 对象的Promise.allSettled() 方法&#xff0c;另外的关于 Promise 文章 可以看我的 ES6专栏 promise 实现 Ajax 首先通过 promise 对象实现 Ajax &#xff08;如下&#xff09; &#xff0c;后面 在代码中 会使用到 const getJSON f…

uniapp添加极光推送

1.从dcloud插件市场下载极光SDK插件 &#xff08;可以云打包&#xff0c;也可以离线打包&#xff09; 极光JCore官方SDK下载地址 https://ext.dcloud.net.cn/plugin?id4028https://ext.dcloud.net.cn/plugin?id4028 极光JPush官方SDK下载地址 极光JPush官方SDK - DCloud 插…

Request获取请求数据中文乱码问题

目录 一、当Request请求字母时&#xff0c;输出正常 二、当Request请求参数为汉字时 三、使用伪代码了解乱码的形成 URL编码 四、Request请求参数中文乱码-Post请求解决方案 五、Request请求参数中文乱码-Get请求解决方案 前言&#xff1a;Tomcat在7以及更低版本时&#…

【虚幻引擎UE】UE5 实现WEB和UE通讯思路(含工程源码)

UE5实现WEB和UE通讯思路 两个方案,根据需求选择适合自己的: 1.UE打包为像素流页面,嵌入WEB进行通讯。 2.UE和WEB基于WEB UI插件实现通讯,打包为像素流页面。 实现效果如下 ↓ 本文着重说明第二种方案。 示例项目工程文件:https://download.csdn.net/download/qq_35079…