JS 中 this上下文对象的使用方式

JavaScript 有一套完全不同于其它语言的对 this 的处理机制。 在五种不同的情况下 ,this 指向的各不相同。

有句话说得很在理 -- 谁调用它,this就指向谁

一、全局范围内

在全局范围内使用this ,它将指向全局对象(浏览器中为 window)

var name = 'name1';
console.log(name);

this.name = 'name2';
console.log(name);
console.log(this.name);

window.name = 'name3';
console.log(name);
console.log(this.name);
console.log(window.name);

二、函数调用

直接调用一个函数,this 默认会指向全局 (浏览器端为window)

var name = 'name1';
function sayName(){
    console.log(name);
    console.log(this);
}

sayName();
window.sayName();

可以看到

还有几个常见的情况,根据谁调用方法就指向谁的原则,this的指向要细看

// 全局 name
var name = 'name1';

var obj = {
    name: 'name2',
    sayName: function(){
                // 调用它的时候 this指向全局
        return function(){
            console.log(this.name);
        };
    },
    changeName: function(){
               // 调用它的时候 this指向全局
        setTimeout(function(){
            this.name = 'name3';
        },0);
    }
};

obj.sayName()();
obj.changeName();
setTimeout(function(){
    console.log(name);
    console.log(obj.name);
},0);

像这些类似匿名的函数,默认都是被全局(浏览器下的window)对象调用,要正确地让obj调用,就要指代好

可以用that保持this再进行下一步,或者匿名函数传值,或者使用call/apply/bind改变context等

var name = 'name1';

var obj = {
    name: 'name2',
    sayName: function(){
        var that = this;
        return function(){
            console.log(that.name);
        };
    },
    changeName: function(){
        var that = this;
        setTimeout(function(){
            that.name = 'name3';
        },0);
    }
};

obj.sayName()();  // name2
obj.changeName();
setTimeout(function(){
    console.log(name); // name1
    console.log(obj.name);  // name3
},0);

三、作为对象方法的调用

其实就类似上头提到的 obj.sayName()  obj.name 等

这时this会指向这个obj

四、call/apply/bind 的调用

当使用 Function.prototype 上的 call 或者 apply ,bind 方法时,函数内的 this将会被 显式设置为函数调用的第一个参数。

具体使用方法

我们可以稍微修改一下上头的代码,就可以看到this指向的改变

var name = 'name1';

var obj = {
    name: 'name2',
    sayName: function(){
        // 返回一个默认全局的函数
        return function(){
            console.log(this.name);
        };
    },
    changeName: function(){
        // 返回一个默认全局的函数
        setTimeout(function(){
            this.name = 'name3';
        // 然后将该函数绑定给this(当前obj对象)
        }.bind(this),0);
    }
};

// obj.sayName()这个函数,让obj来调用
obj.sayName().call(obj);
//  让this(也就是全局对象)来调用
obj.sayName().apply(this);

obj.changeName();
setTimeout(function(){
    // 输出更改之后,全局name的值
    console.log(name);
    // 输出更改之后,obj对象中 name的值
    console.log(obj.name);
},0);

五、作为构造函数调用

比如 new Foo();

先来看个简单的例子:

var name = 'name1';
function Foo(){
    // 赋值this(当前对象)的name属性值
    this.name = 'name2';
}

// new 构造函数产生一个实例
var foo = new Foo();

console.log(name);
console.log(foo.name);

// 直接调用该函数
Foo();
console.log(name);

可以看到,如果函数倾向于和 new 关键词一块使用,则我们称这个函数为构造函数,当new 了之后,this则指向这个心创建的对象(这个new 的过程其实也涉及到了继承机制)。

若直接调用这个函数,this就默认执行全局对象了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小狼的世界

Javascript设计模式学习(三)更多的高级样式

if (hid != null && hid != undefined & hid != "") {

9920
来自专栏微信公众号:Java团长

经典排序算法总结--冒泡、快排、插入、希尔、归并、选择

对纵向排列的关键字序列,按照自下而上的扫描方向对两两相邻的关键字进行比较, 若为逆序(k_j < k_j-1 ),则将两个记录交换位置; 重复上述扫描排序过...

11120
来自专栏Hongten

python开发_python中的Boolean运算和真假值

23310
来自专栏coding for love

JS入门难点解析10-创建对象

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

13630
来自专栏Golang语言社区

Go语言的fmt包中文教程

Fmt包 import "fmt" 简介 ▾ Package fmt包含有格式化I/O函数,类似于C语言的printf和scanf。格式字符串的规则来源于C但更...

26160
来自专栏每周一脱topic

彻底搞懂golang中的数组和切片slice

通过了解数组array和切片slice的使用和底层原理,可以更透彻的理解他们的使用场景,里面有什么坑。这对我们平时编写程序是极有裨益的,后面我会继续深入,有时间...

1.6K40
来自专栏Golang语言社区

Go语言的fmt包中文教程

Fmt包 import "fmt" 简介 ▾ Package fmt包含有格式化I/O函数,类似于C语言的printf和scanf。格式字符串的规则来源于C但更...

44370
来自专栏数据结构与算法

1102 A-B数对

题目描述 出题是一件痛苦的事情! 题目看多了也有审美疲劳,于是我舍弃了大家所熟悉的A+B Problem,改用A-B了哈哈! 好吧,题目是这样的:给出一串数以及...

396130
来自专栏Pythonista

Golang之匿名函数和闭包

 基本概念 闭包是可以包含自由(未绑定到特定对象)变量的代码块,这些变量不在这个代码块内或者 任何全局上下文中定义,而是在定义代码块的环境中定义。要执行的代码块...

32910
来自专栏老马说编程

(46) 剖析PriorityQueue / 计算机程序的思维逻辑

上节介绍了堆的基本概念和算法,本节我们来探讨堆在Java中的具体实现类 - PriorityQueue。 我们先从基本概念谈起,然后介绍其用法,接着分析实现代码...

21670

扫码关注云+社区

领取腾讯云代金券