ES5的this和ES6箭头函数的this指向的区别

蔚落 2023-10-01 11:20 34阅读 0赞

原文网址：[ES5的this和ES6箭头函数的this指向的区别\_IT利刃出鞘的博客-CSDN博客][ES5_this_ES6_this_IT_-CSDN]

## 简介 ##

**说明**

本文用示例介绍ES5的this和ES6箭头函数的this指向的区别。

**ES5的this**

this：谁调用的，this就指向谁。（指向它所在上下文的那个对象）。

1.  全局环境：this 指向全局对象（window）, 无论是否严格模式；
2.  全局直接调用：严格模式下， this为undefined; 非严格模式下，this为全局对象window
    
    1.  直接调用，相当于是window调用的它。
3.  方法调用：this指向调用该方法的对象。
4.  构造函数：this指向构造出来的新对象
5.  定时器：this指向全局对象window。
6.  事件：this指向事件所对应的元素。
7.  call, apply, bind：this指向绑定的对象；

**ES6箭头函数的this**

this：谁定义的this，this就指向谁。

1.  this是定义时所在的对象，不是它的调用者。
    
    1.  this在函数定义时就确定了。
    2.  箭头函数的this 是静态的，所以箭头函数适用于和 this 无关的回调。
    3.  箭头函数没有自己的 this ，所以它去找自己作用域链的上一层的 this。
2.  不可以当作构造函数。也就是说，不可以使用new命令，否则会抛出一个错误。
3.  不可以使用arguments对象，该对象在函数体内不存在。
4.  可以用 rest 参数。（可以用于替代arguments）。
5.  不可以使用yield命令。因此箭头函数不能用作 Generator 函数。

## ES5的this ##

this：谁调用的，this就指向谁。（指向它所在上下文的那个对象）。

### 全局环境 ###

**说明**

全局环境：this 指向全局对象（window）, 无论是否严格模式；

**示例**

// 无论是否是严格模式，结果一样
    "use strict";
    console.log(this); //window对象

### 全局直接调用 ###

**说明**

严格模式下， this为undefined; 非严格模式下，this为全局对象window

直接调用，相当于是window调用的它。

**示例：严格模式**

function test() {
        // 函数作用域内启动严格模式
        "use strict";
        console.log(this);
    }
    
    test(); //undefined

**示例：非严格模式**

function test() {
        console.log(this); //window对象
        console.log(this === globalThis);  //true
    }
    
    test();

即：此时this 等于 globalThis，也就是window对象。

### 方法调用 ###

this指向调用该方法的对象。

**示例**

"use strict";
        
    function func() {
        console.log(this.user);
    }
    
    let obj1 = {
        user: 'This is obj1',
        fun: func
    }
    obj1.fun(); //This is obj1

### 构造函数 ###

用 new 调用一个构造函数，会创建一个新对象，this 就指向这个新对象。

function Person() {
        this.name = 'Tony';
        this.age = '18';
        this.sayName = function () {
            console.log(this.name)
        }
    }
    
    let user = new Person();
    user.sayName(); //Tony

### 定时器 ###

定时器：this指向全局对象window。

let fn = setInterval(function () {
        console.log(this); //window对象
        clearInterval(fn)
    }, 1000)

### 事件 ###

this指向事件所对应的元素。

<div id="abc">
        这是div
    </div>
    <script>
        let abc = document.getElementById('abc');
        abc.onclick = function(){
            console.log(this) //<div id="abc"> 这是div </div>
        }
    </script>

### call, apply, bind ###

this指向绑定的对象。

function Fun() {
        console.log(this.user);
    }
    
    let obj1 = {
        user: 'obj1',
        fun: Fun
    }
    
    let obj2 = {
        user: 'obj2',
        fun: Fun
    }
    obj1.fun.call(obj2); //obj2

## ES6箭头函数的this ##

this：谁定义的this，this就指向谁。

### 简单示例 ###

ES6的箭头函数

ES5普通函数

const obj = {
        name: 'Tony',
        fnOuter: function () {
            const fnInner = function (){
                console.log(this)
            }
            fnInner();
        }
    }
    
    obj.fnOuter(); // window对象

### 定时器 ###

跟“简单示例”差不多。

ES6的箭头函数

ES5的普通函数

### 不能作为构造函数 ###

ES6的箭头函数

let Person = (name,age) => {
        this.name = name
        this.age = age
    }
    
    let p1 = new Person("Tony", 20)
    console.log(p1) // 报错：Uncaught TypeError: Person is not a constructor

ES5的普通函数

function Person(name,age){
        this.name = name
        this.age = age
    }
    
    let p1 = new Person("Tony", 20)
    console.log(p1) // {name: 'Tony', age: 20}

### 不能使用arguments对象 ###

ES6的箭头函数

let foo = () => {
        console.log(arguments)
    }
    console.log(foo(1, 2, 3)) // 报错：Uncaught ReferenceError: arguments is not defined

ES5的普通函数

let foo = function () {
        console.log(arguments)
    }
    console.log(foo(1, 2, 3)) // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]

### 可以使用rest函数(...操作符) ###

let foo = (...args) => {
        console.log(args)
    }
    console.log(foo(1,2,3)) // [1, 2, 3]

[ES5_this_ES6_this_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122248072