this介绍
this 是 JavaScript中的一个关键字。它通常被运用于函数体内,依赖于函数调用的上下文条件,与函数被调用的方式有关。它指向谁,则完全是由函数被调用的调用点来决定的。
所以,this是在运行时绑定的,而与编写时的绑定无关。随着函数使用场合的不同,this的值也会发生变化。但是有一个总的原则:那就是this 总会指向,调用函数的那个对象。
this使用
1.全局作用域或者普通函数中 this 指向全局对象 window。
//直接打印
console.log(this) //window
//function声明函数
function bar () {console.log(this)}
bar() //window
//function声明函数赋给变量
var bar = function () {console.log(this)}
bar() //window
//自执行函数
(function () {console.log(this)})(); //window
2. 方法调用中谁调用 this 指向谁
//对象方法调用
var person = {
run: function () {console.log(this)}
}
person.run() // person
//事件绑定
var btn = document.querySelector("button")
btn.onclick = function () {
console.log(this) // btn
}
//事件监听
var btn = document.querySelector("button")
btn.addEventListener('click', function () {
console.log(this) //btn
})
3. 在构造函数或者构造函数原型对象中 this 指向构造函数的实例
//不使用new指向window
function Person(name) {
console.log(this) // window
this.name = name;
}
Person('inwe')
//使用new
function Person(name) {
this.name = name
console.log(this) //people
self = this
}
var people = new Person('iwen')
console.log(self === people) //true
//这里new改变了this指向,将this由window指向Person的实例对象people
4. 箭头函数中指向外层作用域的 this
var obj = {
foo() {
console.log(this);
},
bar: () => {
console.log(this);
}
}
obj.foo() // {foo: ƒ, bar: ƒ}
obj.bar() // window