学习参考博客:https://www.cnblogs.com/chenhuichao/p/9351754.html
函数中的this在函数定义时,并不会知道指向谁,只有在调用的时候才能确定,大部分情况下,this指向函数的调用者
由window调用
function f () {
var user = "cjn";
console.log(this) // window
console.log(this.user) // undefined
}
// window为调用者,this指向window
f()
window.f()
由对象调用
var obj = {
user: "cjn",
foo: function () {
console.log(this.user) // cjn
}
}
// this指向了obj对象
obj.foo()
由对象的子对象调用
var obj = {
user: "cjn",
_obj: {
user: "kobe",
foo: function () {
console.log(this.user) // kobe
}
}
}
// 虽然被嵌套调用,但this指向了最近的一层,_obj对象
obj._obj.foo()
var obj = {
user: "cjn",
_obj: {
user: "kobe",
foo: function () {
console.log(this.user) // undefined
}
}
}
// 在赋值给fn的过程中,foo并没有被调用,真正调用者是window
var fn = obj._obj.foo
fn()
var obj = {
user: "cjn",
_obj: {
foo: function () {
console.log(this.user) // undefined
}
}
}
// this指向_obj,_obj中没有user属性,this不会向上寻找
obj._obj.foo()
构造函数中的this,new关键字创建实例对象时,会给实例对象复制一份相同的函数,this会指向这个实例对象
function person () {
this.name = "cjn";
}
var xiaochen = new person();
console.log(xiaochen.name); // cjn
this遇到定时器
var user = "cjn";
var obj = {
user: "kobe",
fn: function () {
setInterval (function () {
console.log(this.user) // cjn
}, 1000);
}
}
// setInterval、setTimeout都是属于window对象的方法,this指向window
obj.fn()
解决方法1:在fn中存放this。fn由obj对象调用,this自然指向obj对象
var user = "cjn";
var obj = {
user: "kobe",
fn: function () {
var _this = this;
setInterval (function () {
console.log(_this.user) // kobe
}, 1000);
}
}
// _this始终指向obj对象
obj.fn()
解决方法2:es6箭头函数,箭头函数的this继承外部函数的作用域
var user = "cjn";
var obj = {
user: "kobe",
fn: function () {
setInterval ( () => {
console.log(this.user) // kobe
}, 1000);
}
}
obj.fn()