javascript的this关键字详解


Posted in Javascript onMay 20, 2019

this 的定义

表示当前执行代码的环境对象

 因此可将 this 的剖析分为“全局环境” 和 “函数环境” 两种类型的环境对象

全局环境

console.log(this === window); // true
 
var a = 10;
console.log(this.a); // 10

函数环境

在函数内部,this 的取值取决于函数被调用时的运行环境。

这里涉及到内存里的数据结构相关的知识点,当我们定义以下字面量对象时会发生一系列的关联关系

var obj = { name: 'Tom' };

javascript 引擎会先在内存中生成 { name: 'Tom' } 对象,接着再把这个对象的内存地址赋值给 obj 变量,所以 obj 变量保存的只是一个内存地址而已,如果要获取 obj.name,javascript 引擎会先从 obj 变量中拿到内存地址,然后从该地址中获取原始对象,再返回 name 属性。

而属性值为函数时,该函数会被保存在内存中,然后将该内存地址赋值给该属性,因此该地址赋值给不同环境执行时它的作用域是不一样的,而 this 对象就是指向函数当前的执行环境对象,执行环境是会在 Event Loop(事件循环)过程中变化的,因此 this 在函数环境下是属于运行时的。

var name = 'Tom';
 
var obj = {
  name: 'Iceberg',
  say: function() {
    console.log('my name is ' + this.name);
  },
  sub: {
    say: function() {
      console.log('my name is ' + this.name);
    }
  }
};
 
obj.say(); // my name is Iceberg
obj.sub.say() // my name is undefined;
 
var say = obj.say;
say(); // my name is Tom;

上面的例子说明 obj.say() 执行环境为 obj 对象,而 obj.sub.say() 的执行环境却是 obj.sub 对象,而对于 obj.sub 来说并没有 name 属性,因此为 undefined;而 var say = obj.say; 则表示将 say 方法的内存地址赋值给全局变量,因此从全局变量 name 中取值。

运用场景

接下来从 this 在函数环境下的不同运用场景来剖析

事件回调函数

var handler = {
	nickname: 'anonymous',
	register: function() {
	  console.log(this.nickname);
	}	
}
 
$('#registerBtn').on('click', handler.register); // undefined

以上逻辑点击触发后输出的是 undefined,因为函数被当做事件触发的回调函数执行时,this 是指向该触发事件对应的元素,如要 this 仍然以 handler 对象为执行环境,则可使用函数的 bind 方法进行执行环境对象的绑定操作。

$('#registerBtn').on('click', handler.register.bind(handler)); // anonymous

在 react 中经常需要在回调函数中调用 this.state、this.props,按照上面的分析,将当前环境对象 bind 到回调函数中即可。

如果是使用的箭头函数定义回调函数即可无需 bind,因为箭头函数中 this 就是对应定义时所在的对象。
 构造函数

要理解 this 在构造函数中的逻辑就要理清楚构造函数在实例化过程中都发生了什么。

function A() {
  this.name = 'Tom';
  this.age = 20;
}
var a = new A();

使用 new 命令实例化构造函数 A 的过程中会发生以下流程

  1. 创建一个空对象,作为将要返回的对象实例
  2. 将该空对象的原型指向构造函数的 prototype 属性
  3. 将该空对象赋值给构造函数内部的 this 关键字
  4. 执行构造函数内部代码
  5. 默认返回 this 对象(如 return 的为非对象类型,如数字 123,会被忽略进而默认 return this 对象)
  6. 由以上逻辑可知道 this 关键字在构造函数中表示的是其实例对象。

bind

bind 方法将函数体中的 this 指向新对象并返回一个新函数

function A() {
  this.nickname = 'Tom';
  this.say = function() {
    console.log(this.nickname);
  }
}
var b = { nickname: 'John' };
var a = new A();
var say = a.say;
var say1 = a.say.bind(a);
var say2 = a.say.bind(b);
say(); // undefined
say1(); // Tom
say2(); // John

call & apply

call 方法是指 Function.prototype.call,因此每个函数都会具备 call 方法,fun.call(thisArg, arg1, arg2, ...),call 方法接收的第一个参数会替换原有的 this 指向的执行环境对象。

function A() {
  this.name = 'Tom';
  this.sayName = function(){
    console.log(this.name);
  };
}
 
function B() {
  this.name = 'John';
}
 
var a = new A();
a.sayName.call(new B()); // John

而 apply 方法与 call 的区别仅在于 call 接收参数列表而 apply 接收数组参数或者类数组对象(如函数的 arguments 对象)。

总结

由于 javascript 的 Event Loop 原理,决定了执行上下文会不断变化,因此 this 对象诞生于表达当前的执行环境对象。

以上所述是小编给大家介绍的javascript的this关键字的用法详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 Javascript
鼠标经过子元素触发mouseout,mouseover事件的解决方案
Jul 26 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 Javascript
vue2中filter()的实现代码
Jul 09 Javascript
JS实现标签滚动切换效果
Dec 25 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 Javascript
JS Object构造函数之Object.freeze
Apr 28 Javascript
vue elementUI表格控制对应列
Apr 13 Vue.js
小程序实现新用户判断并跳转激活的方法
May 20 #Javascript
node实现socket链接与GPRS进行通信的方法
May 20 #Javascript
JS求1到任意数之间的所有质数的方法详解
May 20 #Javascript
react 中父组件与子组件双向绑定问题
May 20 #Javascript
vue element-ui之怎么封装一个自己的组件的详解
May 20 #Javascript
一文搞懂ES6中的Map和Set
May 20 #Javascript
详解vue 在移动端体验上的优化解决方案
May 20 #Javascript
You might like
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
thinkphp 验证码 的使用小结
2017/05/07 PHP
php图像验证码生成代码
2017/06/08 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
jQuery中prevAll()方法用法实例
2015/01/08 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
javascript移动开发中touch触摸事件详解
2016/03/18 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
2018/05/03 Javascript
vue 点击展开显示更多(点击收起部分隐藏)
2019/04/09 Javascript
Python错误提示:[Errno 24] Too many open files的分析与解决
2017/02/16 Python
利用python求解物理学中的双弹簧质能系统详解
2017/09/29 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
Django websocket原理及功能实现代码
2020/11/14 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
毕业生工作求职信
2014/06/30 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
单位委托函范文
2015/01/29 职场文书
党员公开承诺书(2016最新版)
2016/03/24 职场文书
2019自荐信范文集锦!
2019/07/03 职场文书
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js