JavaScript中的this问题

红太狼 2023-10-06 17:44 16阅读 0赞

this关键字的使用方法  
1、方法中的this，指向调用方法的对象  
2、全局环境下指向全局对象  
3、全局函数中的this，指向全局对象  
4、内部函数中的this，指向全局对象  
5、事件中的this，指向触发事件的DOM对象  
6、构造函数中的this，指向new创建的对象【面试题new的作用】  
7、箭头函数中的this，指向定义函数上下文的this。  
8、使用闭包，var获取dom的索引。

## 一、普通函数中的this ##

1.  this是什么?  
    \* 一个关键字, 一个内置的引用变量  
    \* 在函数中都可以直接使用this  
    \* this代表调用函数的当前对象  
    \* 在定义函数时, this还没有确定, 只有在执行时才动态确定(绑定)的
2.  如何确定this的值?  
    \* test() window  
    \* obj.test() obj  
    \* new test() 新建的对象  
    \* test.call(obj) obj
    
        前置知识:
           * 本质上任何函数在执行时都是通过某个对象调用的

//创建一个name变量
    var name = "全局";
    
    //创建一个fun()函数
    function fun(){
        
    	console.log(this.name);
    }
    
    //创建两个对象
    var obj = {
        
    	name:"孙悟空",
    	sayName:fun
    };
    
    var obj2 = {
        
    	name:"沙和尚",
    	sayName:fun
    };
    
    //我们希望调用obj.sayName()时可以输出obj的名字
    obj.sayName();//孙悟空
    obj2.sayName();//沙和尚

### 在函数中直接使用 ###

//##在函数中直接使用
    function get (content) {
         
    	console.log(content)
    }
    get('你好')
    get.call(window, '你好window')//在函数中直接使用,第一个参数是window对象

### 函数作为对象的方法被调用(谁调用我我就指向谁) ###

var person = {
        
    	name: '彤彤',
    	run: function(time) {
        
    		console.log(`${
          this.name} 在跑步 最多${
          time}min就不行了`)
    	},
    }
    //下面两种方式等效
    person.run(30)//函数作为对象的方法被调用(谁调用我我就指向谁),run是person对象的方法
    person.run.call(person,30)

### 阿里面试题 ###

var name = 222
    var a = {
        
    	name: 111,
    	say: function() {
        
    		console.log(this.name)
    	}
    }
    var fun = a.say
    fun()			//222	fun.call(window)
    a.say()			//111	a.say.call(a)
    var b = {
        
    	name: 333,
    	say: function(fun) {
        
    		fun()
    	},
    }
    b.say(a.say)	//222	say.call(window)
    b.say = a.say
    b.say()			//333	b.say.call(b)

## 二、箭头函数中的this ##

●箭头函数中的this是在定义函数的时候绑定，而不是在执行函数的时候绑定。  
●箭头函数中，this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。 正是因为它没有this,所以也就不能用作构造函数。  
●箭头函数中的this是在定义函数的时候绑定  
:  
因为箭头函数没有this  
:  
指向最近的外部函数的this  
:  
外面没有函数就指向全局咯

var a = 1;
    var obj = {
        
    	a: 2,
    	say: () => {
        
    		console.log(this.a);
    	},
    }
    obj.say();//1

所谓的定义时候绑定，就是this是继承自父执行 上下文中的this,比如这里的箭头函数中的this.a,箭头函数本身与say平级以key:value的形式，也就是箭头函数本身所在的对象为obj,而obj的父执行上下文就是window,因此这里的this.a实际上表示的是window.x,因此输出的是1。

例子中箭头函数本身是在getAge方法中定义的，因此, getAge方法的父执行上下文是obj，因此这里的this指向则为obj对象