js 中的this-CSDN博客

本文链接：https://blog.csdn.net/qq_41654985/article/details/79796437

本文探讨了JavaScript中this关键字的不同应用场景，包括普通函数调用、事件处理函数、使用apply和call改变this指向以及对象方法中的使用。通过具体实例展示了this在不同上下文中的行为变化。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 50px;
            height: 50px;
            background-color: aqua;
        }
    </style>
</head>
<body>
<div></div>
<script>
  /*  //求数组最小值
    var arr=[1,3,5,3,5,7,8,9,6,10];
    console.log(Math.max.apply(null,arr));*/
  //  使用applay，call，bind执行函数
//  *   函数中的this就是这个传入的对象，如果对象参数是null，则this是原有this含义
    var obj={a:3,b:4};
    abc(3,5);
    abc.call(obj,3,5);
    abc.apply(obj,[3,5]);
    function abc(a,b) {
        console.log(this);
        return a+b;
    }
    function funAplay(a,b) {
      var sum=0;
      sum=a+b;
      this(sum)
    }
    function a(num) {
      console.log("a:"+num)
    }
    function b(num) {
      console.log("b:"+num)
    }
    function c(num) {
      console.log("c:"+num)
    }
    var arr=[a,b,c];
    for(var i=0;i<arr.length;i++){
        funAplay.apply(arr[i],[3,5])
    }
  /*
      *  如果给事件函数使用bind，将无法删除
      *
      * */
    /*var div=document.querySelector("div");
    div.addEventListener("click",clickHandler.bind(obj));
    function clickHandler(e) {
       console.log(this);
//            div.removeEventListener("click",clickHandler.bind(this));    //将无法删除侦听事件
    }*/
  // 4 种this 的使用
  /*
     *  普通状态下的this
     *  在代码中直接打印this或者函数中直接打印this，这些都是window
     *
     * */
  console.log("_________________普通状态this分割");
  console.log(this);
  a1();
  function a1() {
      console.log(this)
  }
  /*
  *  在事件中this是事件侦听的对象，等同于e.currentTarget
  * */
    console.log("_________________事件中this分割");
    var div=document.querySelector("div");
     div.addEventListener("click",clickHandler1);
    function clickHandler1(e) {
        console.log(this)
    }

  /*
  *
  *   使用applay，call，bind执行函数
  *   函数中的this就是这个传入的对象，如果对象参数是null，则this是原有this含义
  *   函数名.bind(对象)  不加参数 不执行
  *
  * */
  console.log("_________________Apply和call带入this分割");
  var obj1={a:3,b:4};
  objFun.call(obj1,5,6);
  objFun.apply(obj1,[5,6]);
  objFun.bind(obj1)(5,6);
  objFun.bind(obj);
  function objFun(a,b) {
      var sum=0;
      sum=a+b;
      console.log(this,sum)
  }
  /*
  *  对象中方法，如果调用对象的其它属性或者方法时，需要使用this.属性
  *  这个this就是当前这个对象
  *
  * */
  console.log("_________________对象方法中this分割");
  var obj2={
      z:3,
      b:function () {
          console.log(this.z);
      }
  };
  obj2.b();



</script>
</body>
</html>