博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
详解javascript中this的工作原理
阅读量:5275 次
发布时间:2019-06-14

本文共 1388 字,大约阅读时间需要 4 分钟。

在 JavaScript 中 this 常常指向方法调用的对象,但有些时候并不是这样的,本文将详细解读在不同的情况下 this 的指向。

一、指向 window:

在全局中使用 this,它将会指向全局对象,因为浏览器中运行的 JavaScript 的全局对象默认为 window,

所以,此时 this 指向 window。

例如:

console.log(this) // 控制台将打印出 window 对象

 

在全局作用域内的函数调用, this 也会执行 window。

function foo(){    console.log(this);}; foo(); // 控制台也会打印出 window 对象

此处并不难理解,因为全局对象默认为 window,则 foo() 实质是 window.foo()。

 

其实,在javascript中函数调用时,this都会指向window对象。看下面的执行结果:

function foo(){    console.log(this);};            var demo = document.querySelector(".demo");            demo.onclick = foo;         //this指向demo元素对象            demo.onclick = function(){    foo();                  //this指向window对象};

 

注意:在 ES5 中,使用严格模式时,不存在全局变量, 此时 this 将不再指向 window, 而是 undefined 。

 

二、指向方法调用的对象

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

var obj = {    getMe: function(){        console.log(this)    }};obj.getMe(); // 控制台打印出 obj 对象

 

三、构造函数内,指向调用构造函数所创建的对象实例:

通常我们会使用 new 关键词调用构造函数创建新的对象实例,此时构造函数内的 this 就会指向这个新创建出来的对象。

如:

//构造函数function Person(name){    this.name = name;    this.getMe = function(){        console.log(this);    }};var joe = new Person("joe");joe.getMe(); //控制台打印出一个新的名字为 “joe” 的 Person 实例

 

四、使用函数的 call 或 apply 方法时,this 将会被显式设置为函数调用的第一个参数:

例:

var obj = {    name: "object"};function a(){    console.log(this)};a.call(obj); //控制台打印出 obj 对象

出现这样的结果是由 call 和 apply 的实现原理决定的,call 和 apply 改变 this 指向的原理是它改变了函数的运行上下文环境。

转载于:https://www.cnblogs.com/jofun/p/8728982.html

你可能感兴趣的文章
普通求素数和线性筛素数
查看>>
PHP截取中英文混合字符
查看>>
电子眼抓拍大解密
查看>>
51nod1076 (边双连通)
查看>>
Linux pipe函数
查看>>
java equals 小记
查看>>
2019春 软件工程实践 助教总结
查看>>
Zerver是一个C#开发的Nginx+PHP+Mysql+memcached+redis绿色集成开发环境
查看>>
程序的静态链接,动态链接和装载 (补充)
查看>>
关于本博客说明
查看>>
[Kaggle] Sentiment Analysis on Movie Reviews
查看>>
价值观
查看>>
mongodb命令----批量更改文档字段名
查看>>
国外常见互联网盈利创新模式
查看>>
android:scaleType属性
查看>>
shell脚本
查看>>
Upload Image to .NET Core 2.1 API
查看>>
【雷电】源代码分析(二)-- 进入游戏攻击
查看>>
Linux中防火墙centos
查看>>
如何设置映射网络驱动器的具体步骤和方法
查看>>