关于JS中的apply,call,bind的深入解析
作者:bea
在Javascript中,Function是一种对象。Function对象中的this指向决定于函数被调用的方式。使用apply,call 与 bind 均可以改变函数对象中this的指向,在说区别之前还是先总结一下三者的相似之处: 1、都是用来改变函数的this对象的指向的。 2、第一个参数都是this要指向的对象。 3、都可以利用后续参数传参。 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个
在Javascript中,Function是一种对象。Function对象中的this指向决定于函数被调用的方式。使用apply,call 与 bind 均可以改变函数对象中this的指向,在说区别之前还是先总结一下三者的相似之处: 1、都是用来改变函数的this对象的指向的。 2、第一个参数都是this要指向的对象。 3、都可以利用后续参数传参。
call方法:
语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象。 说明:call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
apply:
语法:apply(thisObj,数组参数) 定义:应用某一个对象的一个方法,用另一个对象替换当前对象 说明:如果参数不是数组类型的,则会报一个TypeError错误。
bind:
在EcmaScript5中扩展了叫bind的方法(IE6,7,8不支持),bind与call很相似,,例如,可接受的参数都分为两部分,且第一个参数都是作为执行时函数上下文中的this的对象。不同点有两个: ①bind的返回值是函数;②后面的参数的使用也有区别;
先看例子一:
function add(a, b) {
alert(a + b);
}
function sub(a, b) {
alert(a - b);
}
对于,call,可以这么用: add.call(sub,3,1);结果为4
对于,apply,可以这么用; add.apply(sub,[3,1]);结果为4
对于,bind,可以这么用: add.bind(sub)(3,1);结果为4
可以看到输出结果都一样,但是传参用法不一样;
再看例子二:
function jone(name,age,work){
this.name=name;
this.age=age;
this.work=work;
this.say=function(msg){
alert(msg+",我叫"+this.name+",我今年"+this.age+"岁,我是"+this.work)
}
}
var jack={
name:"jack",
age:'24',
work:"学生"
}
var pet=new jone();
pet.say.apply(jack,["欢迎您"])
console.log(this.name)
对于call,需要这样: pet.say.call(jack,"欢迎您!") 对于apply,需要这样: pet.say.apply(jack,["欢迎您!"]) 对于bind,需要这样: pet.say.bind(jack,"欢迎您")() 此时输出console.log(this.name),发现this.name为jack,this上下文已经发生改变了;
以上这篇关于JS中的apply,call,bind的深入解析就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
有用 | 无用
call方法:
语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象。 说明:call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。 如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
apply:
语法:apply(thisObj,数组参数) 定义:应用某一个对象的一个方法,用另一个对象替换当前对象 说明:如果参数不是数组类型的,则会报一个TypeError错误。
bind:
在EcmaScript5中扩展了叫bind的方法(IE6,7,8不支持),bind与call很相似,,例如,可接受的参数都分为两部分,且第一个参数都是作为执行时函数上下文中的this的对象。不同点有两个: ①bind的返回值是函数;②后面的参数的使用也有区别;
先看例子一:
function add(a, b) {
alert(a + b);
}
function sub(a, b) {
alert(a - b);
}
对于,call,可以这么用: add.call(sub,3,1);结果为4
对于,apply,可以这么用; add.apply(sub,[3,1]);结果为4
对于,bind,可以这么用: add.bind(sub)(3,1);结果为4
可以看到输出结果都一样,但是传参用法不一样;
再看例子二:
function jone(name,age,work){
this.name=name;
this.age=age;
this.work=work;
this.say=function(msg){
alert(msg+",我叫"+this.name+",我今年"+this.age+"岁,我是"+this.work)
}
}
var jack={
name:"jack",
age:'24',
work:"学生"
}
var pet=new jone();
pet.say.apply(jack,["欢迎您"])
console.log(this.name)
对于call,需要这样: pet.say.call(jack,"欢迎您!") 对于apply,需要这样: pet.say.apply(jack,["欢迎您!"]) 对于bind,需要这样: pet.say.bind(jack,"欢迎您")() 此时输出console.log(this.name),发现this.name为jack,this上下文已经发生改变了;
以上这篇关于JS中的apply,call,bind的深入解析就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- JavaScript点击按钮后弹出透明浮动层的方法
- js实现鼠标移到链接文字弹出一个提示层的方法
- js光标定位文本框回车表单提交问题的解决方法
- jQuery子窗体取得父窗体元素的方法
- js控制div弹出层实现方法
- JavaScript实现点击文字切换登录窗口的方法
- jQuery实现仿腾讯微博滑出效果报告每日天气的方法
- JS选项卡动态替换banner图片路径的方法
- js操作css属性实现div层展开关闭效果的方法
- javascript中this的四种用法
- JQuery插件jcarousellite的参数中文说明
- javascript实现炫酷的拖动分页
- JS+CSS实现的拖动分页效果实例
- 浅谈jQuery构造函数分析
- 在JavaScript中正确引用bind方法的应用
- jQuery实现页面内锚点平滑跳转特效的方法总结
- javascript实现验证IP地址等相关信息代码
- 招聘网站基于jQuery实现自动刷新简历
- javascript实现获取字符串hash值