this 指向

this 的指向,apply、bind、call 一起搞定~

this

this 是在执行函数时,创建的上下文对象中的一个属性,它代表该函数的调用者。所以 this 一般是在函数执行时确定的

this 指向的是谁

一般情况下,请记住 “谁调用我,我就代表谁“。
谁调用这个函数,函数中的 this 就指向谁。

var name = 'window'
function foo() {
var name = 'foo'
console.log(this.name)
}

foo() // 'window'

执行 foo() 相当于执行 window.foo()(非严格模式) 也就是 window 调用了 foo 函数,所以 foo 函数体内的 this 指向的就是 window 对象。
当然如果是在 Node.js 环境下,上述 this 指向的就是 globle 对象了。

匿名函数中的 this 也是指向全局对象的。

再看个例子:

var name = 'window'
var a = {
name: 'a',
foo: function() {
console.log(this.name)
}
}

a.foo() // 'a'

var foo2 = a.foo

foo2() // 'window'

改变 this 的指向

new 实例化对象。

new 运算符做了:创建一个新对象,将构造函数的 this 指向该对象,执行构造函数代码,如果函数执行结果返回一个对象,就将这个对象返回,否则返回创建的对象。

function User(name) {
this.name = name
}

var a = new User('小a')

_this = this

var name = 'window'

var a = {
name: 'a',
foo: function() {
setTimeout(function() {
console.log(this.name)
}, 0)
},
foo2: function() {
var _this = this
setTimeout(function(){
console.log(_this.name)
}, 0)
}
}

a.foo() // 'window'
a.foo2() // 'a'

apply、call、bind

apply 与 call 差不多,主要是传参不同,都是将 this 改变并执行函数,而 bind 是将函数返回但没执行。

var name = 'window'
var a = {
name: 'a',
foo: function(x, y) {
console.log(this.name + x + y)
}
}

a.foo.call(this, 1, 2) // 'window12'
a.foo.apply(this, [1, 2]) // 'window12'
var foo2 = a.foo.bind(this, 1, 2)
foo2() // 'window12'

箭头函数

箭头函数不绑定 this,没有自己的 this ,必须通过作用域链决定其值。也就是箭头函数中的 this 就是父级作用域中的 this

var name = 'window'
var a = {
name: 'a',
foo: () => {
console.log(this.name)
},
foo2: function() {
setTimeout(()=>{
console.log(this.name)
}, 0)
}
}
a.foo() // 'window'
a.foo2() // 'a'
© 2019 墨夜 All Rights Reserved.
Theme by hiero