- 发布时间
javascript中的this
- 作者
- Name
- wenjuGao
- github
- @Github
this
- 函数调用，this -> 全局对象(window/global)
function fn() {
console.log(this) // window\global
}
- 对象方法的调用，this -> 上级对象
var dome = {
name: 'dome',
fn: function () {
console.log(this) // dome对象
},
es6: () => {
console.log(this) // window\global 或者上一层作用域
},
}
- 构造函数调用，this -> 新对象
function Fn() {
this.name = 'dome'
}
var dome = new Fn()
console.log(dome) // dome.name = "dome"
bind
- 第一个参数this，参数从第二个开始依次传递
- 返回函数，需要手动调用
fn.bind(this, arg1, arg2)(arg1, arg2)
call
- 第一个参数this，参数从第二个开始依次传递
- 返回函数执行
fn.call(this, arg1, arg2)
apply
- 第一个参数this，函数参数放在数组中传递
- 返回函数执行
fn.call(this, [arg1, arg2])
总结bind、call、apply
- 三个函数都是用于改变this指向
- 第一个参数都是函数内部this指向的对象
- call、bind都是参数从第二个开始依次传递，apply是通过数组传递参数
- call返回函数执行，bind返回函数
修改this
- bind
function bindThis(f, oTarget) {
return f.bind(oTarget)
}
- call
function bindThis(f, oTarget) {
return function () {
return f.apply(oTarget, arguments)
}
}
- apply
function bindThis(f, oTarget) {
return function () {
const args = Array.prototype.slice.call(arguments)
return f.apply(oTarget, args)
}
}