this,call apply bind[三版]

120 阅读3分钟

版一

www.runoob.com/js/js-funct…

this的意义是什么?
this的意义就在于:把函数当成了一个对象,或者说像操作对象一样操作函数。
他的目的是用对象来操作函数。(函数属于对象)

this就是代替对象用的

  • 一般而言,在Javascript中,this指向函数执行时的当前对象。

JavaScript 函数有 4 种调用方式。 每种方式的不同在于 this 的初始化。

全局对象

this ---> window

图片.png

函数作为方法调用

函数作为对象方法调用,this指向引用的对象

图片.png

使用构造函数调用函数

构造函数中 this 关键字没有任何的值。this 的值在函数调用实例化对象(new object)时创建。

图片.png

如果没有this,

图片.png

图片.png this就是代替对象用的

版二

www.jianshu.com/p/ea0093beb…

每个函数都包含两个非继承而来的方法call()和apply(),这两个方法都是在特定的作用域中调用函数,等于设置函数体内this对象的值。

apply()方法接收两个参数:
第一个:指当前对象,也就是正在调用这个函数的对象
第二个:数组,例:fn.apply(this, ["name", "jeck"]);或数组对象,例:fn.apply(this, new Array("name", "jeck"));或arguments对象

call()方法接收两个参数:
第一个:指当前对象,也就是正在调用这个函数的对象
第二个:参数列表,例:fn.call(this, num1, num2, num3);

🌰://call方法,可以改变this的指向,this写在括号中

 var a={
   name:"小米",
   eat:function(num,num1){
   console.log("eat"+num+num1,this)
  }
}
 var b ={name:"app"};
 a.eat.call(b);//this指向b
 a.eat.call(red);//this指向red
 a.eat.call(this);//this指向window
 a.eat.call()//this指向window
 a.eat.call(b,"香蕉","菠萝");//函数带有参数的时候,把this写在参数的后面

//apply:同call,区别:带有参数时传的是数组 
a.eat.apply(b,["栗子","冬瓜"]);

this的指向
1.谁调用的方法,this就指向谁

function test(){
  console.log("test方法");
  return function(){
  console.log("哈哈哈哈")
  }
 }
 console.log(window.test,this);//this指window

2.直接调用方法,this指向window
给red添加点击事件

①red.onclick=test();//返回值
②red.onclick=test;//执行点击方法的时候调用了test
red.onclick();//this指向red
test()//this指向window

3、定时器里的this指向window;

 function test(){
  var _this = this;//下划线this是red
  setTimeout(function(){
    console.log("test方法",_this);
},1000)

版三

www.cnblogs.com/Shd-Study/p…

其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解!

先看明白下面:

例1

  obj.objAge;  //17

  obj.myFun()  //小张年龄undefined

例2

 shows()  //盲僧 

 

比较一下这两者this 的差别,第一个打印里面的this 指向obj,第二个全局声明的shows()函数   this 是window ;

1,call()、apply()、bind() 都是用来重定义 this 这个对象的! 如:   

  obj.myFun.call(db);    //德玛年龄99

    obj.myFun.apply(db);    //德玛年龄99

    obj.myFun.bind(db)();   //德玛年龄99

以上出了bind 方法后面多了个 () 外 ,结果返回都一致!

  由此得出结论,bind 返回的是一个新的函数,你必须调用它才会被执行

 

  2,对比call 、bind 、 apply 传参情况下

  

obj.myFun.call(db,'成都','上海');     //德玛 年龄 99  来自 成都去往上海

obj.myFun.apply(db,['成都','上海']);        //德玛 年龄 99  来自 成都去往上海  

obj.myFun.bind(db,'成都','上海')();         //德玛 年龄 99  来自 成都去往上海

obj.myFun.bind(db,['成都','上海'])();   //德玛 年龄 99  来自 成都,上海去往undefined

   微妙的差距!

  从上面四个结果不难看出

  • call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象,第二个参数差别就来了:

  • call的参数是直接放进去的,第二第三第n个参数全都用逗号分隔,直接放到后面  obj.myFun.call(db,'成都', ... ,'string' );

  • apply的所有参数都必须放在一个数组里面传进去  obj.myFun.apply(db,['成都', ..., 'string' ]);

  • bind除了返回是函数以外,它 的参数和call 一样。

  • 当然,三者的参数不限定是string类型,允许是各种类型,包括函数 、 object 等等!