美文网首页
JS-进阶-Day4

JS-进阶-Day4

作者: 小可_34e0 | 来源:发表于2019-08-19 12:26 被阅读0次

apply和call:改变this指向

apply和call方法中如果没有传入参数,或者是传入的是null,那么调用该方法的函数对象中的this就是默认的window
f1.apply(); / f1.apply(null);

f1.apply(null,[100,200])
f1.apply(null,100,300)

apply和call都可以让函数或者方法来调用,传入参数和函数自己调用的写法不一样,但是效果是一样的

<script>
  function Person(age,sex){
    this.age=age;
    this.sex=sex;
  }
  //通过原型添加方法
  Person.prototype.sayHi=function(x,y){
    console.log('您好'+this.sex);
  };
  var per=new Person(10,"男");
  per sayHi();
  console.log("==============");
  function Student(name,sex){
    this.name=name;
    this.sex=sex;

  };
  var stu=new Student("小明","人妖");
  per.sayHi.apply(stu,[10,20]);
  per.sayHi.call(stu,10,20);

</script>
图片发布于简书APP

bind方法:

通过对象,调用方法,产生随机数

<script>
function ShowRandom(){
  //1-10随机数
  this.number=parseInt(Math.random()*10+1);
}
//添加原型方法
ShowRandom.prototype.show1=function(){
  window.setInterval( this.show2.bind(this),1000);
};
//添加原型方法
ShowRandom.prototype.show2=function(){
  //显示随机数
  console.log(this.number);
};
//实例对象
var sr=new ShowRandom();
//调用函数,输出随机数字
//调用这个方法一次,可以不停的产生随机数字
sr.show1();

</script>

函数中成员介绍:
函数中有一个name属性-------》函数的名字,name属性是只读的,不能修改
函数中有一个argument属性----》实参的个数
函数中有一个length属性----》形参的个数
函数中有一个caller属性----》调用(f1函数在f2函数中调用,所以,此时调动者是f2)

函数作为参数

<script>
function f1(fn){
  console.log("f1是函数");
  fn();//此时fn当做是一个函数使用

}
//fn是参数,最后作为函数使用 ,函数是可以作为参数使用
//传入匿名函数
f1(function(){
  console.log('我是匿名函数');
});
//命名函数
function f2(){
  console.log('f2的函数');
}
f1(f2);
//函数作为参数的时候,如果是命名函数,那么只传入命名函数的名字,没有括号
</script>

定时器中传入函数

function f1(fn){
  setInterval(function(){
    console.log('定时器开始');
    fn();
    console.log("定时器结束");
  },1000);
}

f1 (function(){
  console.log('好嘞');
});

获取某个对象的数据类型的样子
object.prototype.tostring.call(对象);//此时得到的 就是这个对象的类型的样子


图片发布于简书APP

小案例:排序

<script>
  var arr=[1,23,12,54,34,667,23,12];
  //排序---函数作为参数使用,匿名函数作为sort方法的参数使用,那么此时的匿名 函数中有两个参数
  arr.sort(function(obj1,obj2){
    if(obj1>obj2){
      return -1;
    }else if(obj1==obj2){
      return 0;
    }else{
      return 1;
    }
  });
  console.log(arr);
</script>

作用域链:


图片发布于简书APP

闭包:
闭包的概念:函数A中,有一个函数B,函数B中可以访问函数A 中定义的变量或者数据,此时形成了闭包(不够严谨)
闭包的模式:函数模式的闭包,对象模式的闭包
闭包的作用:缓冲数据,延长作用域链
闭包的优点和缺点:缓存数据

<script>
//函数模式的闭包:在一个函数中有一个函数
  function f1(){
    var num=10;
    //函数的声明
    function f2(){
      console.log(num);
    }
    //函数调用
    f2();
  }
  f1();

  //d对象模式的闭包:函数中有一个对象
  function f3(){
    var num=10;
    var obj={
      age:num
    };
    console.log(obj.age);
  }
  f3();

</script>

闭包:累加

<script>
  function f1(){
    var num=10;
    return function(){
      num++;
      return num;
    }
  }
  var ff=f1();
  console.log(ff());//11
  console.log(ff());//12
  console.log(ff());//13
</script>

闭包产生三个相同的随机数:

<script>
  //闭包的方式,产生三个相同的随机数
  function f1(){
    var num=parseInt(Math.random()*10+1);
    return function(){
      console.log(num);
    }
  }
  var ff=f1();
  ff();
  ff();
  ff();
</script>

总结:如果想要缓存数据,就把这个数据放在外层的函数和理层的 函数中间位置

闭包作用:缓存数据;缺点:没有及时释放

局部变量实在函数中,函数使用结束后,局部变量就会被自动释放,闭包后,里面 的局部变量的使用作用域链就会被延长

闭包案例:实现点赞

<style>
      ul{
        width: 1000px;
        height:300px;
        border: 1px solid red;
        margin:0 auto;
      }
      li{
        width: 200px;
        height: 200px;
        float: left;
        list-style: none;
        margin-right: 10px;

      }

    </style>
</head>
<body>
  <ul>
    <li><img src="./image/1.jpg"><br/><input type="button" name="" value="赞(1)"></li>
    <li><img src="./image/1.jpg"><br/><input type="button" name="" value="赞(1)"></li>
    <li><img src="./image/1.jpg"><br/><input type="button" name="" value="赞(1)"></li>
    <li><img src="./image/1.jpg"><br/><input type="button" name="" value="赞(1)"></li>
  </ul>
</body>
<script src="xiec.js"></script>
<script>
  //获取标签名字获取元素
  function my$(tagName){
    return document.getElementsByTagName(tagName);
  }
  //闭包缓存数据
  function getValue(){
    var value=2;
    return function(){
      //每次点击的时候,都应该改改变当前点击按钮的value值
      this.value="赞("+(value++)+")";
    }
  }
  //获取所有按钮
  var btnObjs=my$("input");
  //循环遍历每个按钮,注册点击事件
  for (var i=0;i<btnObjs.length;i++){
    //注册事件
    btnObjs[i].onclick=getValue();
  }
</script>

沙箱:(沙箱是一种按照安全策略限制程序行为的执行环境)


图片发布于简书APP
<script>
  (function(){
    var str="小奥比喜欢小黑";
    str=str.substr(3);
    console.log(str);
  }());

//沙箱
(function(){
  var str="小奶喜欢嘻哈";
  str=str.substr(2);
  console.log(str);
}());
</script>

沙箱操作页面元素


图片发布于简书APP

递归:

<script>
  //递归实现n个数字求和
  function getSum(x){
    if(x==1){
      return 1;
    }
    return x+getSum(x-1);
  }
  console.log(getSum(100));
</script>

相关文章

  • JS-进阶-Day4

    apply和call:改变this指向 apply和call方法中如果没有传入参数,或者是传入的是null,那么调...

  • js-函数进阶

    函数(function)把要执行的代码放入函数里面,使其函数里面的代码反复被使用,减少了大量代码累跌 函数的基本书...

  • js-文件的上传和下载

    js-文件的上传和下载

  • WebSocket 心跳 登陆 实例代码!

    · JS-前端代码. · JAVA-后端代码.

  • JS-进阶-Day2

    贪吃蛇案例:

  • JS-进阶-Day1

    创建对象 的三种方式: 工厂模式和自定义构造函数的区别: 构造函数和实例对象之间的关系: 原型的引入 构造函数和实...

  • JS-进阶-Day3

    原型链: 原型链:是一种关系,实例对象和原型对象之间的 关系,关系是通过原型(proto)来联系的 原型指向可以改...

  • office职场大学年卡女神班学习笔记Day4

    张婷婷0319Excel学习笔记Day4 分列-快速提取有效信息 A.知识体系: 基本用法 进阶用法 文本转数值 ...

  • #成长进阶#Day4 2020-03-15

    #成长进阶#Day4 2020-03-15 认知加强: 1,我们总是听见,看见,接触,接受,我们比较熟悉的事务。不...

  • 2019-07-14

    特训营day4——查找和替换的不同玩法 一 基本用法 ctrlF查找 ctrlH替换 二 进阶用法 1.查找替换窗...

网友评论

      本文标题:JS-进阶-Day4

      本文链接:https://www.haomeiwen.com/subject/yjndsctx.html