JS中this的几种使用情况

this关键字是JavaScript中最复杂的机制之一,它是一个很特别的关键字,被自动定义在所有函数的作用域中。
在函数中this到底取何值, 是在函数真正被调用执行的时候确定的,函数定义的时候确定不了。因为this的取值是执行上下文环境的一部分,每次调用函数,都会产生一个新的执行上下文环境。

一句话总结:当前函数被谁调用,this则指向谁。看函数前面是否有调用者,没有则指向window

情况一:构造函数

// 如果函数作为构造函数用,那么其中的this就代表它即将new出来的对象
function Foo(){
	this.name='star';
	this.year='1994';
	console.log(this);//Foo {name: "star", year: "1994"}
}
var f1=new Foo();
console.log(f1.name);//star
console.log(f1.year);//1994
// 如果直接调用Foo函数,this是window

情况二:函数作为对象的一个属性

// 如果函数作为对象的一个属性时,并且作为对象的一个属性被调用时,函数中的this指向该对象
var obj={
	x:10,
	fn:function(){
		console.log(this);//Object {x: 10, fn: function}
		console.log(this.x);//10
	}
}
obj.fn();
// 如果fn函数被赋值到另一个变量中,并没有作为obj的一个属性被调用,那么this的值就是window
var obj={
	x:10,
	fn:function(){
		console.log(this);//window
		console.log(this.x);//undefined
	}
}
var fn1=obj.fn;
fn1();

情况三:函数用call或者apply调用

// 当一个函数被call或者apply调用时,this的值就取传入的对象的值
var obj={
	x:10
};
var fn=function(){
	console.log(this);//Object {x: 10}
	console.log(this.x);//10
}
fn.call(obj);

情况四:全局&调用普通函数

// 在全局环境下,this永远是window
console.log(this===window);//true
// 普通函数在调用时,其中的this也都是window
var x=10;
var fn=function(){
	console.log(this);//window
	console.log(this.x);//10
}
fn();
//函数f虽然是在obj.fn内部定义的,但是它仍然是一个普通的函数
var obj={
	x:10,
	fn:function(){
		function f(){
			console.log(this);//window
			console.log(this.x);//undefined
		}
		f();
	}
}
obj.fn();

情况五:构造函数在prototype中

// 在整个原型链中,this代表的都是当前对象的值。谁调用,this则代表谁。
function Fn(){
	this.name='star';
	this.year='1994';
}
Fn.prototype.getName=function(){
	console.log(this.name);//star
}
var f1=new Fn();
f1.getName();

情况六:数组内

//数组中的this,如果是数组调用指向数组本身
function f1(){
	console.log(this);//指向当前数组
}
var arr = [f1,2,3];
arr[0]();

面试题

var length = 100;
function f1(){
	console.log(this.length);
}
var obj = {
	length:10,
	fn:function(f1){
		f1();//f1之前没有调用者,指向window,100
		arguments[0]();//arguments为伪数组,this指向数组本身,2
	}
}
obj.fn(f1,1);
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值