this关键字在js中的指向问题不管是工作还是面试中都会经常遇到,所以在此对它进行一下总结。
一、全局作用域中
this在全局作用域中指window。
//全局作用域中
console.log(this)//window
a =1;
console.log(this.a) //相当于window.a 1
//普通函数中
function fn(){
console.log(this)
}
fn()//window
二:闭包中指window
function fn(){
function fn2(){
console.log(this)
}
return fn2
}
fn()() //window
三:函数调用模式:谁调用就指谁
这里obj.fn()是obj去调用fn,而obj.name=”b”,所以this.name=”b”;
而var fn=obj.fn的时候,fn是window.fn,因此fn()的结果是”a”.
注意:this指向的是上一级调用它的对象,比如obj.fn()与window.obj.fn()都是输出b.
var name="a"
var obj ={
name:'b',
fn:function () {
console.log(this.name)
}
}
obj.fn() //b
var fn=obj.fn
fn() //a
四:构造函数中,this指实例对象。
function Person(name,age) {
this.name=name;
this.age=age;
}
Person.prototype.sayHi=function () {
console.log('I am '+this.name+',I am '+this.age+' years old.')
}
var p1=new Person('张三',20)
p1.sayHi() //I am 张三,I am 20 years old.
五:apply/call改变this的指向
参考博客:https://blog.csdn.net/ganyingxie123456/article/details/70855586
六:定时函数中:this指向window
var name = 'window';
var obj = {
name: 'obj',
fn: function () {
var timer = null;
clearInterval(timer);
timer = setInterval(function () {
console.log(this.name); //window
}, 1000)
}
}
七:bind改变this指向
var name = 'window';
var obj = {
name: 'obj',
fn: function () {
var timer = null;
clearInterval(timer);
timer = setInterval(function () {
console.log(this.name); //obj
}.bind(this), 1000)
}
}
//bind()的作用类似call和apply,都是修改this指向。但是call和apply是修改this指向后函数会立即执行,
//而bind则是返回一个新的函数,它会创建一个与原来函数主体相同的新函数,新函数中的this指向传入的对象。
//也因此call/apply不适用于定时函数改变this指向
八:ES6箭头函数:函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
var id = 21;
foo.call({ id: 42 });
// id: 42