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

　　　　平时确定一个函数中的this是谁，我们需要通过调用模式来确定
　　　　1. 函数调用模式 this ---> window 函数名()
　　　　2. 方法调用模式 this ---> 调用方法的对象 对象.方法名()
　　　　3. 构造函数调用模式 this ---> 创建出来的实例  new 函数名()
　　　　4. 上下文调用模式 this ---> call和apply的第一个参数 函数名.call()
 
元素绑定事件，方法中的this是当前操作的元素
                    方法名前面是否有点，有点，点前面是谁this就是谁，没有.this是window（严格模式下是undefined）
                    构造函数执行，方法体中的this指向向new出来的对象
 
     // 想要判断函数中的this指向谁,遵循两条原则:

     // 1. 我们要判断的this在哪个函数中

     // 2. 这个函数是哪种调用模式调用的

     function fn(){

         console.log(this);

     }

     // 普通函数调用: this --> window

     fn(); 

     //对象调用 this -->obj

     var obj = {};

     obj.f = fn;

     obj.f();  //this -->obj

     // new 调用函数 this --> 新创建出来的实例对象

     var f = new fn();

     // 注册事件  this --> box

     box.onclick = fn;

     // 定时器  this --> window

     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被指定了
 
     function fn(x, y){

         console.log(this);

         console.log(x + y);

     }

     var f = fn.bind({a:1});  //fn中的this 永久绑定{a: 1} ；f是新克隆出来的函数

     console.log(f);  //输出 一个新的函数

 /*

 输出结果  ƒ fn(x, y){

             console.log(this);

             console.log(x + y);

          }

  */

      f(1,2);   // {a: 1}  3

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

案例

 <!DOCTYPE html>

 <html lang="en">

 <head>

       <meta charset="UTF-8">

       <meta name="viewport" content="width=device-width, initial-scale=1.0">

       <meta http-equiv="X-UA-Compatible" content="ie=edge">

       <title>Document</title>

 </head>

 <body>

       <!-- 当我们需要批量创建对象的时候，需要用到构造函数，构造函数如何继承？ -->

       <!-- 借用构造函数法继承 -->

       <!-- student里面的name age不想在重复的书写了 -->

 <script>

       function Person (name,age){//03   'zh'，18

             this.name=name;      //   a.name='zh'

             this.age=age;        //   a.age=18

       }

       function Student (name,age,score){//('zh',18,100)

             Person.call(this,name,age);//02 this指向a， Person.call()调用了函数,并将参数'zh'，18传入

             this.score=score;

       }

       var a=new Student('zh',18,100) //01 new Student()会调用Student构造函数，并且将构造函数中的this指向new出来的新对象a,

       console.log(a)                 //还会把参数('zh',18,100)传入 构造函数中

       // new的作用

       // 创建一片空的储存空间

       // 让子对象继承父对象

       // 调用构造函数，并将构造函数中的this 指向new新对象

       // 返回新对象的地址给变量

 </script>

 </body>

 </html>
 

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

  1. this指向与call,apply,bind

    this指向与call,apply,bind ❝ 「this」问题对于每个前端同学来说相信都不陌生,在平时开发中也经常能碰到,有时候因为「this」还踩过不少坑,并且「this」问题在面试题中出现的概 ...

  2. JavaScript中call,apply,bind方法的总结。

    why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...

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

    原文链接:http://www.cnblogs.com/pssp/p/5215621.html why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之 ...

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

    why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user: "小马扎", fn: ...

  5. js 中arguments，call,apply,bind的使用

    //对于 arguments和this, 每个函数都有自己独有的arguments和this, 且不进行链式查找 //arguments是什么? //答:1:arguments是收到的实参副本 //2 ...

  6. JavaScript中call,apply,bind方法的区别

    call,apply,bind方法一般用来指定this的环境. var a = { user:"hahaha", fn:function(){ console.log(this.u ...

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

    之前一直迷惑,记不住call(),apply(),bind()的区别.不知道如何使用,一直处于懵懂的状态.直到有一天面试被问到了这三个方法的区别,所以觉得很有必要总结一下. 如果有不全面的地方,后续再 ...

  8. js中的call,apply,bind区别

    在JavaScript中,call.apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向. call.apply.bind方法的共同点和区别:app ...

  9. JavaScript中call,apply,bind方法

    why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...

随机推荐

  1. JAVA 关于File的使用

    File中常用方法 创建 createNewFile() 在指定位置创建一个空文件,成功就返回true,如果已存在就不创建然后返回false mkdir() 在指定位置创建目录,这只会创建最后一级目录 ...

  2. CreateMutex函数 （转）

    CreateMutex函数 该函数找出当前系统是否已经存在指定进程的实例.如果没有则创建一个互斥体. CreateMutex()函数可用来创建一个有名或无名的互斥量对象,其函数原型为: HANDLE ...

  3. UML快速理解

    在团队协作过程中最常见的就是开会.开会最常用的就是图,而图中最常见的就是流程图.时序图.类图,这三个图可以清楚的描述你想解释的内容.学好类图不仅仅能帮助自己更清楚的梳理业务,还能提高开会效率. 上图是 ...

  4. R语言里面的循环变量

    for (i in 1:10) { print("Hello world") } 以上这条命令执行完之后,变量i会被保存下来!并且,i的值将是10. 程序中有多处循环的时候要非常注 ...

  5. 类数组对象与 arguments

    类数组对象:拥有一个 length 属性和若干索引属性的对象 var array = ['name', 'age', 'sex']; var arrayLike = { 0: 'name', 1: ' ...

  6. centos7标准版命令界面和图形界面相互切换

    1.root登陆终端 2.输入命令 vi /etc/inittab ,查看两种界面的启动模式: 3.退出vi模式,,输入命令systemctl get-default 查看当前系统启动模式:我的是命令 ...

  7. 日志管理工具logrotate

    工作所需,需要管理脚本的打印日志,百度一圈,发现了logrotate这款工具,经测试确实挺好的! 话不多说,直接上重点,以便于以后需要时查看 命令: whereis logrotate 可以看到log ...

  8. [luogu]P1315 观光公交[贪心]

    [luogu]P1315 [NOIP2011]观光公交 ——!x^n+y^n=z^n 题目描述 风景迷人的小城Y 市,拥有n 个美丽的景点.由于慕名而来的游客越来越多,Y 市特意安排了一辆观光公交车, ...

  9. Android签名机制之---签名验证过程详解

    一.前言 今天是元旦,也是Single Dog的嚎叫之日,只能写博客来祛除寂寞了,今天我们继续来看一下Android中的签名机制的姊妹篇:Android中是如何验证一个Apk的签名.在前一篇文章中我们 ...

  10. C# WinForm 中Label自动换行 解决方法

    在TableLayoutPannel中放着一些Label如果把Label的AutoSize属性设成True的话,文字超过label长度时就会自动增加,直到后面的字出窗体以外设置成False时,一旦到达 ...