JavaScript基础之this到底指向哪里

2021-11-20 From CSDN By leelxp

this的指向问题一直以来都是前端开发者找工作面试的重点,现在就聊聊这个this到底是何方神圣?

ECMAScript中这样写到:this关键字执行为当前执行环境的thisBinding.

MDN这样写到:绝大多数中,函数的调用决定了this的指向。

简单来说,this的指向是由于调用时候决定的,this具有运行期绑定的特性。


全局执行上下文:

在全局执行上下文中,this的指向为window

console.log(this === window) // true

在浏览器里面this等价于window对象,如果你声明一些全局变量,这些变量都会作为this的属性。


函数执行上下文:

在函数执行上下文,this的指向取决于函数的调用方式。

function test() {
    return this === window
}
test()    //    true

直接调用,this就会指向全局window.

var obj = {
    name: 'cat',
    age: 3,
    say: function () {
        console.log(this.name)
    }
}
obj.say() //    cat

指向调用的对象,这里this指向的对象为obj.


构造函数的this:

构造函数的创建的对象会有以下操作:

  1. 创建新对象
  2. 将this指向这个对象
  3. 给对象赋值(属性、方法)
  4. 返回this

所以this就是指向创建的这个对象上。

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

DOM事件处理函数:this指向触发事件的元素,也就是始事件处理程序所绑定到的DOM节点。

var ele = document.getElementById("id");
ele.addEventListener("click",function(e){
  console.log(this);
  console.log(this === e.target); // true
})

这里的this指向e.target.

箭头函数的this:箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。因此,在下面的代码中,传递给setInterval的函数内的this与封闭函数中的this值相同:

function Person(){
  this.age = 0;
  setInterval(() => {
    this.age++; // |this| 正确地指向 p 实例
  }, 1000);
}
var p = new Person();

这就是令人讨厌的this指向哪里的讲解,比较简单,但是容易忽略。。。。

本文来源:CSDN,转载请注明出处!

来源地址:https://blog.csdn.net/leelxp/article/details/107130930

君子曰:学不可以已。
《现代操作系统(原书第4版)》
本书是操作系统领域的经典教材,主要内容包括进程与线程、内存管理、文件系统、输入/输出、死锁、虚拟化和云、多处理机系统、安全,以及关于UNIX、Linux、Android和Windows的实例研究等。第4版对知识点进行了全面更新,反映了当代操作系统的发展与动向。本书适合作为高等院校计算机专业的操作系统课程教材,也适合相关技术人员参考。
发表感想

© 2016 - 2022 chengxuzhixin.com All Rights Reserved.

浙ICP备2021034854号-1    浙公网安备 33011002016107号