js中call、apply、bind的用法

今天看博客时,看到了这样的一段js代码:

var bind = Function.prototype.call.bind(Function.prototype.bind);

我想突然看到这样的一段代码,即使js能力再强的人,可能也需要花点时间去理解。像我这样的菜鸟就更不用说了。其实,原文已经对这端代码做出了解释,但我还是想用我的想法去解释这段代码。

上面那段代码涉及到了call、bind,所以我想先区别一下call、apply、bind的用法。这三个方法的用法非常相似,将函数绑定到上下文中,即用来改变函数中this的指向。举个例子:


var zlw = {
name: "zlw",
sayHello: function (age) {
console.log("hello, i am ", this.name + " " + age " years old");
}
};

var xlj = {
name: "xlj",
};

zlw.sayHello(24);// hello, i am zlw 24 years old

下面看看call、apply方法的用法:

zlw.sayHello.call(xlj, 24);// hello, i am xlj 24 years old
zlw.sayHello.apply(xlj, [24]);// hello, i am xlj 24 years old

结果都相同。从写法上我们就能看出二者之间的异同。相同之处在于,第一个参数都是要绑定的上下文,后面的参数是要传递给调用该方法的函数的。不同之处在于,call方法传递给调用函数的参数是逐个列出的,而apply则是要写在数组中。

我们再来看看bind方法的用法:

zlw.sayHello.bind(xlj, 24)(); //hello, i am xlj 24 years old
zlw.sayHello.bind(xlj, [24])(); //hello, i am xlj 24 years old

bind方法传递给调用函数的参数可以逐个列出,也可以写在数组中。bind方法与call、apply最大的不同就是前者返回一个绑定上下文的函数,而后两者是直接执行了函数。由于这个原因,上面的代码也可以这样写:

zlw.sayHello.bind(xlj)(24); //hello, i am xlj 24 years old
zlw.sayHello.bind(xlj)([24]); //hello, i am xlj 24 years old

bind方法还可以这样写 fn.bind(obj, arg1)(arg2)

用一句话总结bind的用法:该方法创建一个新函数,称为绑定函数,绑定函数会以创建它时传入bind方法的第一个参数作为this,传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

现在回到开始的那段代码:

var bind = Function.prototype.call.bind(Function.prototype.bind);

我们可以这样理解这段代码:

fn.bind(obj)

fn 相当于 Function.prototype.call
, obj 相当于 Function.prototype.bind 。而 fn.bind(obj)
一般可以写成这样 obj.fn ,为什么呢?因为 fn 绑定了 obj , fn 中的 this 就指向了 obj 。我们知道,函数中 this 的指向一般是指向调用该函数的对象。所以那段代码可以写成这样:

var bind = Function.prototype.bind.call;

大家想一想 Function.prototype.call.bind(Function.prototype.bind)
返回的是什么?

console.log(Function.prototype.call.bind(Function.prototype.bind)) // call()

返回的是 call 函数,但这个 call
函数中的上下文的指向是 Function.prototype.bind
。这个 call 函数可以这样用


var bind = Function.prototype.call.bind(Function.prototype.bind);

var zlw = {
name: "zlw"
};

function hello () {
console.log("hello, I am ", this.name);
}

bind(hello, zlw)() // hello, I am zlw

大家可能会感到疑惑,为什么是这样写 bind(hello, zlw)
而不是这样写 bind(zlw, hello) ?既然 Function.prototype.call.bind(Function.prototype.bind)
相当于 Function.prototype.bind.call
,那么先来看下 Function.prototype.bind.call
怎么用。 call 的用法大家都知道:

Function.prototype.bind.call(obj, arg)

其实就相当于 obj.bind(arg)
。我们需要的是 hello 函数绑定对象 zlw ,即 hello.bind(zlw) 也就是 Function.prototype.bind.call(hello, zlw)
,所以应该这样写 bind(hello, zlw) 。

现在又有一个疑问,既然 Function.prototype.call.bind(Function.prototype.bind)
相当于 Function.prototype.bind.call
,我们为什么要这么写:

var bind = Function.prototype.call.bind(Function.prototype.bind);

而不直接这样写呢:

var bind = Function.prototype.bind.call;

先来看一个例子:


var name = "xlj";
var zlw = {
name: "zlw"
hello: function () {
console.log(this.name);
}
};
zlw.hello(); // zlw

var hello = zlw.hello;
hello(); // xlj

有些人可能会意外, hello() 的结果应该是 zlw 才对啊。其实,将 zlw.hello 赋值给变量 hello ,再调用 hello() , hello 函数中的 this 已经指向了 window ,与 zlw.hello 不再是同一个上下文,而全局变量 name 是 window 的一个属性,所以结果就是 xlj 。再看下面的代码:

var hello = zlw.hello.bind(zlw);
hello(); // zlw

结果是 zlw ,这时 hello 函数与 zlw.hello 是同一个上下文。其实上面的疑惑已经解开了,直接这样写:

var bind = Function.prototype.bind.call;

bind 函数中的上下文已经与 Function.prototype.bind.call 中的不一样了,所以使用 bind 函数会出错。而这样写

var bind = Function.prototype.call.bind(Function.prototype.bind);

bind 函数中的上下文与 Function.prototype.call.bind(Function.prototype.bind)
中是一样的。

关于这个这段代码的解释这到这边了,感觉语言组织能力不是很好,文章写得有些啰嗦了。文中可能会有错误,希望大家指正。

时间: 2024-10-26 10:00:19

js中call、apply、bind的用法的相关文章

javascript中call,apply,bind的用法对比分析

这篇文章主要给大家对比分析了javascript中call,apply,bind三个函数的用法,非常的详细,这里推荐给小伙伴们. 关于call,apply,bind这三个函数的用法,是学习javascript这门语言无法越过的知识点.下边我就来好好总结一下它们三者各自的用法,及常见的应用场景. 首先看call这个函数,可以理解成"借用“,"请求".想像一下如下的情景:你孤单一人漂泊在外,有急事想往家里打电话,可是很不巧,手机欠费了,或者没电了,或者掉坑里了,总之你的手机就是用

JS中call,apply,bind方法的总结

why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user: "小马扎", fn: function(){ console.log(this.user); } } var b = a.fn; b(); // undefined 我们是想打印对象a里面的user却打印出来undefined是怎么回事呢?如果我们直接执行a.fn()是可以的. var a = { user: "小马扎

js中继承的几种用法总结(apply,call,prototype)

本篇文章主要介绍了js中继承的几种用法总结(apply,call,prototype) 需要的朋友可以过来参考下,希望对大家有所帮助 一,js中对象继承 js中有三种继承方式 1.js原型(prototype)实现继承 <SPAN style="<SPAN style="FONT-SIZE: 18px"><html>   <body>  <script type="text/javascript"> 

第22篇 js中的this指针的用法

前面把js的相关知识总结了下,今天把js中的上下文的this,对于强类型语言,this的用法非常的单一,因为他们没有js特有的动态绑定. 首先看下面代码: function funcA() { this.name = "hello"; console.log(this.name); this.show = function() { console.log(this.name); } } funcA();// 1.hello var a = new funcA();//2.hello a

js 的 call apply bind 方法

js的call apply bind 方法都很常见,目的都是为了改变某个方法的执行环境(context) call call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) thisObj可选项.将被用作当前对象的对象.arg1, arg2, argN ..可选项.将被传递方法参数序列. 如果没设置严格模式 “use strict” 当thisObj 不存在或 为 undefined 或为 null 或为 this 时,则隐式地指向 全局对象(在浏览器中即为 wi

C++11中function和bind的用法示例

环境Visual Studio 2012,具体代码如下 #include <iostream> #include <functional> #include <string> void PrintNumber(int num) { std::cout << num << std::endl; } struct Printer { void Print(std::string print_str) { std::cout << prin

JavaScript中call,apply,bind方法的总结

why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:function(){ console.log(this.user); } } var b = a.fn; b(); //undefined 我们是想打印对象a里面的user却打印出来undefined是怎么回事呢?如果我们直接执行a.fn()是可以的. var a = { user:"追梦子&quo

js: this,call,apply,bind 总结

对js中的一些基本的很重要的概念做一些总结,对进一步学习js很重. 一.this JavaScript 中的 this 总是指向一个对象,而具体指向那个对象是在运行时基于函数的执行环境动态绑定的,而非函数声明时的环境     实际应用中 this 的指向大致可以分为以下 4 中:         1. 作为对象的方法调用         2. 作为普通函数掉用         3. 构造器调用         4. Function.prototype.call 或 Function.proto

JavaScript中call,apply,bind方法

why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:function(){ console.log(this.user); } } var b = a.fn; b(); //undefined 我们是想打印对象a里面的user却打印出来undefined是怎么回事呢?如果我们直接执行a.fn()是可以的. var a = { user:"追梦子&quo

javascript中call,apply,bind的区别

在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢. 在说区别之前还是先总结一下三者的相似之处: 1.都是用来改变函数的this对象的指向的.2.第一个参数都是this要指向的对象.3.都可以利用后续参数传参.那么他们的区别在哪里的,先看一个例子. var xw = { name : "小王", gender : "男", age : 24, say : function() { alert(this.name + " , &qu