this、call和apply

最新推荐文章于 2024-01-17 15:05:31 发布

渣渣辉

最新推荐文章于 2024-01-17 15:05:31 发布

阅读量143

点赞数 2

文章标签： this call apply

本文链接：https://blog.csdn.net/weixin_44547635/article/details/89320421

版权

本文深入解析JavaScript中this关键字的行为，特别是在构造函数和new运算符中的作用。同时，详细介绍了call和apply函数如何改变函数内部的this指向，解决实际开发中常见的this指向问题。

摘要由CSDN通过智能技术生成

this、call和apply

**
使用 new运算符调用构造器（指的是构造函数）时，如果构造器显示的返回了一个 object 类型的对象，那么此次运算的结果最终会返回这个对象，而不是我们之前期待的this。

        var MyClass = function() {
            this.name = 'kitty';
            return {
                name: 'tom'
            }
        }
        
        var obj = new MyClass();
        console.log(obj.name)   //输出：   tom

如果构造器不显示的返回任何数据，或者是返回一个非对象类型的数据，这样就不会存在问题了：

        var MyClass = function() {
            this.name = 'kitty';
            return   'tom';

        }
        
        var obj = new MyClass();
        console.log(obj.name)   //输出：   kitty

call和 apply最常见的用途是改变函数内部的this指向：

    var obj1 = {
        name: 'one'
    };

    var obj2 = {
        name: 'two'
    };

    window.name = 'window';

    var getName = function () {
        console.log(this.name);
    };
    
    getName();              //输出   window
    getName.call(obj1);     //输出   one
    getName.call(obj2);     //输出   two

当执行getName.call(obj1) 这句代码时getName 内部this 就指向了 obj1对象，也就是getName 内部的this.name 其实就是obj1.name so 输出 one；

实际开发中经常会遇到this指向不经意间改变

    document.getElementById('div1').onclick(function() {
        console.log(this.id);           //输出   div1
        var fnc = function() {
            console.log(this.id);       //输出   undefined
        }
        fnc();
    });

我们可以用call来给变函数 fnc 内部的this 指向

        document.getElementById('div1').onclick(function() {
	        console.log(this.id);           //输出   div1
	        var fnc = function() {
	            console.log(this.id);       //输出   undefined
	        }
	        fnc.call(this);
	    });