前端js中this指向及改变this指向的方法

本是古典何须时尚 2024-04-17 06:05 112阅读 0赞

## 一、 this ##

this是JS中的关键字， 它始终指向了一个对象， this是一个指针;

参考博文：

[this指向及改变this指向的方法][this_this]

## 二、 this显示绑定和隐式绑定 ##

1. this显示绑定

含义： 当一个函数没有明确的调用对象的时候， 也就是单纯作为独立函数调用的时候， 将对函数的this使用默认绑定： 绑定到全局的window对象

在显式绑定下： 函数将取得在“ 包含对象“ 里的永久居住权， 一直都会” 住在这里“

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzIzOTU4NjI1_size_16_color_FFFFFF_t_70]

**1.1 全局函数**

function fire() {
        console.log(this === window); //fire此时是全局的方法，this指向window
    }
    fire(); // 输出true

**1.2 函数内嵌套函数**

function fire() {
        // 我是被定义在函数内部的函数哦！
        function innerFire() {
            console.log(this === window); //未明确调用对象，this指向window
        }
        innerFire(); // 独立函数调用
    }
    fire(); // 输出true
    innerFire();

示例：

var a = 1;
    console.log(this.a); //1 因为此时this指向了window，因而调用1
    function fire() {
        var a = 2;
        console.log(this.a); //1 因为此时this指向了window，因而调用1
    
        function innerFire() {
            var a = 3;
            console.log(this.a); //1 因为此时this指向了window，因而调用1
        }
        innerFire();
    }
    fire(); //输出1

与作用域的区别： 全局作用域和局部作用域， 去掉this可发现区别

var a = 1;
    console.log(a); //1 a在全局作用域
    function fire() {
        var a = 2;
        console.log(a); // 2 fire函数作用域
        function innerFire() {
            var a = 3;
            console.log(a); //3 此时打印输出a，a在innerFIre作用域。从自身作用域查找变量，未找到才网上查找
        }
        innerFire();
    }
    fire();

**1.3 对象内层函数内部函数**

示例：

2、 this隐式绑定

**a.隐式绑定**

当函数被一个对象“ 包含” 的时候， 我们称函数的this被隐式绑定到这个对象里面， 这时候， 通过this可以直接访问所绑定的对象里面的其他属性， 比如下面的a属性

在隐式绑定下： 函数和只是暂时住在“ 包含对象“ 的旅馆里面， 可能过几天就又到另一家旅馆住了

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzIzOTU4NjI1_size_16_color_FFFFFF_t_70 1]

var obj = {
        a: 1,
        fire: function () { //此时函数的this被隐式绑定到了对象obj
            console.log(this == obj); // obj中有fire函数，因而默认this指向obj
            console.log(this.a); // 1 this.a 相当于obj.a =1
        }
    }
    obj.fire(); // 输出1

** 相同的方法：**  
 fire函数并不会因为它被定义在obj对象的内部和外部而有任何区别，

function fire() {
        console.log(this.a)
    }
    
    var obj = {
        a: 1,
        fire: fire
    }
    obj.fire(); // 输出1

**b.动态绑定：**  
 this实在代码运行期绑定而不是在书写期

var obj = {
        a: 1, // a是定义在对象obj中的属性 1
        fire: function () {
            console.log(this.a)
        }
    }
    var a = 2; // a是定义在全局环境中的变量 2
    obj.fire(); //1  此时fire的指向时obj
    var fireInGrobal = obj.fire; //因为fireInGrobal是全局变量，this对于obj的绑定丢失，绑定到了全局window
    fireInGrobal(); // 输出 2 输出全局变量啊

var obj = {
        a: 1,
        obj2: {
            a: 2,
            obj3: {
                a: 3,
                getA: function () { //obj3.getA()   this绑定到了obj3当中
                    console.log(this.a)
                }
            }
        }
    }
    obj.obj2.obj3.getA(); // 输出3

## 三、 this指向 ##

this的指向不是由定义this决定的， 而是随脚本解析自动赋值的。

**1. 全局环境作用域:** this在全局环境始终指向window

变量形式

console.log(this === window) // true
    console.log(window.alert === this.alert) // true
    console.log(this.parseInt("021", 10)) // 21
    var fruit = "banana"; // 定义一个全局变量，等同于window.fruit = "banana"

**2. 函数环境 作用域：** 函数由谁调用， this就指向谁

**2.1 非严格模式**

function fn() {
        console.log(this); //window
    }
    fn() === window; // true；window.fn（),此处默认省略window

**2.2 严格模式**

a 全局环境下， this指向window

"use strict";
    this.b = "MDN";
    console.log(this == window) // "MDN"
    console.log(b) // "MDN"

b 函数环境下， this为undefined

function fn() {
        "use strict"; // 这里是严格模式
        console.log(this); //window
    }
    fn() === undefined //true

**3 对象中的方法函数调用:** 指向 该方法所属的对象  
 隐式调用

var obj = {
        a: 1,
        fn: function () {
            return this;
        }
    }
    console.log(obj.fn() == obj); //true  函数被obj调用，指向obj

this动态绑定

var obj = {
        a: 1,
        fn: function () {
            return this;
        }
    }
    console.log(obj.fn()); //1  函数被obj调用，指向obj，输出obj的a=1
    var a = 2;
    var newfun = obj.fn; //此时更改this指向为全局变量newfun
    newfun(); //2 ，this访问全局变量a=2

**4 在构造函数中:** this始终指向新对象

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzIzOTU4NjI1_size_16_color_FFFFFF_t_70 2]

function Person(age, name) {
        this.age = age;
        this.name = name
        console.log(this) // 此处 this 分别指向 Person 的实例对象 p1 p2
    }
    var p1 = new Person(18, 'zs')
    var p2 = new Person(18, 'ww')

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzIzOTU4NjI1_size_16_color_FFFFFF_t_70 3]

**5 通过事件绑定的方法:** this 指向 绑定事件的对象

oBtn.onclick = function () {
            console.log(this); // btn
        }
    
        <
        button id = "btn" > hh < /button>

**6 定时器函数:** 因为是异步操作， this 指向 window

延时函数内部的回调函数的this指向全局对象window（ 当然我们可以通过bind方法改变其内部函数的this指向）

我们常见的window属性和方法有alter， document， parseInt， setTimeout， setInterval， location等等， 这些在默认的情况下是省略了window前缀的。（ window.alter = alter）。

**6.1 普通定时器**

setInterval(function () {
        console.log(this); // window
    }, 1000);

![在这里插入图片描述][20190111123505846.png]

**6.2 定时器嵌套**

function Person() {
        this.age = 0;
        setTimeout(function () {
            console.log(this);
        }, 3000);
    }
    
    var p = new Person(); //3秒后返回 window 对象

**6.3 可以改变this指向 - 想见三方法**

**7 自执行函数(匿名函数):** 指向全局变量window

(function inner() {
        console.log(this); //this ==> window
    })();

**8 箭头函数**

要点：

a. 箭头函数的this是在定义函数时绑定的， 不是在执行过程中绑定的
    b. 箭头函数中的this始终指向父级对象
    c. 所有 call() / apply() / bind() 方法对于箭头函数来说只是传入参数， 对它的 this 毫无影响。

var obj = {
        a: 1,
        fn: () => {
            //箭头函数中的this始终指向定义时的环境
            //箭头函数中的this始终指向父级对象
            console.log(this); //对象内的this调用时一般指向obj，而箭头函数在创建时就指向了obj的父级对象window
        }
    }
    obj.fn(); //window

## 四、 更改this指向 ##

每个Function构造函数的原型prototype， 都有方法  
call(), apply(), bind()

总结： a call(), apply() 在特定作用域调用函数 b bind（） 会创建一个函数的实例， this会被绑定到bind() 函数 bing() 绑定this， bind()() 调用函数

1. call() 方法

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzIzOTU4NjI1_size_16_color_FFFFFF_t_70 4]

**2. apply() 方法**

apply() 与call（） 非常相似， 不同之处在于提供参数的方式， apply（） 使用参数数组， 而不是参数列表

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzIzOTU4NjI1_size_16_color_FFFFFF_t_70 5]

**3. bind() 方法**  
 bind() 创建的是一个新的函数（ 称为绑定函数）， 与被调用函数有相同的函数体， 当目标函数被调用时this的值绑定到 bind() 的第一个参数上

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzIzOTU4NjI1_size_16_color_FFFFFF_t_70 6]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzIzOTU4NjI1_size_16_color_FFFFFF_t_70 7]

4. 存储this指向到变量中

var oDiv1 = document.getElementById("div1");
    oDiv1.onclick = function () {
        var _this = this; //将this储存在变量中，而且不改变定时器的指向
        setTimeout(function () {
            console.log(_this); //注意这里是_this，而不是this-- <div id="div1">点击</div>
            console.log(this); //定时器的指向没有被改变--仍然是window
        }, 1000)
    }

![在这里插入图片描述][20190111123634189.png]

![在这里插入图片描述][20190111123638567.png]

2、 更改this指向 - bing， call， apply  
 在定时器外， 在绑定事件中的this肯定指向绑定事件的对象div啊， 用call和apply都行

var oDiv1 = document.getElementById("div1");
    oDiv1.onclick = function () {
        setTimeout(function () {
            console.log(this); // 更改this指向为 <div id="div1">点击</div>
        }.bind(this), 1000)
    }

![在这里插入图片描述][20190111123653731.png]

[this_this]: https://blog.csdn.net/xuehangongzi/article/details/80841167
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzIzOTU4NjI1_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/6a7a28a3d1854fe89e3698c4d29f1153.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzIzOTU4NjI1_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/4528843ee00c4c4881e34db3a488042d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzIzOTU4NjI1_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/70ea9dbb4f824ed6a7ff524fb0b4710d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzIzOTU4NjI1_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/0b0708c80c2b4195b4b69d3dfa827914.png
[20190111123505846.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/8c2b935d1e4741b897ea342aca02ec7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzIzOTU4NjI1_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/c10d05e5a0f64b429f5c6660d0c13558.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzIzOTU4NjI1_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/cf3a12582d6541b98012f11295dcd3eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzIzOTU4NjI1_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/6684255e0b5a442ab8f9ad1544684b5a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzIzOTU4NjI1_size_16_color_FFFFFF_t_70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/62a7feeb3a304713808c7eb6fa5e5e91.png
[20190111123634189.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/ad1e777af18e45378d1b2f6a51691bb2.png
[20190111123638567.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/36af4337874a41f7ac0789a1b9f93255.png
[20190111123653731.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/16/438f5f1d6fb94b96a91001a915552c58.png