JavaScript中的apply()、call()、bind()
程序员文章站
2022-03-26 13:24:59
JavaScript 中 apply、call、bind方法的异同: 相同点 都是用来动态指定函数 this 对象的指向 第一个参数都是 this 要指向的对象,也就是要指定的上下文 都可以利用后续参数传参 不同点 传参形式不同:apply 方法接受的是一个参数数组,call 和 bind 方法接受 ......
javascript 中 apply、call、bind方法的异同:
相同点
- 都是用来动态指定函数 this 对象的指向
- 第一个参数都是 this 要指向的对象,也就是要指定的上下文
- 都可以利用后续参数传参
不同点
- 传参形式不同:apply 方法接受的是一个参数数组,call 和 bind 方法接受的是参数列表
- 执行方式不同:apply、call 会立即执行,而 bind 方法会创建一个新函数,需要单独调用执行
apply() 的使用
语法:func.apply(thisarg, [argsarray])
thisarg
: 必选的。在 func 函数运行时使用的 this 值
argsarray
: 可选的。一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 func 函数
var name = 'globalname'; var age = 'globalage'; var person = { name: '姓名', age: '年龄', foo: function() { console.log('姓名:' + this.name + ' ' + '年龄:' + this.age); } } var xiaoming = { name: '小明', age: 25 }; person.foo(); // 姓名:姓名 年龄:年龄 person.foo.apply(xiaoming); // 姓名:小明 年龄:25 person.foo.apply(null); // 姓名:globalname 年龄:globalage (非严格模式) person.foo.apply(undefined); // 姓名:globalname 年龄:globalage (非严格模式) person.foo.apply({}); // 姓名:undefined 年龄:undefined var foo = person.foo; foo(); // 姓名:globalname 年龄:globalage (非严格模式) foo.apply(person); // 姓名:姓名 年龄:年龄 foo.apply(xiaoming); // 姓名:小明 年龄:25
/* 传参: 一个数组 */ var person = { name: '姓名', age: '年龄', foo: function(a, b, c) { console.log(a, b, c); } } var xiaoming = { name: '小明', age: 25 }; person.foo(); // undefined undefined undefined person.foo.apply(xiaoming, [1, 2, 3]); // 1 2 3 var foo = person.foo; foo.apply(xiaoming, [1, 2, 3]); // 1 2 3
call() 的使用
语法:function.call(thisarg, arg1, arg2, ...)
thisarg
: 可选的。在 function 函数运行时使用的 this 值
arg1, arg2, ...
: 可选的。指定的参数列表
var name = 'globalname'; var age = 'globalage'; var person = { name: '姓名', age: '年龄', foo: function() { console.log(this.name + ' ' + this.age); } } var xiaoming = { name: '小明', age: 25 }; person.foo(); // 姓名 年龄 person.foo.call(xiaoming); // 小明 25 person.foo.call(null); // globalname globalage (非严格模式) person.foo.call(undefined); // globalname globalage (非严格模式) person.foo.call({}); // undefined undefined var foo = person.foo; foo(); // globalname globalage (非严格模式) foo.call(person); // 姓名 年龄 foo.call(xiaoming); // 小明 25
说明:不传参,用法类似 apply()
/* 传参: 列表 */ var person = { name: '姓名', age: '年龄', foo: function(a, b, c) { console.log(a, b, c); } } var xiaoming = { name: '小明', age: 25 }; person.foo(); // undefined undefined undefined person.foo.call(xiaoming, 1, 2, 3); // 1 2 3 var foo = person.foo; foo.call(xiaoming, 1, 2, 3); // 1 2 3
bind() 的使用
语法: function.bind(thisarg[, arg1[, arg2[, ...]]])
参数thisarg
: 调用绑定函数时作为 this 参数传递给目标函数的值。 如果使用new运算符构造绑定函数,则忽略该值。
arg1, arg2, ...
: 当目标函数被调用时,被预置入绑定函数的参数列表中的参数
返回值
返回一个原函数的拷贝,并拥有指定的 this 值和初始参数
var name = 'globalname'; var age = 'globalage'; var person = { name: '姓名', age: '年龄', foo: function() { console.log(this.name + ' ' + this.age); } } var xiaoming = { name: '小明', age: 25 }; person.foo(); // 姓名 年龄 person.foo.bind(xiaoming)(); // 小明 25 person.foo.bind(null)(); // globalname globalage (非严格模式) person.foo.bind(undefined)(); // globalname globalage (非严格模式) person.foo.bind({})(); // undefined undefined var foo = person.foo; foo(); // globalname globalage (非严格模式) foo.bind(person)(); // 姓名 年龄 var bar = foo.bind(xiaoming); bar(); // 小明 25 (需要单独调用执行)
说明:相比 apply()、call()会立即执行,bind 需要单独调用执行 bind()()
/* 传参: 列表 */ var person = { name: '姓名', age: '年龄', foo: function(a, b, c) { console.log(a, b, c); } } var xiaoming = { name: '小明', age: 25 }; person.foo(); // undefined undefined undefined person.foo.bind(xiaoming, 1, 2, 3)(); // 1 2 3 var foo = person.foo; var bar = foo.bind(xiaoming, 1); // 返回原函数的拷贝 bar(2, 3); // 1 2 3
以上只是 apply()、call()、bind() 方法主要的一个用法,更多用法详细请阅读mdn相关文档
下一篇: Vue 组件开发
推荐阅读
-
Javascript中Eval函数的使用说明_javascript技巧
-
JavaScript 中的 this使用方法详解
-
javascript中的onkeyup和onkeydown区别介绍_基础知识
-
javascript中的new使用_javascript技巧
-
javascript中利用数组实现的循环队列代码_javascript技巧
-
JavaScript中的事件与异常捕获详析
-
JavaScript中filter的用法实例分析
-
JavaScript中各种编码解码函数的区别和注意事项_javascript技巧
-
javascript中字符串的定义示例代码_基础知识
-
Javascript中的转义用法实例代码_基础知识