JavaScript中this指向问题

系统管理员 2021-09-01 04:36 432阅读 0赞

**什么是this？**

在JS中，this的指向是调用时决定的，不是创建时决定的，this具有运行期绑定的特性

**全局上下文**

*  this等价于window对象
 *  var === this. === window

console.log(window === this); // true
    var a = 1;
    this.b = 2;
    window.c = 3;
    console.log(a + b + c); // 6

**函数上下文**

在函数内部，this的值取决于函数被调用的方式

**直接调用，this会指向全局变量**

function foo(){
     	return this;
    }
    console.log(foo() === window); // true

**call() apply() 在特定的作用域中调用函数，等于设置函数体内this对象的值，以扩充函数赖以运行的作用域，一般来说，this总会指向赖以运行的作用域，但是使用call和apply方法，就会改变this的指向**

var person = {
     	name: "lyl",
      	age: 25
    };
    function say(job){
        console.log(this.name+":"+this.age+" "+job);
    }
    say.call(person,"FE"); // lyl:25
    say.apply(person,["FE"]); // lyl:25

**call和apply第一参数为this指向，后续散列参数均为函数调用所需形参，而在apply中这些参数被包裹在一个数组中。**

**bind** **和call apply相似，也是将this指向改变到第一参数**

var person = {
     	name: "axuebin",
    	age: 25
    };
    function say(){
      	console.log(this.name+":"+this.age);
    }
    var f = say.bind(person);
    console.log(f());

**箭头函数 箭头函数会捕获其所在上下文的this值，作为自己的this值**

function Person(name){
    	this.name = name;
     	this.say = () => { //此时箭头函数内的this指向的是Person
        	var name = "ll";
       		return this.name;
      	}
    }
    var person = new Person("lyl");
    console.log(person.say()); // lyl

**作为对象的一个方法** **this指向调用函数的对象**

**作为一个构造函数** **this被绑定到正在构造的新对象**

**通过构造函数创建一个对象执行以下几个步骤**

**1.创建新对象**

**2.将this指向这个对象**

**3.给对象赋值(属性和方法)**

**4.返回this**

function Person(name){
     	 this.name = name;
     	 this.age = 25;
      	 this.say = function(){
        		console.log(this.name + ":" + this.age);
      	 }
    }
    var person = new Person("lyl");
    console.log(person.name); // lyl
    person.say(); // lyl:25

**DOM事件中this的指向**

**   内联模式**

**  1.直接调用   **

<input type="button" value="点击测试" onclick="alert(this.value)"></input> //点击测试

** 此时this被内联函数调用时，它的this默认指向监听器所在的DOM元素**

**2.通过函数调用执行事件**

<button onclick="test(this);">   //通过test执行点击事件处理
        test
    </button>
    function test(obj){
       console.log(this);//window
       console.log(obj); //botton标签
    }

![20200824151257858.png][]

**总结：不看定义看调用**

**          直接执行处理代码，this指向当前DOM元素**

**          调用javascript函数，指向window或调用时的对象**

**          改变this指向,使用bind，或者将this作为实参传给回调函数**

<button  onclick="test.bind(this)();">bind</button>
    function test(){
       console.log(this);//button
    }

**动态模式**

<button  id="test">
       动态添加事件
    </button>
    var  obj = {
       name : "xiao",
       getName : function(){
         console.log(this) //button
       }
    };
    document.getElementById("test").onclick = obj.getName;

<button  id="test">  
      	动态添加事件 
        </button>
        var  obj = {
       	name : "lyl",
       	getName1 : function(){
          	console.log(this); //button
          	return  obj.getName2();
        },
       getName2 : function(){
          console.log(this); //obj
       }
    };
    document.getElementById("test").onclick = obj.getName1;

**再次印证this指向是取决于调用时，并不是定义时**

var box = document.getElementById('box');
        box.x = 'box'
    	//设置执行函数的对象属性
     function outFunc() {
      	this.x = 'outFunc';
      	box.addEventListener('click', func, false);
     }
     outFunc();
     function func() {
        console.log(this.x); //输出box 说明该this指向的是调用addEventListener的对象
     }

**addEventListener的中的事件函数默认是作为调用addEventListener对象的方法，如果需要设置this的指向可以使用callbind等**

[20200824151257858.png]: /images/20210813/3793b60c199543eaa60206d2c0f5e2ce.png