zoukankan      html  css  js  c++  java
  • this的指向问题 call apply bind 中的this

    在函数中this指向谁:     函数中的this指向谁,是由函数被调用的那一刻就确定下来的

        平时确定一个函数中的this是谁,我们需要通过调用模式来确定
        1. 函数调用模式 this ---> window 函数名()
        2. 方法调用模式 this ---> 调用方法的对象 对象.方法名()
        3. 构造函数调用模式 this ---> 创建出来的实例  new 函数名()
        4. 上下文调用模式 this ---> call和apply的第一个参数 函数名.call()
     
    元素绑定事件,方法中的this是当前操作的元素
                        方法名前面是否有点,有点,点前面是谁this就是谁,没有.this是window(严格模式下是undefined)
                        构造函数执行,方法体中的this指向向new出来的对象
     
     1     // 想要判断函数中的this指向谁,遵循两条原则:
     2     // 1. 我们要判断的this在哪个函数中
     3     // 2. 这个函数是哪种调用模式调用的
     4 
     5     function fn(){
     6         console.log(this);
     7     }
     8 
     9     // 普通函数调用: this --> window
    10     fn(); 
    11 
    12     //对象调用 this -->obj
    13     var obj = {};
    14     obj.f = fn;
    15     obj.f();  //this -->obj
    16 
    17     // new 调用函数 this --> 新创建出来的实例对象
    18     var f = new fn();
    19 
    20     // 注册事件  this --> box
    21     box.onclick = fn;
    22 
    23     // 定时器  this --> window
    24     setInterval(fn,1000);  //fn内部底层是被浏览器调用的所以也指window
    上下文调用模式: 其实就是js中提供给我们的三个方法.而这三个方法的作用就是随意控制函数中this的指向
    call
    函数.call(第一个参数:想让函数中this指向谁,就传谁进来,
    后面的参数:本身函数需要传递实参,需要几个实参,就一个一个的传递即可);
    call的作用: 1. 调用函数 2.指定函数中this指向
     
    apply
    函数.apply(第一个参数:想让函数中this指向谁,就传谁进来,
    第二个参数:要求传入一个数组,数组中包含了函数需要的实参)
    apply的作用: 1. 调用函数 2, 指定函数中this的指向
     
    bind
    函数.bind(第一个参数:想让函数中this指向谁,就传谁进来,
    后面的参数:本身函数需要传递实参,需要几个实参,就一个一个的传递即可)
    bind的作用: 1. 克隆当前函数,返回克隆出来的新的函数
             2. 新克隆出来的函数,这个函数的this被指定了
     
     1     function fn(x, y){
     2         console.log(this);
     3         console.log(x + y);
     4     }
     5 
     6     var f = fn.bind({a:1});  //fn中的this 永久绑定{a: 1} ;f是新克隆出来的函数
     7     console.log(f);  //输出 一个新的函数 
     8 /*
     9 输出结果  ƒ fn(x, y){
    10             console.log(this);
    11             console.log(x + y);
    12          }   
    13  */
    14      f(1,2);   // {a: 1}  3

    上下文调用模式的三个方法的总结:
    call, apply 这两个方法都会调用函数
    call, bind 这两个方法,后面的传参方式是一样的
    bind方法不会调用函数,只会克隆一个新的函数出来,这个新的函数中this已经被指定了
    apply方法第二个参数,要求传入一个数组,这个数组中包含函数需要的实参

    案例

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4       <meta charset="UTF-8">
     5       <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6       <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7       <title>Document</title>
     8 </head>
     9 <body>
    10       <!-- 当我们需要批量创建对象的时候,需要用到构造函数,构造函数如何继承? -->
    11       <!-- 借用构造函数法继承 -->
    12       <!-- student里面的name age不想在重复的书写了 -->
    13 <script>
    14       function Person (name,age){//03   'zh',18
    15             this.name=name;      //   a.name='zh'
    16             this.age=age;        //   a.age=18
    17       }
    18 
    19       function Student (name,age,score){//('zh',18,100)
    20             Person.call(this,name,age);//02 this指向a, Person.call()调用了函数,并将参数'zh',18传入
    21             this.score=score;
    22  
    23       }
    24 
    25       var a=new Student('zh',18,100) //01 new Student()会调用Student构造函数,并且将构造函数中的this指向new出来的新对象a, 
    26       console.log(a)                 //还会把参数('zh',18,100)传入 构造函数中
    27 
    28       // new的作用
    29       // 创建一片空的储存空间
    30       // 让子对象继承父对象
    31       // 调用构造函数,并将构造函数中的this 指向new新对象
    32       // 返回新对象的地址给变量
    33 
    34 
    35 </script>
    36 </body>
    37 </html>
     
  • 相关阅读:
    hdu 3342 Legal or Not 拓排序
    hdu 1596 find the safest road Dijkstra
    hdu 1874 畅通工程续 Dijkstra
    poj 2676 sudoku dfs
    poj 2251 BFS
    poj Prime Path BFS
    poj 3278 BFS
    poj 2387 Dijkstra 模板
    poj 3083 DFS 和BFS
    poj 1062 昂贵的聘礼 dijkstra
  • 原文地址:https://www.cnblogs.com/javascript9527/p/11386292.html
Copyright © 2011-2022 走看看