js高级IIFE与回调函数与return对象与this指向

最新推荐文章于 2024-07-19 12:58:53 发布

2333!!!!!

最新推荐文章于 2024-07-19 12:58:53 发布

阅读量235

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46564011/article/details/122693364

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js高级IIFE与回调函数与return对象与this指向</title>
</head>
<body>
<button id="btn01">按我</button>
<script type="text/javascript">
  /*回调函数与IIFE立即调用函数*/
  /*首先是回调函数:
  回调函数就是定义后不立即调用,等待事件或后面别的函数去调用
  * 比如:你有一个按钮btn01,你再定义一个函数
  你按下按钮调用这个函数
  这个函数就是回调函数
  * */
  var btn01=document.getElementById("btn01");
  function fn(){
      alert("fck");
  }
  btn01.onclick=fn;
/*主要注意这里这里是只指向这个函数,不要给函数加()
给函数加括号就会直接被调用
* */
  /*****************那么什么是立即调用函数呢*****************/
  (function jk(){
      console.log("我是jk立即调用函数");
  })();/*这就是一种立即调用函数,通过括号将整个函数包围起来将它看作是一个整体然后后面添加上括号调用他*/
  /*就是相当于jk是个普通函数,然后用这个函数名后跟括号来执行函数*/
  /*下面是立即执行函数常见的使用方法:匿名调用立即执行函数*/
  (function(){/*我们的函数不写函数名会报错,但这种写法把这个没有函数名的函数整个包起来是他又成为一个函数*/
      console.log("我是匿名函数被立即调用");
  })();
  /*下面是对象的进阶*/
  var fn2={
      name:"fn2",
      "content-type":"你好"
  }
  console.log(fn["name"]);
    console.log(fn2["content-type"]);
/*js的对象中允许使用字符串属性名来做对象的取值*/
  /***********************下面是立即调用函数的进阶**********************/
  console.log(window.$);/*最开始他只是一个window的声明变量没什么用*/
  window.$=function (){/*这是window.$他应该是window中一个用来存储函数的属性
  网上百度没找到什么有用的
  */
      console.log("$");
  };
  $();
  window.$={name:"$window"};
  console.log($["name"]);/*因为函数是一个特殊的对象所以可以调用*/
  /***************下面是一种js匿名函数的应用与return的进阶**************/ /*重点从里开始*/
  (function(){
      let i=0;
      function test(){
          console.log("i之后会++"+(i++));
      }
      window.$=function (){
          return {
              test:test
              /*return 请明白它是一个整体他是一个对象
              * window.$他返回的是一个对象!
              * 对象的属性是test:test是一个函数
              * js对象中不能使用;
              * */
          }
      }
  })();/*上面这个函数虽然是自己调用了
  但是他的本质上只是创建了一下他们并没有去"使用"!
  他是在函数调用之后将这个test函数创建了,然后在给window.$这个属性变成了函数
  返回一个test属性而test属性赋值了一个test函数
  */
  /*你不能这样调用$.test() --因为$是一个函数 */
  $().test();
  /****************************this指向的经典问题******************/
  function Person(){

  }
  var person=new Person();
  person.tostr=function(){
      console.log("person");
  }
  var obj={};
  person.tostr.call(obj);//this指向obj
  ///这样就更好理解了这个call 他是把调用对象函数的this交给了参数中的对象
  //obj中没有这个tostr方法是person用call方法交给了obj对象

  function fnc1(){
      function fnc2(){
          console.log("my"+this);/*里面的this指向window*/
      }
      fnc2();
  }
  fnc1();
  /*其实在我看来this的初指向window,到变量名去指向函数函数作用域的this就指向变量名(指向父级)
  * 可以这么理解,这么理解够简单也比较我的理解是给每个this虚构一个父级来看的只有上面这个失手了
  * */
</script>
</body>
</html>

2333!!!!!

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js高级IIFE与回调函数与return对象与this指向

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js高级IIFE与回调函数与return对象与this指向</title></head><body><button id="btn01">按我</button><script type="text/javascript".
复制链接

扫一扫