JS 中的this指向问题和call、apply、bind的区别

this的指向问题

  • 一般情况下this对象指向调用函数的对象,全局环境中执行函数this对象指向window。

    function a(){
    console.log(this); //输出函数a中的this对象 } function b(){}; var c={name:"call"}; //定义对象c
    var c = { getFunc:function(){ return function(){ console.log(this) } } } var cFun = c.getFunc(); cFun()//Window 这是因为在全局环境下执行的函数

  • 在call和apply函数中this指向的是指定的对象,如果指定的对象为undefined或者null,那this对象指向window,如果指定的对象为空this也是指向的window,如果指向的对象是字符串,那this指向的就是String

    var d = { getThis:function(){ console.log(this) } } var e = { name:'e'//(给e写个name属性只是因为觉得孤零零的太难看了~~) } d.getThis.call(e); //这句话就相当于说把对象d中的上下文环境换成了对象e d.getThis.call(66); //Number d.getThis.call('wan'); //String d.getThis.call(); //Window d.getThis.call(true); //Boolean

  • 如果在箭头函数中,this对象等同于外层代码中的this

    var f = { getThis: ()=>{ console.log(this) }, getThis2: function(){ console.log(this); } } f.getThis(); //Window f.getThis2(); //f

call、apply、bind的区别

  • call的基本用法

    • 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]])
    • 定义:调用一个对象的一个方法,以另一个对象替换当前对象。
    • call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
    • thisObj的取值有以下4种情况:
      • 不传,或者传null,undefined, 函数中的this指向window对象
      • 传递另一个函数的函数名,函数中的this指向这个函数的引用
      • 传递字符串、数值或布尔类型等基础类型,函数中的this指向其对应的包装对象,如 String、Number、Boolean
      • 传递一个对象,函数中的this指向这个对象

    function a(){
    console.log(this); //输出函数a中的this对象 }
    function b(){}
    var c={name:"call"}; //定义对象c
    a.call(); //window a.call(null); //window a.call(undefined); //window a.call(1); //Number a.call(''); //String a.call(true); //Boolean a.call(b); //function b(){} a.call(c); //Object

  • apply的基本用法

    • 语法:**apply([thisObj[,argArray]]) **
    • 定义:应用某一对象的一个方法,用另一个对象替换当前对象。
    • 如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。 如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。

    function class1(args1,args2){
    this.name=function(){
    console.log(args,args);
    }
    }
    function class2(){
    var args1="1"; var args2="2"; class1.call(this,args1,args2);
    // class1.apply(this,[args1,args2]); } var c=new class2();
    c.name(); //1,2

  • bind的基本用法

    • bind是在EcmaScript5中扩展的方法(IE6,7,8不支持)

    • bind() 方法与 apply 和 call 很相似,也是可以改变函数体内 this 的指向。

    • bind()方法会创建一个新函数,称为绑定函数,当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为 this,传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数

      var bar = function(){ console.log(this.x); } var foo = { x:3 } bar(); // undefined var func = bar.bind(foo); func(); // 3

  • call、apply、bind三者的区别

    • 三者都是来改变函数的this对象的指向的

    • 三者的第一个参数都是this要指向的对象,也就是要指定的上下文

    • 三者都可以利用后续参数传参

    • bind是返回对应函数,便于稍后调用,call、apply是立即调用

    • call和apply作用是完全一样的,只是接收参数的方式不一样,call需要把参数按顺序传递进去,而apply则是把参数放在数组里。

      var obj = { x: 81, }; var foo = { getX: function() { return this.x; } } console.log(foo.getX.bind(obj)()); //81 console.log(foo.getX.call(obj)); //81 console.log(foo.getX.apply(obj)); //81 三个输出的都是81,但是注意看使用 bind() 方法的,他后面多了对括号。

参考文章:https://www.cnblogs.com/libin-1/p/6069031.html

点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

皕杰报表之UUID

​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

java 复制Map对象(深拷贝与浅拷贝)

java复制Map对象(深拷贝与浅拷贝)CreationTime2018年6月4日10点00分Author:Marydon1.深拷贝与浅拷贝  浅拷贝:只复制对象的引用,两个引用仍然指向同一个对象

JavaScript中call()、apply()、bind()的用法

call()apply()bind()都是用来更改this的指向的其中bind()返回的是一个函数,必须执行才行传参差异:call、bind、apply这三个函数的第一个参数都是this的指向对象,第二个参数差别就来了:call的参数是直接放进去的,第二第三第n个参数全都用逗号分隔,直接放到后面obj.myFun.call(db,'