在函数中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. VNware上安装虚拟机Ubuntu16.10 并安装petalinux

    1.下载 VMware VMware-workstation-full-15.0.0-10134415.exe 自己寻找激活码 Ubuntu镜像 UG1144 PetaLinux Tools Docu ...

  2. IncDec Sequence （差分）

    题目地址 这道题可以用来检测一下你是否学会了差分,或者你可以更加透彻的理解差分 我们把 \(cf[]\) (差分)数组拿出了,就可以发现这道题就是每次可以在 \(cf[]\)中 选两个数,一个+1,一 ...

  3. python学习笔记（十）常用模块

    import os print(os.getcwd())#取当前工作目录,绝对路径 print(os.chdir("../"))#更改当前目录,.代表当前目录,..代表上一级目录 ...

  4. spring boot整合quartz定时任务案例

    1.运行环境 开发工具:intellij idea JDK版本:1.8 项目管理工具:Maven 4.0.0 2.GITHUB地址 https://github.com/nbfujx/springBo ...

  5. Python3解leetcode Reach a Number

    问题描述: You are standing at position 0 on an infinite number line. There is a goal at position target. ...

  6. 攻防世界 | guess_num

    查源码发现v5可以覆盖sreed[0],这样这个随机数列就可控了 在随机种子这里我一开始使用devC++来生成,居然结果跟gcc的不一样

  7. python-zx笔记10-断言

    断言 断言内容是自动化脚本的重要内容,正确设置断言以后才能帮助我们判断测试用例执行结果. 断言方法 assertEqual(a, b) 判断a==b assertNotEqual(a, b) 判断a! ...

  8. Linux下MySQL 5.5的修改字符集编码为UTF8（彻底解决中文乱码问题）

    一.登录MySQL查看用SHOW VARIABLES LIKE 'character%';下字符集,显示如下: +--------------------------+---------------- ...

  9. 【Pytest】python单元测试框架pytest简介

    1.Pytest介绍 pytest是python的一种单元测试框架,与python自带的unittest测试框架类似,但是比unittest框架使用起来更简洁,效率更高.根据pytest的官方网站介绍 ...

  10. mui初级入门教程（二）— html5+ webview 底部栏用法详解

    文章来源:小青年原创发布时间:2016-05-19关键词:mui,html5+,webview转载需标注本文原始地址: http://zhaomenghuan.github.io/#!/blog/20 ...