this 指向问题

OnlyCong

已于 2023-07-13 15:58:36 修改

阅读量41

点赞数

分类专栏： JavaScript 文章标签： javascript

于 2023-07-13 15:31:36 首次发布

本文链接：https://blog.csdn.net/m0_60316162/article/details/131696947

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

注：在JavaScript中，this 是一个关键字，this永远指向函数的最终调用者。

this指向三个基本要素：

this指向的永远只可能是对象；
this指向谁，不取决于this写在哪，而是取决于函数在哪里调用；
this指向的对象，称为函数的上下文（context），也叫函数的调用者

前端中的this指向详解：

1. 在全局作用域下，this始终指向全局对象window，无论是否是严格模式

// 在全局作用域下this指向
console.log(this);      // this ==> window
 
window.console.log(this);  // this ==> window
// console.log()完整的写法是window.console.log(), window可以省略
// window调用了console.log() 方法，所以此时this指向window。

2. 默认绑定

普通函数(包括匿名函数) 谁调用，this就指向谁，分为是否为严格模式。严格模式下，直接example()调用函数,this指向undefined，window.example()调用函数this指向window；非严格模式下，通过example()和window.example()调用函数对象，this都指向window。

// 严格模式下
function example() {
   "use strict";
   console.log(this);
}
 
example(); // this ==> undefined
window.example(); // this ==> window

//非严格模式
function example() {
   console.log(this);
}
example(); // this ==> window
window.example(); // this ==> window

3. 箭头函数绑定

箭头函数中没有 this，它会绑定最近的非箭头函数作用域中的this。首先从它的父级作用域找，如果父级作用域还是箭头函数，就再往上找，一层一层的直到直到this的指向。即箭头函数外如果还有一个函数包裹，那么这个this指向的就是外包裹函数。如果箭头函数外没有外包裹函数，那么this就指向window)

let example = () => {
   console.log(this);
}
example(); // window
// 由于model函数是箭头函数，所以自身不能绑定this，因此找它的上一级作用域, this ==> window

4. 隐式绑定

通过对象.函数名() 调用，this指向这个对象。如果存在链式调用， this 永远指向最后调用它的那个对象。隐式绑定丢失：起函数别名，通过别名运行；函数作为参数会造成隐式绑定丢失。

var obj = {
   name: "小明",
   skill: function () {
      name: "小花";
      console.log(this.name);
   },
};
obj.skill(); // 小明
// 调用obj.skill()方法，返回值为小明，说明 this ==> obj

5. new绑定

构造函数（new关键字）调用，会生成一个新对象，并且把这个新对象绑定为调用函数的 this ，即 this 指向创建的实例。

function example(name, age) {
   this.name = name;
   this.age = age;
}
const a = new example("小花", 18);
console.log(a.name); // 小花
console.log(a.age); // 18
// this ==> 新new出的实例 a

6. 根据浏览器的调用机制，定时器和计时器中回调函数的 `this` 指向 `window`

setTimeout(function(){
   console.log(this);  
},2000)
//2s后打印出 window, 说明this ==> window

7. Vue中的this指向调用它的Vue实例

在Vue所有的生命周期钩子方法（如created，mounted， updated以及destroyed）里使用this，this指向调用它的Vue实例，即 new Vue() ---- 每一个点vue后缀的文件都是利用vue的构造函数模板创建的实例 / 新对象。

<html>
    <button @click="click">点击</button>
<html>
<script>
  export default {
     data(){
           return{
              message: "你好！"
           }
        },

     created: function() {
        console.log(this) //在Vue所有的生命周期钩子方法里使用this，this指向使用它的Vue实例
        this.showMessage1();    
        this.showMessage2();  
        this.showMessage3();   //vue实例（构造函数）调用了showMessage3方法（new绑定）
     },
     methods:{
        showMessage3(){
           console.log(this)  //vue实例调用了showMessage3方法，this自然指向vue实例
        },

        showMessage1(){
           setTimeout(function() {
              console.log(this) //指向window  因为没人调用这个普通函数
           }, 10)
        },

        showMessage2() {
           setTimeout(() => {
              console.log(this) //this指向vue实例
           }, 10)
        },
        
        click() {
           console.log(this) //<div id="box">click</div>
        }
        //在事件中绑定this，我们点击后可以发现，打印出来了dom元素，说明我们点击的是这个dom元素
     }
  }
</script>

修改this指向的三个方法（显式绑定）

1. call()方法

call 执行函数，并改变this指向为函数的第一个参数，可以传入多个参数。

let obj1 = {
        name : '小明',
        getName1 : function(a,b,c) {
            console.log(`getName ${this.name}`);
            console.log(`参数:${a},${b},${c}`);
        }
    }
 let obj2 = {
        name : '小花',
        getName2 : function() {
            console.log(`getName ${this.name}`);
        }
    }
obj1.getName1(1,2,3) // getName 小明   参数:1,2,3
// 在这里this指向改变为了传入的第一个参数obj2，this已经指向了obj2
obj1.getName1.call(obj2,1,2,3) // getName 小花   参数:1,2,3

2. apply()方法

apply() 跟 call() 一样，执行函数并改变this指向为函数的第一个参数，但apply 只能传入两个参数，第二个参数只能是数组的形式。

let obj1 = {
    name : '小明',
    getName1 : function(a,b,c) {
        console.log(`getName ${this.name}`); 
        console.log(`参数:${a},${b},${c}`);  
    }
}
let obj2 = {
    name : '小花',
    getName2 : function() {
        console.log(`getName ${this.name}`);
    }
}
obj1.getName1.apply(obj2,[1,2,3]) // getName 小花    参数:1,2,3

3. bind()方法

bind 改变this指向为第一个参数，也可以传入多个参数，但是不会自动执行函数，返回一个新的函数，需要手动执行才行。

let obj1 = {
    name : '小明',
    getName1 : function(a,b,c) {
        console.log(`getName ${this.name}`); 
        console.log(`参数:${a},${b},${c}`); 
    }
}
let obj2 = {
    name : '小花',
    getName2 : function() {
        console.log(`getName ${this.name}`);
    }
}
let example = obj1.getName1.bind(obj2,1,2,3)
example() // getName davis     参数:1,2,3