JS中的call、apply、bind方法
JS中的call、apply、bind方法
一、call()和apply()方法
1.方法定义
call方法:
语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]])
定义:调用一个对象的一个方法,以另一个对象替换当前对象。
说明:
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
apply方法:
语法:apply([thisObj[,argArray]])
定义:应用某一对象的一个方法,用另一个对象替换当前对象。
说明:
如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj, 并且无法被传递任何参数。
2、常用实例
a、
function add(a,b)
{
alert(a+b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,3,1);
这个例子中的意思就是用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4); // 注意:js 中的函数其实是对象,函数名是对 Function 对象的引用。
b、
function Animal(){
this.name = "Animal";
this.showName = function(){
alert(this.name);
}
}
function Cat(){
this.name = "Cat";
}
var animal = new Animal();
var cat = new Cat();
通过call或apply方法,将原本属于Animal对象的showName()方法交给对象cat来使用了。
//输入结果为"Cat" animal.showName.call(cat,","); //animal.showName.apply(cat,[]);
call 的意思是把 animal 的方法放到cat上执行,原来cat是没有showName() 方法,现在是把animal 的showName()方法放到 cat上来执行,所以this.name 应该是 Cat。
c、实现继承
function Animal(name){
this.name = name;
this.showName = function(){
alert(this.name);
}
}
function Cat(name){
Animal.call(this, name);
}
var cat = new Cat("Black Cat");
cat.showName();
Animal.call(this) 的意思就是使用 Animal对象代替this对象,那么 Cat中不就有Animal的所有属性和方法了吗,Cat对象就能够直接调用Animal的方法以及属性了.
d、多重继承
function Class10()
{
this.showSub = function(a,b)
{
alert(a-b);
}
}
function Class11()
{
this.showAdd = function(a,b)
{
alert(a+b);
}
}
function Class2()
{
Class10.call(this);
Class11.call(this);
}
很简单,使用两个 call 就实现多重继承了当然,js的继承还有其他方法,例如使用原型链,这个不属于本文的范畴,只是在此说明call 的用法。说了call ,当然还有 apply,这两个方法基本上是一个意思,区别在于 call 的第二个参数可以是任意类型,而apply的第二个参数必须是数组,也可以是arguments。代码如下:
var func=new function(){this.a="func"}
var myfunc=function(x,y){
var a="myfunc";
alert(this.a);
alert(x + y);
}
myfunc.call(func,"var"," fun");// "func" "var fun"
myfunc.apply(func,["var"," fun"]);// "func" "var fun"
二、bind
在EcmaScript5中扩展了叫bind的方法(IE6,7,8不支持),使用方法如下
function T(c) {
this.id = "Object";
this.dom = document.getElementById("scroll");
}
T.prototype = {
init: function() {
//①
this.dom.onmouseover = function() {
console.log("Over-->"+this.id);
}
//②
this.dom.onmouseout = function() {
console.log("Out -->"+this.id);
} .bind(this)
}
};
(new T()).init();
结果:
通过①和②的对照加上显示的结果就会看出bind的作用:改变了上下文的this
bind与call很相似,,例如,可接受的参数都分为两部分,且第一个参数都是作为执行时函数上下文中的this的对象。
不同点有两个:
①bind的返回值是函数
//都是将obj作为上下文的this function func(name,id) {
console.log(name,id,this);
}
var obj = "Look here";
//什么也不加func(" ","-->"); //使用bind是 返回改变上下文this后的函数 var a = func.bind(obj, "bind", "-->"); a(); //使用call是 改变上下文this并执行函数 var b = func.call(obj, "call", "-->");
结果:
②后面的参数的使用也有区别
function f(a,b,c){
console.log(a,b,c);
} var f_Extend = f.bind(null,"extend_A")
f("A","B","C") //这里会输出--> A B C f_Extend("A","B","C") //这里会输出--> extend_A A B f_Extend("B","C") //这里会输出--> extend_A B C f.call(null,"extend_A") //这里会输出--> extend_A undefined undefined
call 是 把第二个及以后的参数作为f方法的实参传进去
而bind 虽说也是获取第二个及以后的参数用于之后方法的执行,但是f_Extend中传入的实参则是在bind中传入参数的基础上往后排的。
//这句代码相当于以下的操作 var f_Extend = f.bind(null,"extend_A") //↓↓↓ var f_Extend = function(b,c){
return f.call(null,"extend_A",b,c);
}
举一个应用场景:例如现在有一个方法 根据不同的文件类型进行相应的处理,通过bind 就可以创建出简化版的处理方法
function FileDealFunc(type,url,callback){
if(type=="txt"){...}
else if(type=="xml"){...}
.....
}
var TxtDealFunc = FileDealFunc.bind(this,"txt");
//这样使用的时候更方便一些 FileDealFunc("txt",XXURL,func); //原来 TxtDealFunc(XXURL,func); //现在
以下是兼容处理
if (!Function.prototype.bind) {
Function.prototype.bind = function(obj) {
var _self = this
,args = arguments;
return function() {
_self.apply(obj, Array.prototype.slice.call(args, 1));
}
}
}
-------------------------------------------------------------------------------------------------------------------------------------
完
转载需注明转载字样,标注原作者和原博文地址。
更多阅读:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
http://www.jb51.net/article/61053.htm
http://www.zhangxinxu.com/wordpress/2012/10/ecmascript-es5-bind-array-slice-call-apply/
JS中的call、apply、bind方法的更多相关文章
- js中的call,apply,bind区别
在JavaScript中,call.apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向. call.apply.bind方法的共同点和区别:app ...
- javascript中的call(),apply(),bind()方法的区别
之前一直迷惑,记不住call(),apply(),bind()的区别.不知道如何使用,一直处于懵懂的状态.直到有一天面试被问到了这三个方法的区别,所以觉得很有必要总结一下. 如果有不全面的地方,后续再 ...
- js 中 new call apply bind JSON.stringify 的原理以及模拟实现
1.new的原理和实现 它创建了一个全新的对象. 它会被执行 [[Prototype]](也就是 __proto__)链接. 它使 this指向新创建的对象. 通过 new创建的每个对象将最终被 [[ ...
- js中call,apply,bind方法的用法
call .apply.和bind 以上这三个方法都是js function函数当中自带的方法,用来改变当前函数this的指向. call()方法 语法格式: fun.call(thisArg[,ar ...
- JS 的 call apply bind 方法
js的call apply bind 方法都很常见,目的都是为了改变某个方法的执行环境(context) call call([thisObj[,arg1[, arg2[, [,.argN]]]] ...
- JavaScript中call,apply,bind方法的区别
call,apply,bind方法一般用来指定this的环境. var a = { user:"hahaha", fn:function(){ console.log(this.u ...
- JavaScript内置一些方法的实现原理--new关键字,call/apply/bind方法--前戏
new关键字,call/apply/bind方法都和this的绑定有关,在学习之前,首先要理解this. 一起来学习一下this吧 首先.this是一个对象. 对象很好理解,引用类型值,可以实现如th ...
- 深入浅出:了解JavaScript中的call,apply,bind的差别
在 javascript之 this 关键字详解文章中,谈及了如下内容,做一个简单的回顾: 1.this对象的涵义就是指向当前对象中的属性和方法. 2.this指向的可变 ...
- js中call和apply的实现原理
js中call和apply的实现原理 实现call的思路: /* 还有就是call方法是放在Function().prototype上的也就是构造函数才有的call方法 (我门可 ...
- 判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
提醒大家,Object.prototype.toString().call(param)返回的[object class]中class首字母是大写,像JSON这种甚至都是大写,所以,大家判断的时候可以 ...
随机推荐
- Xilinx ISE14.7 安装教程(转)
文章来源http://blog.chinaaet.com/crazybird/p/39693 作者:crazybird **************************************** ...
- Android自动关机代码
http://www.open-open.com/lib/view/open1409209890713.html 要实现自动关机的功能需要手机有root权限,如果手机有root权限,运行该程序时,会提 ...
- ngnix apache tomcat集群负载均衡配置
http://w.gdu.me/wiki/Java/tomcat_cluster.html 参考: Tomcat与Apache或Nginx的集群负载均衡设置: http://huangrs.blog. ...
- LTTng 简介&使用实战
一.LTTng简介 LTTng: (Linux Trace Toolkit Next Generation),它是用于跟踪 Linux 内核.应用程序以及库的系统软件包.LTTng 主要由内核模块和动 ...
- careercup-栈与队列 3.1
3.1 描述如何只用一个数组来实现三个栈. 解答 我们可以很容易地用一个数组来实现一个栈,压栈就往数组里插入值,栈顶指针加1: 出栈就直接将栈顶指针减1:取栈顶值就把栈顶指针指向的单元的值返回: 判断 ...
- winows 进程通信的实例详解
发送端: 新建一个基本对话框工程,添加6个文本框控件,并且关联控件变量(CString类型): m_strCopyData, m_strFileMap, m_strMem, m_strRegMsg, ...
- Java基础知识强化之集合框架笔记56:Map集合之HashMap集合(HashMap<String,Student>)的案例
1. HashMap集合(HashMap<String,Student>)的案例 HashMap是最常用的Map集合,它的键值对在存储时要根据键的哈希码来确定值放在哪里. HashMap的 ...
- C#将DataTable导出Execl、Word、Xml
/// <summary> /// 将DT转换为Execl的方法 /// </summary> /// <param name=" ...
- spring使用aop
基于spring-framework-4.1.7使用aop >>>>>>>>>>>>>>>>>&g ...
- 第四篇:web之前端之jquery
前端之jquery 前端之jquery 本节内容 jquery简介 选择器和筛选器 操作元素 示例 1. jquery简介 1 jquery是什么 jQuery由美国人John Resig创建,至 ...