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 相关文章推荐
ajax不执行success回调而是执行了error回调
Dec 10 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
Dec 04 Javascript
JS比较两个时间大小的简单示例代码
Dec 20 Javascript
node.js中的path.normalize方法使用说明
Dec 08 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
Jan 05 Javascript
vue中动态设置meta标签和title标签的方法
Jul 11 Javascript
微信小程序的mpvue框架快速上手指南
May 15 Javascript
五分钟搞懂Vuex实用知识(小结)
Aug 12 Javascript
JS模拟浏览器实现全局搜索功能
Sep 11 Javascript
Vue组件为什么data必须是一个函数
Jun 11 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 Javascript
小程序实现新用户判断并跳转激活的方法
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
php和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
php页面消耗内存过大的处理办法
2013/03/18 PHP
PHP实现数据四舍五入的方法小结【4种方法】
2019/03/27 PHP
菜单效果
2006/10/14 Javascript
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
关于JavaScript命名空间的一些心得
2014/06/07 Javascript
javascript中判断json的方法总结
2015/08/27 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
JS之相等操作符详解
2016/09/13 Javascript
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
2019/01/15 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
python基础教程之Hello World!
2014/08/29 Python
python实现调用其他python脚本的方法
2014/10/05 Python
名片管理系统python版
2018/01/11 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
详解python tkinter模块安装过程
2020/01/06 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
通信研究生自荐信
2014/02/01 职场文书
父母对孩子的寄语
2014/04/09 职场文书
化工专业自荐书
2014/06/16 职场文书
班级学雷锋活动总结
2014/06/26 职场文书
医院领导班子整改方案
2014/10/01 职场文书
2014入党积极分子批评与自我批评思想报告
2014/10/06 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
班级管理经验交流材料
2015/11/02 职场文书
Vue+TypeScript中处理computed方式
2022/04/02 Vue.js
Python OpenCV超详细讲解基本功能
2022/04/02 Python