IIFE立即执行函数和JS基础中的this及练习题

最新推荐文章于 2022-07-07 17:51:58 发布
最新推荐文章于 2022-07-07 17:51:58 发布
阅读量616 收藏 5
点赞数 1
分类专栏： 笔记 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/originalApril/article/details/118072197
版权

文章目录

一、IIFE立即执行函数

普通函数：

<script>
    // 先声明
    function fn(){
        console.log("fn...");
    }
    // 后调用
    fn()
</script>

立即执行函数：

<script>
    //如果这样直接调用会报错  SyntaxError: Unexpected token ')'
    // function gn(){
    //     console.log("gn...");
    // }()


    // IIFE 的写法：
    (function kn(){
        console.log("kn...");
    }())

    // // IIFE
    // +function kn(){
    //     console.log("kn...");
    // }()

    // IIFE
    // -function kn(){
    //     console.log("kn...");
    // }()

    // !function kn(){
    //     console.log("kn...");
    // }()

    // IIFE
    // (function mn(){
    //     console.log("mn...");
    // })()

    // 普通的对象
    let obj = {
        name:"wc",
        age:100
    }
    // IIFE
    ;(function mn(){
        console.log("mn...");
    })()
    // 输出普通对象
    console.log(obj);
</script>

二、this

  • （1）如果this出现在一普通的函数中，通过window.f调用此函数，那么里面的this就表示window。就看.前面是谁，那么this就表示谁 window.f() f中的this就表示window
  • （2）事件绑定中 监听器中的this表示事件源
  • （3）对象是属性的无序集合 在一个对象中也可以能函数 如果一个函数出现在对象中 这个函数叫方法。通过对象打点调用了方法，那么这个方法中的this表示这个对象 就看.前面是谁，那么this就表示谁。
  • （4）在IIFE（立即执行函数）中，this表示window
  • （5）在严格模式和非严格模式下，this代表的含义是不一样的 严格模式后面说
  • （6）一片代码中有this,谁也不知道this代表什么含义，只能代码执行起来后，才知道this表示什么。

三、this练习题

1.this出现在普通函数中

<script>
    // this出现在普通的函数中
    function fn() { 
        // 此时this表示window
        console.log(this)
    }
    fn()
    window.fn()
</script>

在这里插入图片描述

2.this出现在监听器中

<button onclick="fn">登录</button>
<script>
    let btn = document.getElementsByTagName("button")[0]
    btn.onclick = function(){
        // 在监听器中，this表示事件源
        console.log(this)
    }
</script>

在这里插入图片描述

3.this出现在方法中

<script>
    let obj = {
        name: "wangcai",
        age: 100,
        // this出现在方法中
        // run叫方法  函数
        run: function () { 
            // this表示当前的对象
            // this代表是谁，你就看.前面是谁，
            // this代表什么谁，只有去调用此方法时，才知道this是谁
            console.log(this)
            console.log("run....")
        }
    }
    // .前面是obj，代表this是obj
    obj.run()
</script>

在这里插入图片描述

4.this出现在IIFE函数中

<script>
    ; (function f() {
        console.log(this); 
    }())
</script>

在这里插入图片描述

5.关于this的其他练习题

（1）

<button id="box">点击</button>
<script>
    let btn = document.getElementById("box");
    function f() { 
        console.log(this);  // window
        // return undefined
    }
    // f() 表示函数的返回值
    btn.onclick = f(); 
</script>

在这里插入图片描述
（2）

<button id="box">点击</button>
<script>
    let btn = document.getElementById("box");
    function f() {
        return function () {
            console.log(this)
        }
    }
    btn.onclick = f();
</script>

在这里插入图片描述
（3）

<script>
    // this出现在普通的函数，this表示window
    function qq() {
        console.log(this); 
    }
    window.qq();
    qq(); 
</script>

在这里插入图片描述
（4）

<script>
     let wc = {
        name: "wangcai",
        age: 100,
        // this出现在方法中，就看谁调用了这个方法
        eat: function () { 
            console.log("eat...")
            console.log(this); 
        }
    }
    wc.eat(); 
</script>

在这里插入图片描述
（5）

<script>
    let wc = {
        name: "wangcai",
        age: 100,
        eat: function () {
            console.log("eat...")
            // this是谁，不调用，谁也不知道
            console.log(this); 
        }
    }
    let mm = wc.eat;
    mm(); 

</script>

在这里插入图片描述
（6）

<script>
    // num也在GO中，此num已变成了60  num又变成了65
    var num = 10;
    var obj = {
        num: 20
    }
    obj.fn = (function (num) {  // 形参num 值是20
        // this.num = 60
        // IIFE中的this表示window
        this.num = num * 3; // GO中的num变成了60
        // num++ 让num的值加1  21
        num++;
        // log(num)  21
        console.log(num);
        return function (n) {  // n是5
            // this.num = this.num + n;
            this.num += n;
            // 父函数的EC中的num变成了22
            num++;
            console.log(num)
        }
    })(obj.num);  // obj.num是20

    var fn = obj.fn;
    // 
    fn(5)
    console.log(window.num);
    // ==> 21  ==>22   ==>65 
</script>

在这里插入图片描述
（7）

<script>
    // num变成了60
    var num = 10;
    var obj = {
        // num变成了30
        num: 20
    }  // ===> 21  ===> 22  ==> 60   ==> 60   ==> 30
    obj.fn = (function (num) {  // num是20
        // this是window  让GO中的num变成了60
        this.num = num * 3;
        // AO中的num变成了21
        num++;
        // 输出num 21  num变成了22
        console.log(num);
        return function (n) {  // n是10
            // this.num = this.num + n;  this是obj
            this.num += n;
            num++;  // 找num  
            console.log(num)  // 找num 22
        }
    })(obj.num);

    obj.fn(10);
    console.log(num)
    console.log(window.num)
    console.log(obj.num)
</script>

在这里插入图片描述
（8）

<script>

    (function () {
        // AO中放了一个a值是1   a变成了2
        var a = 1;
        var obj = {
            // 要找这个10只能obj.a
            a: 10,
            f: function () {
                // a = a*2  
                a *= 2;
            }
        }
        obj.f()
        alert(obj.a + a);  
    })()

</script>

在这里插入图片描述
（9）

<script>
    (function () {
        var a = 1;
        var obj = {
            a: 10,
            f: function () {
                this.a *= 2;
                console.log(this.a)
            }
        }
        obj.f()
    })()
</script>

在这里插入图片描述
（10）

<script>
    var name = "window";
    var Wangcai = {
        name: "Wangcai",
        show: function () {
            // this是谁  看谁调用了此函数window调用了
            // this表示window  
            console.log(this.name);
        },
        f: function () {
            // this.show    this是Wangcai  找show
            var fun = this.show;
            // 
            fun();
        }
    }
    Wangcai.f();
</script>

在这里插入图片描述
（11）

<script>
    var fullname = "language";
    var obj = {
        fullname: "javascript",
        props: {
            getFullName: function () {
                // 找this  this是obj.props
                // this.name就是this.props.name
                // 访问一个对象上不存在的属性，结果是und
                return this.name;
            }
        }
    }
    console.log(obj.props.getFullName());
</script>

在这里插入图片描述
（12）

<script>

    var fullname = "language";
    var obj = {
        fullname: "javascript",
        props: {
            fullname: "hello",
            getFullName: function () {
                return this.fullname;
            }
        }
    }
    console.log(obj.props.getFullName());

</script>

在这里插入图片描述
（13）

<script>

    var fullname = "language";
    var obj = {
        fullname: "javascript",
        props: {
            fullname: "hello",
            getFullName: function () {
                // windwo调用了此函数  this表示window
                return this.fullname;
            }
        }
    }
    let qq = obj.props.getFullName;
    console.log(qq());
</script>

在这里插入图片描述
（14）

<script>
    let obj = {
        fn: (function () {
            console.log(this);  // window
            return function () {
                console.log(this);  // obj
            }
        })()
    }
    obj.fn();
</script>

在这里插入图片描述
（15）

<script>
    let obj = {
        fn: (function () {
            console.log(this)
            return function () {
                console.log(this)
            }
        })()
    }
    let qq = obj.fn;
    qq();
</script>

在这里插入图片描述

小召小召
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于函数中的this指向问题
RoddyLD的博客
05-05 3687
关于函数中的this指向问题前言一、普通函数中this指向二、对象里面的this指向三、函数表达式中的this指向四、立即执行函数的this指向五、定时器计时器中this的指向六、箭头函数里面的this指向七、构造函数里面的this指向7.1当作普通函数进行调用7.2 作为构造函数使用的时候7.3当this关键字 遇上return八、总结 前言 函数在执行时，会在函数体内部自动生成一个this指针。谁直接调用产生这个this指针的函数，this就指向谁。 提示：以下是本篇文章正文内容，下面案例可供参考
详解javascript立即执行函数表达式IIFE
10-20
本文主要介绍了javascript立即执行函数表达式IIFE的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧
闭包、立即执行函数、this
whisper49的博客
07-07 1363
闭包、立即执行函数、this关键字
详解JavaScript中的this
qq_36113598的博客
07-05 299
由于JavaScript的this不同于C++、JAVA等语言，在开发中容易造成一些困扰，故总结一下Javascript中的this知识，以免踩坑。 个人博客原文链接：点此前往 this指向问题 一般情况 this的指向不是由函数定义在哪个对象里面决定的，而是函数执行时由谁”唤醒”或者说调用来决定的，即调用时才对this做绑定，而不是定义时。 箭头函数 如果...
立即执行函数的this指向全局
longtengg1的博客
04-16 1061
var name='a' var obj={ name:'b', func:(function(){ console.log(this.name) })() } 打印结果为a
JavaScript中的this详解
EmotionComputer
09-15 3508
箭头函数和普通函数的区别如下。 普通函数：根据调用我的人（谁调用我，我的this就指向谁） 箭头函数：根据定义时所在的对象，而不是使用时所在的对象。（我在哪个环境中，this就指向谁） 例如： function foo() { setTimeout(() => { console.log('id:', this.id); }, 100); } var id = 21; fo...
深入理解javascript中的立即执行函数(function(){…})()
10-25
JavaScript中的立即执行函数，也称为IIFE（Immediately Invoked Function Expression），是一种特殊的函数表达式，其特点是函数定义的同时就会被自动执行。这种技术在JavaScript编程中广泛应用，尤其是在库和框架如...
JavaScript函数IIFE使用详解
10-16
主要介绍了JavaScript函数IIFE使用详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
js中的立即执行函数1
08-08
立即执行函数表达式（Immediately Invoked Function Expression，简称IIFE）是JavaScript中一种常见的编程技巧，它用于创建一个独立的作用域，防止污染全局环境，并且在定义时即刻执行。IIFE通过两种方式实现，主要...
JS立即执行的匿名函数用法分析
10-16
JavaScript中的立即执行函数，也称为IIFE（Immediately Invoked Function Expression），是一种常见的编程技巧，用于在JavaScript中创建私有作用域并确保函数立即执行。它主要用于避免全局变量污染，封装变量和函数...
易混题杂记之详解方法内部定义IIFE的this取值问题
Freya_yyy的博客
09-15 295
刷到某公司的前端测试题： var foo="global"; var test={ foo:"inner", get:function(){ var self=this; console.log(this); console.log(this.foo); console.log(self.foo); ...
【es6】箭头函数this指向问题
TwInkle
08-18 235
大部分情况下，this总是指向调用该函数的对象。但对于箭头函数来说并不是这样，是根据外层（函数或者全局）作用域来决定this。 对于箭头函数但this,总结如下： 箭头函数不绑定this,箭头函数中的this相当于普通变量。 箭头函数的this的寻值行为与普通变量相同，在作用域中逐级寻找。 箭头函数的this无法通过bind,call,apply来直接修改（可以间接修改）。 改变作用域中this...
js 立即执行函数
热门推荐
失心疯的博客
10-09 2万+
立即执行函数 目录 立即执行函数 作用 参数 返回值 立即执行函数 立即执行函数模式是一种语法，可以让你的函数在定义后立即被执行。 立即执行函数的组成 定义一个函数 将整个函数包裹在一对括号中 将函数声明转换为表达式 在结尾加上一对括号 让函数立即被执行 代码实例 (function () { console.log("app") })() 作用 页面加载完成后只执行一...
JavaScript中this指向
CSPsy的博客
12-19 2134
JavaScript中this指向 JavaScript上下文规则 事件处理函数 this 立即执行函数this 函数中this 定时器，延时器this 数组中对象上下文
立即执行函数
mmcrsx_blog的博客
08-11 613
立即执行函数 此类函数没有声明，执行一次就被释放，函数声明释放==undefined，适合初始化工作 两种写法： 1）（function(){}()）—–常用 2)（function（）{}）（） （function 可名字（可有形参）{ 可有执行函数，返回值 } （可有实参）） 注意：只有表达式才能被执行符号执行 （ function ( ) { } ( ) ） 里面的 func...
立即执行函数，没见过！？？
langrentao的博客
03-09 199
今天，在看到一个题目里面有个不认识的函数格式： (function(){.....}()) 查了资料，叫做立即执行函数，立即执行函数模式是一种语法，可以让你的函数在定义后立即被执行 立即执行函数模式被广泛使用，它可以帮你封装大量的工作而不会在背后遗留任何全局变量。 你定义的所有变量都会成员立即执行函数的局部变量，所以你不用担心这些临时变量会污染全局空间 var x = 0; 　...
js 中的立即执行函数
热爱思考、活力满满、开朗爱笑的年轻人
08-20 2万+
相信大家经常会遇到下面这两种写法： (function(){ ... })() 和 (function(){ ... }()) 关于这样写是什么意思呢？有什么区别呢？ 在此之前，我们需要了解几个概念： 函数声明、函数表达式、匿名函数 函数声明： function fnName() {...} ； 使用 function 关键字声明一个函数，再执行一个函数名...
函数一
Mr.魏
09-20 973
课程：函数 目标 函数的作用 函数的使用步骤 函数的参数作用 函数的返回值作用 函数的说明文档 函数嵌套 一. 函数的作用 需求：用户到ATM机取钱： 输入密码后显示"选择功能"界面 查询余额后显示"选择功能"界面 取2000钱后显示"选择功能"界面 特点：显示“选择功能”界面需要重复输出给用户，怎么实现？ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yTXjFFzP-1600568720933)(01-函数一.assets/image-201812312119
立即执行函数(IIFE)
最新发布
03-30
立即执行函数(IIFE)是一种JavaScript表达式，它可以立即执行并返回结果。它通常用于创建一个独立的代码块，以避免变量污染全局作用域。IIFE的结构如下： ``` (function () { // code here })(); ``` 这个函数被包在括号中，然后紧接着被调用。这个函数可以接受任意数量的参数，并且可以返回任何类型的值。在IIFE中定义的变量只在函数内部可用，不会污染全局作用域。IIFE可以用于声明私有函数和变量，模块化代码，使用闭包等等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值