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>

原文地址:https://www.cnblogs.com/javascript9527/p/11386292.html

时间: 2024-10-04 13:43:08

this的指向问题 call apply bind 中的this的相关文章

JavaScript中call,apply,bind方法的总结

why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:function(){ console.log(this.user); } } var b = a.fn; b(); //undefined 我们是想打印对象a里面的user却打印出来undefined是怎么回事呢?如果我们直接执行a.fn()是可以的. var a = { user:"追梦子&quo

JS中call,apply,bind方法的总结

why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user: "小马扎", fn: function(){ console.log(this.user); } } var b = a.fn; b(); // undefined 我们是想打印对象a里面的user却打印出来undefined是怎么回事呢?如果我们直接执行a.fn()是可以的. var a = { user: "小马扎

JavaScript中call,apply,bind方法

why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:function(){ console.log(this.user); } } var b = a.fn; b(); //undefined 我们是想打印对象a里面的user却打印出来undefined是怎么回事呢?如果我们直接执行a.fn()是可以的. var a = { user:"追梦子&quo

javascript中的call(),apply(),bind()方法的区别

之前一直迷惑,记不住call(),apply(),bind()的区别.不知道如何使用,一直处于懵懂的状态.直到有一天面试被问到了这三个方法的区别,所以觉得很有必要总结一下. 如果有不全面的地方,后续再进行补充. 1. 改变this的指向 var obj = { name : '张三', age : 17, myFun : function () { console.log(this.name + ' ' + this.age); } } var obj2 = { name : '李四', age

深入浅出:了解JavaScript中的call,apply,bind的差别

在 javascript之 this 关键字详解文章中,谈及了如下内容,做一个简单的回顾: 1.this对象的涵义就是指向当前对象中的属性和方法. 2.this指向的可变性.当在全局作用域时,this指向全局:当在某个对象中使用this时,this指向该对象:当把某个对象的方法赋值给      另外一个对象时,this会指向后一个对象. 3.this的使用场合有:在全局环境中使用:在构造函数中使用,在对象的方法中使用. 4.this的使用注意点,最重要的一点就是要避免多层嵌套使用this对象.

js中的call,apply,bind区别

在JavaScript中,call.apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向. call.apply.bind方法的共同点和区别:apply . call .bind 三者都是用来改变函数的this对象的指向的:apply . call .bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文(函数的每次调用都会拥有一个特殊值--本次调用的上下文(context)--这就是this关键字的值.):apply . ca

call, apply, bind 函数能干啥?如何在日常搬砖中使用?(全)

call(),apply(),bind() 函数大家可能都有所了解,但是在平时搬砖过程中很可能或者基本没用过,学过但都淡忘了. 但是在大量第三方的框架(库),甚至js自己都在 源码中大量使用 call,apply 函数.所以今天和大家仔细讨论下它们在 开发中的应用场景 . 1 . 它们是啥意思 1.1 作用 他们的作用都是改变函数内部的this. 这三个函数都是函数对象的方法,也就是说只有函数才可以直接调用这些方法. ps:call,apply,bing属于this显示绑定,还有好几种其他的th

别真以为JavaScript中func.call/apply/bind是万能的!

自从学会call/apply/bind这三个方法后我就各种场合各种使用各种得心应手至今还没踩过什么坑,怎么用?说直白点就是我自己的对象没有某个方法但别人有,我就可以通过call/apply/bind去调用执行别人家的方法,不太懂具体用法的同学可移至MDN学习一下Function.prototype.call() Function.prototype.apply() Function.prototype.bind() ,本文不讲解使用,但是这三个方法并不是万能的,并不一定会执行你想要的那个函数,因

javascript中call,apply,bind的用法对比分析

这篇文章主要给大家对比分析了javascript中call,apply,bind三个函数的用法,非常的详细,这里推荐给小伙伴们. 关于call,apply,bind这三个函数的用法,是学习javascript这门语言无法越过的知识点.下边我就来好好总结一下它们三者各自的用法,及常见的应用场景. 首先看call这个函数,可以理解成"借用“,"请求".想像一下如下的情景:你孤单一人漂泊在外,有急事想往家里打电话,可是很不巧,手机欠费了,或者没电了,或者掉坑里了,总之你的手机就是用