我的编程空间,编程开发者的网络收藏夹
学习永远不晚

Javascript中函数分类&this指向的实例详解

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

Javascript中函数分类&this指向的实例详解

JS中定义函数的三种方式

通过实例来说明吧


<script>
        //method1
        function fn() {
            console.log('fn created ');
        }
        //method2
        var fn2 = function () {
            console.log('fn2 created');
        }
        //method3
        var fn3 = new Function('test', 'console.log(test);');
        fn3('fn3 test');
        console.dir(fn3);
        console.log(fn3 instanceof Object);
    </script>

运行上面例子,证明了函数也是对象。可以采用new + 构造函数的方式创建实例,第三种方式执行效率低。

函数的原型链

从结果可以看到Function原型对象的__proto__指向Object。

JS中函数的分类和调用方式

通过实例来说明吧


<script>
        //函数的分类和调用方式
        //方式1 普通标准函数,this 指向window
        function fn() {
            console.log('fn1'+ this);
        }
        fn(); //本质是window.fn(); 全局函数是window的成员       
        //方式2 对象的方法 this 指向调用者o
        var o = {
            sayHi: function () {
                console.log('fn2'+this);
            }
        }
        o.sayHi();

        //方式3 构造函数 this指向新创建的对象,这里指向star1
        function Star(username){
            this.username = username;
        }
        var star1 = new Star('ldh');

        //方式4 绑定事件函数 this 指向函数的调用者 btn
        var fn = function (){
            console.log('btn 被点击了'+ this);
        }
        btn.onclick = fn;
        //点击了按钮就可以调用函数

        //方式5 定时器函数 定时器实际是window成员 所以this 就是window
        setInterval(function(){},1000);
        //定时器按照设定的时间间隔去调用
        
        //方式6 立即执行函数 this 是window 同方式一

        (function(){console.log('function executed')})();
//不需要调用立即执行      


    </script>

通过上面的例子,基本上归纳了笔者了解的函数使用方式。通过方式4和方式6的对比,

  • 我们可以知道函数后面加了() 表示立即调用,没加(),表示函数的指针,只是指明函数不调用函数。
  • this 指向问题,牢记this指向调用者

改变this 指向的三个函数

this 指向是JS中很重要的问题,在上面的函数分类中,已经有了系统的分析。下面重点总结改变this 指向的三个函数

call

把父类实例改成子类实例 实现属性继承


<script>
        //call function 
        function Father(username, age) {
            this.username = username;
            this.age = age;
        }

        function Son(username, age, gender) {
            Father.call(this, username, age);//实现继承父类的属性
            this.gender = gender;
        }
    </script>

apply

apply 和call 不同点,参数是数组(伪数组)。在apply内部会把数组拆成元素

主要使用 借助Math对象,Math.max.apply(Math, [4324, 45, 342, 23])


<script>
        //apply function 
        var o = {
            username: 'testuser'
        };
        function fn(arr) {
            console.log(arr);
            for (let i = 0; i < arr.length; i++) {
                console.log(arr[i]);

            }
            console.log(this);
        }

        fn.apply(o, [23, 43]);
        console.log(Math.max(43, 45, 243, 342));
        console.log(Math.max.apply(Math, [4324, 45, 342, 23])); 
    </script>

bind

只改变this 的指向 不调用函数

用途改变绑定事件的this,案例


<body>
    <button>click me</button>
    <button>click me</button>
    <button>click me</button>
    <script>
        //bind function
        //案例:实现多个按钮发送验证码后 3s 可以再次发送
        var btns = document.querySelectorAll('button');
        for (let i = 0; i < btns.length; i++) {
            btns[i].onclick = function () {
                this.disabled = true;
                setTimeout(function () {
                    this.disabled = false;//改变this 指向btn ,3000ms 后执行
                }.bind(this), 3000);
            }
        }        
    </script>
</body>

总结

到此这篇关于Javascript中函数分类&this指向的文章就介绍到这了,更多相关JS函数分类this指向内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

Javascript中函数分类&this指向的实例详解

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

JavaScript中this指向的示例分析

小编给大家分享一下JavaScript中this指向的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!this先看代码:方法中function test()
2023-06-25

JavaScript中的this关键词指向实例分析

这篇文章主要讲解了“JavaScript中的this关键词指向实例分析”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript中的this关键词指向实例分析”吧!1、es5中的th
2023-06-30

JavaScript中this指向问题的示例分析

这篇文章将为大家详细讲解有关JavaScript中this指向问题的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1. 箭头函数箭头函数排在第一个是因为它的 this 不会被改变,所以只要当前函数
2023-06-14

JQuery中this的指向实例分析

这篇文章主要介绍“JQuery中this的指向实例分析”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JQuery中this的指向实例分析”文章能帮助大家解决问题。JavaScript中的this不总
2023-06-30

一文详解JavaScript中this指向的问题

JavaScript中this指向的问题是面试中常常会问到的,所以本文就来通过一些简单的示例为大家详细讲讲,文中的示例代码讲解详细,需要的可以参考一下
2023-05-14

C语言指向函数的指针实例分析

这篇文章主要介绍“C语言指向函数的指针实例分析”,在日常操作中,相信很多人在C语言指向函数的指针实例分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”C语言指向函数的指针实例分析”的疑惑有所帮助!接下来,请跟
2023-07-02

编程热搜

目录