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>
