this的指向问题 call apply bind 中的this

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

 

    平时确定一个函数中的this是谁,我们需要通过调用模式来确定
    1. 函数调用模式 this ---> window 函数名()
    2. 方法调用模式 this ---> 调用方法的对象 对象.方法名()
    3. 构造函数调用模式 this ---> 创建出来的实例  new 函数名()
    4. 上下文调用模式 this ---> call和apply的第一个参数 函数名.call()
 
 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>

 

 

 

 

 

this的指向问题 call apply bind 中的this

上一篇:Js中的call,apply和bind及记忆方式


下一篇:elasticsearch mappings之dynamic的三种状态