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 相关文章推荐
javascript判断iphone/android手机横竖屏模式的函数
Dec 20 Javascript
js写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
javascrip关于继承的小例子
May 10 Javascript
JavaScript简单实现网页回到顶部功能
Nov 12 Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
Jan 07 Javascript
微信小程序 增、删、改、查操作实例详解
Jan 13 Javascript
H5上传本地图片并预览功能
May 08 Javascript
Node.js事件的正确使用方法
Apr 05 Javascript
angular使用md5,CryptoJS des加密的方法
Jun 03 Javascript
Layui table field初始化加载时进行隐藏的方法
Sep 19 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学习之数据类型之间的转换代码
2011/05/29 PHP
PHP四舍五入精确小数位及取整
2014/01/14 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
WordPress中获取所使用的模板的页面ID的简单方法
2015/12/31 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
jQuery的强大选择器小结
2009/12/27 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
2013/06/27 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
Javascript基础教程之定义和调用函数
2015/01/18 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
原生javascript实现的ajax异步封装功能示例
2016/11/03 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
vue常用指令代码实例总结
2020/03/16 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
带你学习Python如何实现回归树模型
2020/07/16 Python
台湾网友喜爱的综合型网路购物商城:Yahoo! 奇摩购物中心
2018/03/10 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
中文师范生自荐信
2014/01/30 职场文书
会计学生自我鉴定
2014/02/06 职场文书
法制教育演讲稿
2014/09/10 职场文书
工程服务质量承诺书
2015/04/29 职场文书
小学运动会前导词
2015/07/20 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书