JS中apply,call,bind区别与用法
在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上下文已经发生改变了.
- Canvas 动画之支付宝价格拖动选择
- 使用 React 和 GraphQL 做一个todo list
- 徒手撸框架---实现 Aop
- 基于 Token 的 WEB 后台认证机制
- TiDB 源码阅读系列文章(二)初识 TiDB 源码
- Java 异常处理的 9 个最佳实践
- JavaScript 深拷贝性能分析
- Git 的使用
- Linux 基础:文件查找 find
- PHP 闭包(Closure)初探
- linux服务器apache服务配置wordpress伪静态
- 用 Python 实现一个大数据搜索引擎
- 关于 Java 你不知道的 10 件事
- 如何在一周之内获得GitHub stars 3500+ —为什么对于程序员这是如此的重要
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android编程实现自定义Dialog的大小自动控制方法示例
- Linux中如何查看文件的创建时间详解
- Android 图片添加水印的实现方法
- Linux系统清除缓存的方法总结
- 详解Android使用@hide的API的方法
- Android 实现按两次返回键退出程序(两种方法)
- 使用 bash 倒计时日期的方法
- Android 实现页面跳转
- Android EditText密码的隐藏和显示功能
- linux系统下的时间配置综述
- Android TextView 去掉自适应默认的fontpadding的实现方法
- Linux文件/目录的权限及归属管理使用
- Android自定义环形LoadingView效果
- Android隐藏标题栏及解决启动闪过标题的实例详解
- Linux使用sed命令替换字符串教程