一、函数的不同调用方式决定了this的指向不同,一般指向调用者
1.普通函数   this指向window的调用者
       function fn(){
           console.log('普通函数的this'+this);
       }
       window.fn();
2.对象的方法 this指向的是对象o (object)
       var o={
           sayHi:function(){
               console.log('对象方法this:'+this);
           }
       }
       o.sayHi();
3.构造函数 this指向ldh这个实例
       原型对象里面的this指向的是ldh这个实例对象
        function Star(){}
        Star.prototype.sing=function(){ }
        var ldh=new Star();
4.绑定事件函数this指向的是函数调用者 btn这个按钮对象
        var btn=document.querySelector('button');
        btn.onclick=function(){
            console.log('绑定事件函数的this:'+this);
        }
 5.定时器函数  this 指向的也是window
       window.setTimeout(function(){
           console.log('定时器的this'+this);
       },1000);
6.立即执行函数 this指向window
       (function(){
           console.log('立即执行函数的this'+this);
       })();
二、改变函数内部的this指向
 JavaScript为我们专门提供了一些函数方法帮我们处理函数内部this的指向问题,常用方法有
 bind()、call()、apply()三种方法 ,call()方法调用一个对象,简单理解为调用函数的方式,但是
 它可以改变函数的this指向

fun.call(thisArg,arg1,arg2);
1.call()
       var o={
           name:'any'
       }
       function fn(a,b){
           console.log(this);
           console.log(a+b);
       }
      fn.call(o,1,2);
 //call第一个可以调用函数,第二个可以改变函数内的this指向
 //call的主要作用可以实现继承
 function Father(uname,age,sex){
          this.uname=uname;
          this.age=age;
          this.sex=sex;
      }
      function Son(uname,age,sex){
          Father.call(this,uname,age,sex);
      }
      var son=new Son('刘德华',19,'男');
      console.log(son);
2.apply() 应用
      var o={
          name:'any'
      }
      function fn(arr){
          console.log(this);
          console.log(arr);//'pink'
      }
      fn.apply(o,['pink']);
      //1.也是调用函数 第二个可以改变函数内部的this指向
      //2.但是他的参数必须是数组(伪数组)
      //3.apply的主要应用 比如说我们可以利用apply借助于
      //数学内置对象求最大值
      //Math.max();
      var arr=[1,32,56,88];
    //var max= Math.max.apply(null,arr);
     var max= Math.max.apply(Math,arr);
     var min= Math.min.apply(Math,arr);
     console.log(max,min);
3.bind() 绑定
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    var o={
        name:'andy'
    };
    function fn(a,b){
        console.log(this);
        console.log(a+b);
    };
    var f= fn.bind(o,1,2);
       f();
       //1.不会调用原来的函数 可以改变原来函数内部的this指向
       //2.返回的是原函数改变this之后产生的函数
       //3.如果有的函数我们不需要立即调用,但是又想改变这个函数内部
       //的this指向,此时用bind
          var btn =document.querySelector('button');
         btn.onclick=function(){
             this.disabled=true;//this指向的是btn
                //var that=this;
         setTimeout(function(){
        //    that.disabled=false;//定时器函数里面的this指向window
                this.disabled=false;//此时定时器函数里面的this指向的是btn
              }.bind(this),3000)//这个this指向的是btn这个对象
          }   
        
        var btns=document.querySelectorAll('button');
        for(var i=0;i<btns.length;i++){
            btns[i].onclick=function(){
                this.disabled=true;
                setTimeout(function(){
                 this.disabled=false;
                }.bind(this),3000)
            }
        }
 
 
三、call apply bind总结
         相同点:
         都可以改变函数内部的this指向
         区别点:
         1.call和apply会调用函数并且改变函数内部的this指向
        2.call和apply传递的参数不一样,call传递参数aru1、aru2形式
           apply必须数组形式[arg]
        3.bind不会调用函数,可以改变函数内部的this指向。
       主要应用场景:
         1.call经常做继承
         2.apply经常跟数组有关系,比如借助数学对象实现数组最大值和最小值
         3.bind不调用函数,但是还是想改变this指向,比如改变定时器内部的this指向。

函数的不同调用方式决定了this的指向不同的更多相关文章

  1. JS的一些总结(函数声明和函数表达式的区别,函数中的this指向的问题,函数不同的调用方式,函数也是对象,数组中的函数调用)

    一.函数声明和函数表达式的区别: 函数声明放在if——else语句中,在IE8中会出现问题 函数表达式则不会 <script> if(true){ function f1(){ conso ...

  2. JS高级---函数中的this的指向,函数的不同调用方式

    函数中的this的指向 普通函数中的this是谁?-----window 对象.方法中的this是谁?----当前的实例对象 定时器方法中的this是谁?----window 构造函数中的this是谁 ...

  3. js函数的四种调用方式以及对应的this指向

    一.函数调用,此时this是全局的也就是window 1 var c=function(){ 2 alert(this==window) 3 } 4 c()//true 二.方法调用 var myOb ...

  4. 函数四种调用模式以及其中的this指向

    第一种:函数直接执行模式 function add(a,b){ console.log(this); return a+b; } add(10,20)//this===window 第二种:对象方法的 ...

  5. Javascript中函数的四种调用方式

    一.Javascript中函数的几个基本知识点: 1.函数的名字只是一个指向函数的指针,所以即使在不同的执行环境,即不同对象调用这个函数,这个函数指向的仍然是同一个函数. 2.函数中有两个特殊的内部属 ...

  6. javascript 函数的4种调用方式与 this(上下文)的指向

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! javascript中作用域链和this(上下文)的指向是很容易混淆的,简单的说就是: 作用域链取决于函数 ...

  7. JavaScript函数的声明与调用方式

    入职第一天小记 对于初入前端的程序猿来说,对于函数的理解与使用可谓是相当浅薄的,回顾这自己近几年的工作以及学习经历,准备对JavaScript来个系统的总结. 如果要我们对H5中的表单做个简单的校验, ...

  8. 浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序

    在Javascript定义一个函数一般有如下三种方式: 函数关键字(function)语句: function fnMethodName(x){alert(x);} 函数字面量(Function Li ...

  9. JS调用函数的两种方式

    <script type="text/javascript"> window.onload = init; //onload 表示页面全部加载完毕后,再调用init() ...

随机推荐

  1. thinkphp5 input坑

    取值方式改了而已?a1=1&a2=2这种可以用input(get.) a1/1/a2/2 用input('a1')和input('a2') post方法当然是input('post.') 我觉 ...

  2. 吕建文 20199303《Linux内核原理与分析》第十二周作业

    ShellShock攻击实验 2014年9月24日,Bash中发现了一个严重漏洞shellshock,该漏洞可用于许多系统,并且既可以远程也可以在本地触发.在本实验中,学生需要亲手重现攻击来理解该漏洞 ...

  3. css之单位

    css之单位 角度<angle> 用于<gradient>s和某些transform功能中 deg表示以度为单位的角度.一整圈就是360deg. 例如:0deg,90deg,1 ...

  4. 【Linux常见命令】paste命令

    paste - merge lines of files paste 命令用于合并文件的列. paste 指令会把每个文件以列对列的方式,一列列地加以合并. 语法: paste [OPTION]... ...

  5. CCS进阶——div的宽度和高度是由什么决定的?

    核心知识 文档流/普通流(Normal Flow) 内联元素的宽高(高度是由行高决定的,宽度=内容+border+marging+padding) 块级元素的宽高(高度是内部文档流元素的高度总和,宽度 ...

  6. linux之centos安装jdk以及nginx详细过程

    一.安装jdk 1:首先下载jdk到本地,然后通过git 上传到linux服务器上 2:进入目录usr,并创建目录java,将jdk的压缩文件移动到该目录下 cd /usr mkdir java mv ...

  7. 使nfs同步生效

    我们在使用nfs的时候会遇到往nfs server端写个文件,client需要很久才能生效,我们想让立刻生效有两种办法:1.mount -t nfs -o noac IP:/data/xxxx /xx ...

  8. GPTL—练习集—006树的遍历

    #include<bits/stdc++.h> using namespace std; typedef int daTp;//datatype typedef struct BTNode ...

  9. muduo网络库源码学习————条件变量

    muduo里的CountDownLatch类实际上是对条件变量condition进行的封装,既可以用于所有子线程等待主线程发起 "起跑" ,也可以用于主线程等待子线程初始化完毕才开 ...

  10. 前端之HTML1

    直接上代码: <!DOCTYPE html> <html> <body bgcolor="green"> <h1 align=" ...