在学习javascript过程中,难免会遇到this指向问题而掉入很多坑,以下就谈谈学习过程中遇到的this指向问题进行归类总结,希望可以帮到更多同学弃坑,哈哈。
一、全局作用域或者纯函数中this指向全局对象window。
//在脚本直接打印
console.log(this) //window
//function声明函数
function foo () {console.log(this)}
foo() //window
//function声明函数赋给变量
var bar = function () {console.log(this)}
bar() //window
//立即执行函数
(function () {console.log(this)})(); //window
//在setTimeout或setInterval 中
setTimeout(function(){
console.log(this); //window
}, 1000)
setInterval(function(){
console.log(this); //window
}, 1000)
二、谁调用了方法this指向谁
//对象方法调用
var person = {
name: "老王",
fighting: function () {console.log(this)}
}
person.fighting() // person
//事件绑定
var oBox = document.getElementById("box")
oBox.onclick = function () {
console.log(this) // oBox
}
//事件监听
var oBox = document.getElementById("box")
oBox.addEventListener('click', function () {
console.log(this) //oBox
})
三、在构造函数中this指向构造函数的实例
//使用new
function Person (name) {
this.name = name;
console.log(this); //people
}
var people = new Person('老王')
//这里new改变了this指向,将this由window指向Person的实例对象people
四、call/apply中this指向绑定的对象
//this指向绑定的对象,即call或apply括号里的对象
var name = 'this is window'; //定义window的name属性,看this.name是否会调用到
var person1 = {
name : 'this is 老赵',
getName:function(){
console.log(this); //person2
console.log(this.name); //this is 隔壁老王
}
}
var person2 = {
name: 'this is 隔壁老王'
}
testObj1.getName.apply(person2);
testObj1.getName.call(person2);
希望可以帮到大家,希望掉坑的同学可以早日脱离苦海,哈哈哈。