在函数中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. Email常用缩写

    Abbreviations Used in email Abbreviation Meanings ATM at the moment AFAIK as far as I know BTW by th ...

  2. spring requestbody json

    1  @requestbody string param 前台将jsonobject序列化成字符串 后台解析成JsonObject 2 @requestbody map<string,objec ...

  3. 阿里云轻应用云服务器配置tomcat

    #etc/profile export CATALINA_HOME=/wocloud/tomcat_cluster/tomcat1/apache-tomcat-7.0.57 #查看防火墙状态 fire ...

  4. Facebook超过1亿用户数据泄露，疑与中国黑客组织有关？

    Facebook又向用户投放了另一个重磅炸弹,承认其超过1亿用户中的所有用户都应该认定恶意的第三方垃圾信息以及强大的黑客组织泄露了他们的公开个人资料信息. 周三,Facebook首席执行官马克扎克伯格 ...

  5. Task4.文本表示：从one-hot到word2vec

    参考:https://blog.csdn.net/wxyangid/article/details/80209156 1.one-hot编码 中文名叫独热编码.一位有效编码.方法是使用N位状态寄存器来 ...

  6. [原创] Delphi Win API函数 操作帮助文件 HtmlHelpA函数介绍

    Delphi Win API函数 操作帮助文件 HtmlHelpA函数介绍 函数原型:HWND HtmlHelpA( HWND hwndCaller, LPCSTR pszFile, UINT uCo ...

  7. 【面试题】JavaScript

    第一题 合并 const a = { name: "zhangsan", age: 22 } const b = { name: "lisi", age: 55 ...

  8. window10 安装 docker

    0.打开Hyper-V. 安装成功后,查看“任务管理器”: 1.下载安装程序. 2.一路"next"安装.安装成功后,桌面会出现图标: 3.双击该图标,成功运行后,右小角出现: 右 ...

  9. selenium 浏览器无界面模式运行

    以Chrome浏览器为例: 方法一: from selenium.webdriver import Chrome, ChromeOptions opt = ChromeOptions() # 创建Ch ...

  10. Appium解决native+webview混合型APP(公众号、小程序)切换webview后元素无法定位问题

    问题:最近在做一个安卓+H5混合开发的APP自动化测试,发现在从native切换到webview后,元素仍然无法找到,报错:no such element 思路:于是思考webview会不会像web页 ...