JS中this的几种使用情况

我就是我 2022-04-15 02:06 239阅读 0赞

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]();

## 面试题 ##