在函数中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. python3-返回函数

    函数作为返回值 高阶函数除了可以接受函数作为参数外,还可以把函数作为结果值返回. 我们来实现一个可变参数的求和.通常情况下,求和的函数是这样定义的: def calc_sum(*args): ax = ...

  2. MAN PVCREATE

    PVCREATE(8)                                                        PVCREATE(8) NAME/名称       pvcreat ...

  3. mysql版本

    $ mysql Welcome to the MariaDB monitor.  Commands end with ; or \g. Your MySQL connection id is 4791 ...

  4. [14th CSMO Day 1 <平面几何>]

    关于LowBee苦思冥想的结果(仅供参考):

  5. Nginx负载均衡与反向代理—《亿级流量网站架构核心技术》

    当我们的应用单实例不能支撑用户请求时,此时就需要扩容,从一台服务器扩容到两台.几十台.几百台.然而,用户访问时是通过如http://www.XX.com的方式访问,在请求时,浏览器首先会查询DNS服务 ...

  6. 2019 上海网络赛 J stone name (01背包)

    题目:https://nanti.jisuanke.com/t/41420 题意:给你一个集合,然后让你拆成两个集合 x,y    求满足  x>y  &&  x-(x集合中最小 ...

  7. CodeForces - Path Queries (并查集+离线查询)

    题目:https://vjudge.net/contest/323699#problem/A 题意:给你一棵树,然后有m个查询,每次查询问一条路径最大边小于给定查询的数量 思路:首先我们看到,我们其实 ...

  8. webApp 页面布局

    1. 流式布局 概念:流式布局是页面元素宽度按照屏幕分辨率进行适配调整,但是整体布局不变. 设计方法:布局都是通过百分比来定义宽度,但是高度大都是用px固定的. 弊端: 虽然可以让各种屏幕适配,但是显 ...

  9. leetcode 238. 除自身以外数组的乘积 (python)

    给定长度为 n 的整数数组 nums,其中 n > 1,返回输出数组 output ,其中 output[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积. 示例: 输入: [1 ...

  10. day27—JavaScript实现定时器及其应用案例

    转行学开发,代码100天——2018-04-12 JavaScript中定时器有两种,分别是setInterval和setTimeout;其用法如下: 开启: setTimeout("fun ...