JavaScript——this的指向问题

简介: JavaScript——this的指向问题

this指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁

例子1:

function a(){
            var user = 'nihao';
            console.log(this.user);    //undefind
            console.log(this);        //window
        }
        a();

20210922124602684.png

上面的this最终指向的是调用它的对象,它的调用对象其实是window对象

例子2:

var b = {
            user:'nihao',
            fn1:function(){
                console.log(this.user);
            }
        }
        b.fn1();

20210922124903161.png

这里的this指向的是对象b,因为调用这个fn1是通过b.fn1()执行的,那么也肯定会指向对象b,this的指向在函数创建的时候是决定不了的,在调用的时候才能决定,谁去调用它它就会指向谁 。

这句话有些问题,下面的例子将证明以上的观点不准确:

例子3:

在上个代码的基础上加上一个window为什么不会指向window?

var b = {
            user: 'nihao',
            fn1: function () {
                console.log(this.user);
                console.log(this);        //{user: "nihao", fn1: ƒ}
            }
        }
        window.b.fn1();                //nihao

20210922125507835.png

按照上面的例子,this的最终指向应该是调用它的对象

window是js中的全局对象,我们创建的变量只是给window添加属性,并不是真正调用window对象,其实这可以用window.b对象

例子4:

var c= {
            a:10,
            b:{
                a:12,
                fn2:function(){
                    console.log(this.a);
                }
            }
        }
        c.b.fn2();

20210922125957288.png

这里为什么会执行12而不是10?

1、如果函数中有this,但是没有被上一级对象所调用,那么指向的就是window(非严格版)

2、如果一个函数中有this,这个函数被上一级对象所调用,那么this指向的就是上一级对象(就近原则)

3、如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层对象所调用,那么this 它也是指向上一级对象(就近原则)

再看下面的例子

var c = {
            a: 10,
            b: {
                // a:12,
                fn: function () {
                    console.log(this.a); //undefined
                }
            }
        }
        c.b.fn();

20210922130637737.png

如果这里把b中的a给注掉,那么他还是指向它上一级(也就是b对象),不管它这个对象中有没有this所需要的东西。

还有一种比较特殊的情况:

例子5:

var c = {
            a: 10,
            b: {
                a: 12,
                fn: function () {
                    console.log(this.a); //undefined
                    console.log(this); //window
                }
            }
        }
        var d = c.b.fn;
        d();

20210922131345305.png

这里为什么指向window?

this永远指向的是最后调用它的对象,虽然这个例子中fn是被对象b所引用,但是又把fn赋值给变量d的时候d就变成了最终指向(也就是window),例子3的话直接执行fn。

并不能说哪句话不正确,只不过在不同的情况下指向的对象会有一些不同,上述的总结每个地方都有一些小的错误。

构造函数版this:

function Fn() {
            this.user = "nihao";
        }
        var a = new Fn();
        console.log(a.user); //nihao

这里之所以对象a可以输出函数Fn中的user是因为:

new关键字可以改变this的指向

为什么this会指向a?首先new关键字会创建一个空对象,然后会自动调用一个函数apply方法,将this指向这个空对象,这样函数内部的this就会被这个空的对象所替代

将这个this指向对象a,因为new关键字创建了一个对象实例,这里的var a仅仅创建了一个Fn的实例(相当于复制一份Fn给a),只是创建,并没有执行。调用这个函数Fn的是对象a,所以this指向就是a,为什么a中会有user,因为已经复制了一份Fn函数到a中,用了new关键字就是等同于复制了一份。

当this中出现return时:

function fn(){
            this.user = 'nihao';
            return {};
          //return function(){};
        }
        var a = new fn();
        console.log(a.user);        //undefined

20210922135511506.png

当给return中添加任何对象时:

 function fn(){
            this.user = 'nihao';
            return;
            // return1;
            // return undefined;
            // return false;
            // return null;
        }
        var a = new fn();
        console.log(a.user);        // nihao 

如果返回值是一个对象,那么this就指向那个对象,如果不是对象那还是this指向函数的实例

箭头函数的this指向

还要注意一点,(function(){})()立即执行函数返回的是window全局


相关文章
|
8天前
|
JavaScript 前端开发
javascript中的this
javascript中的this
|
8天前
|
JavaScript 前端开发
错综复杂的this:理清你的JavaScript代码中的指向问题
错综复杂的this:理清你的JavaScript代码中的指向问题
|
8天前
|
JavaScript
JS中改变this指向的六种方法
JS中改变this指向的六种方法
|
6天前
|
前端开发 JavaScript
JavaScript:this-关键字,2024中级前端开发面试解答
JavaScript:this-关键字,2024中级前端开发面试解答
|
8天前
|
自然语言处理 JavaScript 前端开发
在JavaScript中,this关键字的行为可能会因函数的调用方式而异
【5月更文挑战第9天】JavaScript中的`this`关键字行为取决于函数调用方式。在非严格模式下,直接调用函数时`this`指全局对象,严格模式下为`undefined`。作为对象方法调用时,`this`指向该对象。用`new`调用构造函数时,`this`指向新实例。通过`call`、`apply`、`bind`可手动设置`this`值。在回调和事件处理中,`this`可能不直观,箭头函数和绑定方法可帮助管理`this`的行为。
17 1
|
8天前
|
JavaScript 前端开发
深入探索JavaScript:如何改变this的指向
深入探索JavaScript:如何改变this的指向
|
8天前
|
JavaScript 前端开发
【专栏】`Function.prototype.apply` 在JavaScript中用于动态设定函数上下文(`this`)和参数列表
【4月更文挑战第29天】`Function.prototype.apply` 在JavaScript中用于动态设定函数上下文(`this`)和参数列表。它接受两个参数:上下文对象和参数数组。理解`apply`有助于深入JS运行机制。文章分三部分探讨其原理:基本概念和用法、工作原理详解、实际应用与注意事项。在应用中要注意性能、参数类型和兼容性问题。`apply`可用于动态改变上下文、传递参数数组,甚至模拟其他语言的调用方式。通过深入理解`apply`,能提升代码质量和效率。
|
8天前
|
JavaScript 前端开发 数据安全/隐私保护
|
8天前
|
自然语言处理 JavaScript 前端开发
js_关键字this指向哪里?
js_关键字this指向哪里?
7 0
|
8天前
|
JavaScript 前端开发
js开发:请解释this关键字在JavaScript中的用法。
【4月更文挑战第23天】JavaScript的this关键字根据执行环境指向不同对象:全局中指向全局对象(如window),普通函数中默认指向全局对象,作为方法调用时指向调用对象;构造函数中指向新实例,箭头函数继承所在上下文的this。可通过call、apply、bind方法显式改变this指向。
10 1