js中的call,apply,bind区别

在JavaScript中,callapplybindFunction对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向。

callapplybind方法的共同点和区别:
apply 、 call 、bind 三者都是用来改变函数的this对象的指向的;
apply 、 call 、bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文(函数的每次调用都会拥有一个特殊值——本次调用的上下文(context)——这就是this关键字的值。);
apply 、 call 、bind 三者都可以利用后续参数传参;
bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。

一、call

call()
语法:

call([thisObj[,arg1[, arg2[, [,.argN]]]]])

定义:调用一个对象的一个方法,以另一个对象替换当前对象。

说明: call 方法可以用来代替另一个对象调用一个方法。
call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

thisObj的取值有以下4种情况:
(1) 不传,或者传null,undefined, 函数中的this指向window对象
(2) 传递另一个函数的函数名,函数中的this指向这个函数的引用
(3) 传递字符串、数值或布尔类型等基础类型,函数中的this指向其对应的包装对象,如 String、Number、Boolean
(4) 传递一个对象,函数中的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

如果你不理解上面的,没关系,我们再来看一个例子:

function class1(){
  this.name=function(){
    console.log("我是class1内的方法");
  }
}
function class2(){
  class1.call(this);  //此行代码执行后,当前的this指向了class1(也可以说class2继承了class1)
}   

var f=new class2();
f.name();   //调用的是class1内的方法,将class1的name方法交给class2使用

常用例子:
(1)

function eat(x,y){
  console.log(x+y);
}
function drink(x,y){
  console.log(x-y);
}
eat.call(drink,3,2);

输出:5

这个例子中的意思就是用 eat 来替换 drink,eat.call(drink,3,2) == eat(3,2) ,所以运行结果为:console.log(5);
注意:js 中的函数其实是对象,函数名是对 Function 对象的引用。

(2)

function Animal(){
  this.name="animal";
  this.showName=function(){
    console.log(this.name);
  }
}
function Dog(){
  this.name="dog";
}
var animal=new Animal();
var dog=new Dog();       

animal.showName.call(dog);

输出:dog

在上面的代码中,我们可以看到Dog里并没有showName方法,那为什么(this.name)的值是dog呢?

关键就在于最后一段代码(animal.showName.call(dog)),意思是把animal的方法放到dog上执行,也可以说,把animal 的showName()方法放到 dog上来执行,所以this.name 应该是 dog。

(3)继承

function Animal(name){
  this.name=name;
  this.showName=function(){
    console.log(this.name);
  }
}
function Dog(name){
  Animal.call(this,name);
}
var dog=new Dog("Crazy dog");
dog.showName();

输出:Crazy dog

Animal.call(this) 的意思就是使用 Animal对象代替this对象,那么Dog就能直接调用Animal的所有属性和方法。

二、apply()

语法:apply([thisObj[,argArray]])

定义:应用某一对象的一个方法,用另一个对象替换当前对象。

说明:
如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。

call 和 apply的区别
对于 apply、call 二者而言,作用完全一样,只是接受参数的方式不太一样。

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

call 需要把参数按顺序传递进去,而 apply 则是把参数放在数组里。

既然两者功能一样,那该用哪个呢?

在JavaScript 中,某个函数的参数数量是不固定的,因此要说适用条件的话,当你的参数是明确知道数量时用 call ;而不确定的时候用 apply,然后把参数 push 进数组传递进去。当参数数量不确定时,函数内部也可以通过 arguments 这个数组来遍历所有的参数。

三、bind
bind是在EcmaScript5中扩展的方法(IE6,7,8不支持)
bind() 方法与 apply 和 call 很相似,也是可以改变函数体内 this 的指向。

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

注意:bind方法的返回值是函数

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

输出:
undefined
3-------------------------------------------------------------下面就【借用一道面试题】,来更深入的去理解下 apply 和 call 。
function log(msg) {
  console.log(msg);
}
log(1);    //1
log(1,2);    //1
上面方法可以解决最基本的需求,但是当传入参数的个数是不确定的时候,上面的方法就失效了,这个时候就可以考虑使用 apply 或者 call,注意这里传入多少个参数是不确定的,所以使用apply是最好的,方法如下:
function log(){
  console.log.apply(console, arguments);
};
log(1);    //1
log(1,2);    //1 2

接下来的要求是给每一个 log 消息添加一个"(app)"的前辍,比如:

log("hello world");    //(app)hello world

该怎么做比较优雅呢?这个时候需要想到arguments参数是个伪数组,通过 Array.prototype.slice.call 转化为标准数组,再使用数组方法unshift,像这样:

function log(){
  var args = Array.prototype.slice.call(arguments);
  args.unshift(‘(app)‘);

  console.log.apply(console, args);
};

有个有趣的问题,如果连续 bind() 两次,亦或者是连续 bind() 三次那么输出的值是什么呢?像这样:

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

var fiv = {
    x:5
}
var func = bar.bind(foo).bind(sed).bind(fiv);
func(); //?

答案是,两次都仍将输出 3 ,而非期待中的 4 和 5 。原因是,在Javascript中,多次 bind() 是无效的。更深层次的原因, bind() 的实现,相当于使用函数在内部包了一个 call / apply ,第二次 bind() 相当于再包住第一次 bind() ,故第二次以后的 bind 是无法生效的。

在常见的单体模式中,通常我们会使用 _this , that , self 等保存 this ,这样我们可以在改变了上下文之后继续引用到它。 像这样:

var foo = {
    bar : 1,
    eventBind: function(){
        var _this = this;
        $(‘.someClass‘).on(‘click‘,function(event) {
            /* Act on the event */
            console.log(_this.bar);     //1
        });
    }
}

由于 Javascript 特有的机制,上下文环境在 eventBind:function(){ } 过渡到 $(‘.someClass‘).on(‘click‘,function(event) { }) 发生了改变,上述使用变量保存 this 这些方式都是有用的,也没有什么问题。当然使用 bind() 可以更加优雅的解决这个问题:

var foo = {
    bar : 1,
    eventBind: function(){
        $(‘.someClass‘).on(‘click‘,function(event) {
            /* Act on the event */
            console.log(this.bar);      //1
        }.bind(this));
    }
}

转自:https://www.cnblogs.com/libin-1/p/6069031.html

原文地址:https://www.cnblogs.com/justdoyou/p/10201843.html

时间: 12-31

js中的call,apply,bind区别的相关文章

JS中的call/apply/bind

<script> var obj = { a:1 } var a = 2; function test(a) { alert(a); alert(this.a); } </script> 1.test(3); 结果:"3"."2"; 解释:实参3传递给形参a,函数内部的形参a覆盖全局变量a,所以第一个为3,函数中this为window对象,所以this.a为2 2.test.call(thisObject,param1,param2...);

JS中isPrototypeOf 和hasOwnProperty 的区别 ------- js使用in和hasOwnProperty获取对象属性的区别

JS中isPrototypeOf 和hasOwnProperty 的区别 1.isPrototypeOf isPrototypeOf是用来判断指定对象object1是否存在于另一个对象object2的原型链中,是则返回true,否则返回false. 格式如下: object1.isPrototypeOf(object2); object1是一个对象的实例: object2是另一个将要检查其原型链的对象. 原型链可以用来在同一个对象类型的不同实例之间共享功能. 如果 object2 的原型链中包含

别真以为JavaScript中func.call/apply/bind是万能的!

自从学会call/apply/bind这三个方法后我就各种场合各种使用各种得心应手至今还没踩过什么坑,怎么用?说直白点就是我自己的对象没有某个方法但别人有,我就可以通过call/apply/bind去调用执行别人家的方法,不太懂具体用法的同学可移至MDN学习一下Function.prototype.call() Function.prototype.apply() Function.prototype.bind() ,本文不讲解使用,但是这三个方法并不是万能的,并不一定会执行你想要的那个函数,因

js中__proto__和prototype的区别和联系

作者:苏墨橘来源:知乎 备注:本篇文章比较清楚的解释了__proto__属性.prototype.instanceof,秉持一贯风格,好文收藏,贴在这里供大家学习. __proto__(隐式原型)与prototype(显式原型) 1.是什么 显式原型 explicit prototype property: 每一个函数在创建之后都会拥有一个名为prototype的属性,这个属性指向函数的原型对象.Note:通过Function.prototype.bind方法构造出来的函数是个例外,它没有pro

js中typeof和instanceof用法区别

typeof和instanceof的区别 typeof和instanceof都可以用来判断变量,它们的用法有很大区别: typeof会返回一个变量的基本类型,只有以下几种:number,boolean,string,object,undefined,function:例: alert(typeof(1));//number alert(typeof("abc"));//string alert(typeof(true));//boolean alert(typeof(m));//und

[转]html js中name和id的区别和使用分析

js中web页面元素的调用可以有两种识别方法:id和name 自己在用的过程中总结一下id和name的使用区别. 一,使用范围 除 BASE, HEAD, HTML, META, SCRIPT, STYLE, TITLE 标签外,id 都可用. name只用于APPLET,SELECT,FORM,FRAME,IFRAME,IMG,A,INPUT,OBJECT,MAP,PARAM,META. (name有时有自己的用途) name 用于 form 内元素,提交需要 id 用于 form 外元素好用

js中global和window的区别

global是javascript运行时所在宿主环境提供的全局对象 window对象是浏览器的一个web api,可以说是global在浏览器中的具体表现 global对象是单体内置对象,即不依赖宿主环境的对象,而window对象依赖浏览器. 参考: Global对象与window对象的区别 js中global对象和window对象有神马关系?

JS中typeof与instanceof的区别 (2010-05-26 10:47:40

JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空,或者是什么类型的.但它们之间还是有区别的: typeof typeof 是一个一元运算,放在一个运算数之前,运算数可以是任意类型. 它返回值是一个字符串,该字符串说明运算数的类型.typeof 一般只能返回如下几个结果: number,boolean,string,function,object,undefined.我们可以使用 typeof 来获取一个变量是否存在,如 if(typeof a!="un

JS中typeof与instanceof的区别

JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空,或者是什么类型的.但它们之间还是有区别的: typeof typeof 是一个一元运算,放在一个运算数之前,运算数可以是任意类型. 它返回值是一个字符串,该字符串说明运算数的类型.typeof 一般只能返回如下几个结果: number,boolean,string,function,object,undefined.我们可以使用 typeof 来获取一个变量是否存在,如 if(typeof a!="un

[转载]js中__proto__和prototype的区别和关系

首先,要明确几个点:1.在JS里,万物皆对象.方法(Function)是对象,方法的原型(Function.prototype)是对象.因此,它们都会具有对象共有的特点.即:对象具有属性__proto__,可称为隐式原型,一个对象的隐式原型指向构造该对象的构造函数的原型,这也保证了实例能够访问在构造函数原型中定义的属性和方法. 2.方法(Function)方法这个特殊的对象,除了和其他对象一样有上述_proto_属性之外,还有自己特有的属性--原型属性(prototype),这个属性是一个指针,