在函数中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>
原文地址:https://www.cnblogs.com/javascript9527/p/11386292.html