在函数中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. c# 反射获取属性值 TypeUtils

    using System; using System.Collections.Generic; using System.Linq; using System.Reflection; using Sy ...

  2. AJAX——理解XMLHttpRequest对象

    AJAX大家已经都知道了,XMLHttpRequest对象则是AJAX的核心.这篇博客重点总结一下这个对象的使用. XMLHttpRequest对象的属性和方法: 属性 说明 readyState 表 ...

  3. [LeetCode] 53. Maximum Subarray 最大子数组 --动态规划+分治

    Given an integer array nums, find the contiguous subarray (containing at least one number) which has ...

  4. 图片没有.png或者jpg后缀能不能加载？

    是可以的,如:http://mmbiz.qpic.cn/mmbiz_png/MW1VecOrnw6HUMvEUNUxibLVtbY2vHF8QkFyviaickh8pnsapQ8gOosdq13SBX ...

  5. JDK1.8 红黑树

    序言 当在10亿数据中只需要进行10几次比较就能查找到目标时,不禁感叹编程之魅力!人类之伟大呀! —— 学红黑树有感. 红黑树的应用 红黑树的应用比较广泛,主要是用它来存储有序的数据,它的时间复杂度是 ...

  6. FFT IP核调用与仿真之FFT数学分析

    对于FFT这个IP核,我其实对它真的是又爱又恨,因为它真的耗费了我太多时间,但是随着研究的深入,遇到的问题一点点给消化解决,终于不用带着问题睡觉了,哈哈,有时候真的挺佩服自己的,遇到不懂的,不了解的, ...

  7. 为应用程序池 ''DefaultAppPool'' 提供服务的进程意外终止。进程 ID 是 ''xxx''问题的解决方法

    网上提供了很多办法,都未解决. 解决过程一波三折,依次用了下列方法: 1.解决办法 点击“开始”-“控制面板”-“管理工具”-“组件服务”-“计算机”-“我的电脑”-“DCOM”选项, 选择其下的“I ...

  8. 20180715-Java日期时间

    import java.util.Date;public class DateDemo{ public static void main(String[] args){ //初始化Date对象 Dat ...

  9. Eclipse中安装和使用FindBugs

    FindBugs在Eclipse的离线安装:   1 到http://findbugs.sourceforge.net/downloads.html下载20131115123549_nlpir_ict ...

  10. js初步简单的编程代码

    简单图片切换编码demo图片地址自行替换 简单图片切换编码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...