js中call()、apply()、bind()的认识

首先看两个例子
  • 1
var name='小王',age=17;
var obj={
    name:'小张',
    objAge:this.age,
    myFun:function(){
        console.log(this.name+"年龄"+this.age);
    }
}
obj.objAge; //17
obj.myFun();//小张年龄 undifined;
  • 2
var fav='云天明';
function shows(){
    console.log(this.fav);
}
show()//云天明

这两个函数打印语句里面的this,第一个指向obj对象,第二个指向全局变量。


call()、apply()、bind()方法可以修改运行时函数的指针,实际上是改变函数运行时this的值。

了解一下js中的this

js中的this用法有以下几种

  1. 纯粹的函数调用
    最通用的用法属于全局调用,this就代表全局对象。
var x = 1;
function test() {
   console.log(this.x);
}
test();  // 1
  1. 作为对象方法的调用
    函数作为某个对象的方法,在对象中定义方法,如开头中的例1
    也可以如下面这种
function test() {
  console.log(this.x);
}

var obj = {};
obj.x = 1;
obj.m = test;

obj.m(); // 1
  1. 作为构造函数调用
    所谓构造函数,就是通过这个函数,可以生成一个新对象。这时,this就指这个新对象。就是函数定义中有this,当new这个函数的时候this就指向这个函数实例。
var x = 2;
function test() {
  this.x = 1;
}

var obj = new test();
x  // 2

this是指向函数本身的,不是指向全局变量。


  1. call()、apply()、bind() 都是用来重定义 this 指向的对象的!
    如下面这个实例
var name='小王',age=17;
var obj={
    name:'小张',
    objAge:this.age,
    myFun:function(){
        console.log(this.name+"年龄"+this.age);
    }
}
var cq={
    name:'cq',
    age:18
}

obj.myFun.call(cq); //cq 年龄18
obj.myFun.apply(cq); // cq 年龄18
obj.myFun.bind(cq)(); // cq 年龄18

以上函数都传入了cq对象,函数的其中的this都指向了cq对象。
在形式上,三个函数中bind返回的是一个函数,需要重新调用。

  1. call()、bind()、apply()传参情况如下
var name='小王',age=17;
var obj={
    name:'小张',
    objAge:this.age,
    myFun:function(fm,q){
        console.log(this.name+"年龄"+this.age",来自"+fm+"去往"+q);
    }
}
var cq={
    name:'cq',
    age:18
}

obj.myFun.call(cq,'河南','北京'); //cq 年龄18 来自河南去往北京
obj.myFun.apply(cq,['河南','北京']); // cq 年龄18 来自河南去往北京
obj.myFun.bind(cq,'河南','北京')(); // cq 年龄18 来自河南去往北京
obj.myFun.bind(cq,['河南','北京'])(); // cq 年龄18 来自河南,北京去往undefined

会发现参数传递中call()、bind()是类似java的可变参数(第四行不能成功)
apply()必须要传一个数组。可以认为call()、bind()是apply()的语法糖。
当然参数不一定是字符串,也可以是函数、对象等各种类型。

有关于call()的原理需要再学习一下。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容