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

最新推荐文章于 2022-08-30 22:23:17 发布
最新推荐文章于 2022-08-30 22:23:17 发布
阅读量675 收藏 5
点赞数 1
分类专栏： 笔记 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/originalApril/article/details/118072197
版权
本文详细讲解了JavaScript中this的关键概念，包括IIFE中的this行为、普通函数、监听器、方法中的this指向，以及各种场景下的this练习题。深入理解this在不同上下文中的变化，对于提升编程技能至关重要。
摘要由CSDN通过智能技术生成

文章目录

一、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>

在这里插入图片描述

小召小召
关注
专栏目录
JavaScript重难点解析2（立即执行函数IIFE，this关键字）
qq_41965041的博客
06-24 849
JavaScript重难点解析1（数据类型）立即执行函数 立即执行函数 也叫做匿名函数自调用，可以在定义一段函数之后直接让其执行。 (function () { //匿名函数自调用 var a = "hello" console.log(a) })() //会直接打印hello var 立即执行函数可以对外部隐藏代码的实现，还可以将变量私有化，不会对外部变量造成影响。 ...
JavaScript普通函数与箭头函数有怎样的区别？
艾编程带你学前端博客
12-27 1090
比较点普通函数箭头函数具体案例简写/箭头函数如果没有参数，同时函数体的返回值只有一句，则{}和return都可以省略。1、函数简写this指向this总是指向调用它的对象，如果作为构造函数，它指向创建的对象实例箭头函数的this指向的是父级作用域的this，是通过查找作用域链来确定 this 的值，也就是说看的是上下文的this，指向的是定义它的对象，而不是使用时所在的对象。2、this指向this改变call()、apply()、bind()等方法能改函数中this的指向。
深入理解js立即执行函数
weixin_30267785的博客
08-10 943
看过jQuery源码的人应该知道，jQuery开篇用的就是立即执行函数。立即执行函数常用于第三方库，好处在于隔离作用域，任何一个第三方库都会存在大量的变量和函数，为了避免变量污染（命名冲突），开发者们想到的解决办法就是使用立即执行函数。 1.什么是立即执行函数（IIFE） 在了解立即执行函数之前先明确一下函数声明、函数表达式及匿名函数的形式，如下图： 接下来看立即执行函数的两种常见形式：...
闭包、立即执行函数、this
whisper49的博客
07-07 1450
闭包、立即执行函数、this关键字
立即执行函数的this指向全局
longtengg1的博客
04-16 1093
var name='a' var obj={ name:'b', func:(function(){ console.log(this.name) })() } 打印结果为a
this关键字的指向、立即执行函数
不明真相的末影人
05-07 1307
this的指向 1.独立的函数中，this指向window 2.事件处理函数中，this指向事件源（绑定事件的元素） 3.定时器的执行函数中，this指向window 4.构造函数中，this指向new创建的对象 5.对象的方法中，this指向该对象 立即执行函数 语法： (function(){ }()); (function(){ })(); 作用：创建一个局部作用域，避免代码之间的相互影响； 立即执行函数可以接受参数，形参写在function后面的小括号中，实参写在最后的一个小括号里； 当页面引
JavaScript基础练习_day10
10-25
### JavaScript基础练习_day10知识点解析 #### 一、题目背景 本练习旨在帮助初学者掌握JavaScript的基础概念，尤其适合那些刚开始接触前端开发的同学。题目将重点围绕JavaScript的基础知识点进行展开，并随着练习的...
JS 函数高级（包括闭包的一些笔试题，防抖，节流）
qq_44748497的博客
11-19 540
1.回调函数 callback 异步：做一个操作的时候，可以去做其他的事情 定时器 同步：做一个操作的时候，其他的都只能等待 alert for //- 异步：做一个操作的时候，可以去做其他的事情 定时器 console.log(1); setTimeout(function () { console.log("定时器"); }, 2000); console.log(2); ​ // - 同步：做一个操作的时候，其他的都只能等待 alert for alert(1);...
JavaScript中的this指向完全解析：7步口诀助你掌握
在某些情况下，如IIFE（立即执行函数表达式）或者事件处理程序，`this`的值取决于具体环境。 通过学习和实践这些规则，开发者可以更好地理解和预测JavaScript中的`this`指向。文档末尾的练习题是巩固这些知识的好...
原生JS 面试题 （基础）（概率大）
m0_64191440的博客
08-30 7811
2022 最新 前端面试题 持续更新中
javascript中立即执行函数
一只苟延残喘的卑微蝼蚁
09-21 308
javascript中立即执行函数 直接po图和代码 //------------------- //立即执行函数(第1种写法) (function(){ //立即执行函数中的this指的是window对象 console.log("立即执行函数中的this=" + this); console.log(this.aaa); //结果是undefined console.lo...
立即执行函数题
weixin_48727085的博客
12-01 110
闭包，立即执行函数，this
weixin_45760605的博客
07-21 257
一、闭包 1、变量的作用域 全局变量 局部变量 Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量 var n = 2020; 　　function f1(){ 　　　　console.log(n); 　　} 　　f1(); // 2020 另一方面，在函数外部无法读取函数内的局部变量 function f1(){ 　　　　var n = 2020; 　　} 　　console.log(n); // error 那如果我们想在外部读取局部变量呢？ 我们可以在函数
易混题杂记之详解方法内部定义IIFE的this取值问题
Freya_yyy的博客
09-15 322
刷到某公司的前端测试题： var foo="global"; var test={ foo:"inner", get:function(){ var self=this; console.log(this); console.log(this.foo); console.log(self.foo); ...
js 中的立即执行函数
热门推荐
热爱思考、活力满满、开朗爱笑的年轻人
08-20 2万+
相信大家经常会遇到下面这两种写法： (function(){ ... })() 和 (function(){ ... }()) 关于这样写是什么意思呢？有什么区别呢？ 在此之前，我们需要了解几个概念： 函数声明、函数表达式、匿名函数 函数声明： function fnName() {...} ； 使用 function 关键字声明一个函数，再执行一个函数名...
JS的this练习
m0_59345890的博客
05-09 202
this基本上就代表的是对象 在及其少的时候 this不是对象=>call apply bind 1、 <script> function fn(){ this.x=100 //等价于window.x=100 } fn() //等价于window.fn()，全局函数看作为window的方法 console.log(x)//等价于console.log(window.x=100) 打印100 //易错点:容易把x看作函数内的变量，x的作用域在函数..
JS立即执行函数
z1324402468的博客
06-27 371
在了解立即执行函数（IIFE）之前，我们需要先搞清楚函数声明、函数表达式及匿名函数的区别。 //函数声明 function (){ console.log('函数声明'); } //函数表达式 var test = function(){ console.log('函数表达式'); } //匿名函数 functioni(){ console.log('匿名函数'); } 常见的两种立即执行...
JS中立即执行函数
NinthSea的博客
06-14 374
立即执行函数for(var i=0 ;i<10 ; i++){ (function fn(){ console.log(i); })(i) } 立即执行函数函数名与体是一个整体，定义之后立即执行，只会调用一次 此处函数名也可以没有，成为匿名函数 function fn(){ } 以上是声
JavaScript — 对象、回调函数、IIFE、函数中的this
m0_59897687的博客
02-20 443
目录 一、对象 1.什么是对象？ 2.为什么要用对象？ 3.对象的组成 4.如何访问对象内部数据 二、函数 1.什么是函数？ 2.为什么要用函数？ 3.如何定义函数？ 4.如何调用（执行）函数？ 三、回调函数 1.什么函数才是回调函数？ 2.常见的回调函数？ 四、IIFE 1.理解 2.作用 五、函数中的this 1.this是什么？ 2.如何确定this的值？ 关于分号的问题： 一、对象 1.什么是对象？ 多个数据的封装体 ...
JavaScript中的立即执行函数表达式(IIFE)是如何帮助防止多次调用的？
最新发布
10-15
JavaScript中的立即执行函数表达式(IIFE，Immediately Invoked Function Expression)是一种常见的模式，它的作用在于创建一个独立的作用域，并立即将其内部的函数执行。在IIFE中，你可以创建一个局部作用域的函数，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值