javascript的this关键字知识点总结

  • 更新时间:2020-03-12 09:53:09
  • 编辑:顾春柏

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 中的 this是如何工作的

    这篇文章主要介绍了JavaScript 中的 this 工作原理,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

    发布时间:2020-01-28

  • JavaScript高级程序设计

    JavaScript高级程序设计

    《 JavaScript高級编程设计(第3版) 》是JavaScript超級畅销书的*版。ECMAScript5和HTML5在规范之战中同时获胜,使很多特有保持和手机客户端拓展宣布进到标准,另外也为JavaScript增加了许多融入发展方

    大小:23 MBJS程序设计电子书

  • 21天学通HTML+CSS+JavaScript Web开发

    21天学通HTML+CSS+JavaScript Web开发

    21天学通HTML CSS JavaScript Web开发(第7版) 是全球畅销书《21天学通使用HTML与CSS发布Web站点》的全新升级版本,作者在本书囊括了新的HTML5与CSS3技术,并采用易于理解的步骤式教程讲解了这些技

    大小:104.9 MB前端电子书

  • JavaScript启示录

    JavaScript启示录

    《JavaScript启示录》无关于JavaScript设计模式,也无关于JavaScript面向对象代码实现。《JavaScript启示录》意图通过考察原生JavaScript对象和不同环境对原生对象的支持和细微差别。

    大小:24.4 MBJS电子书

  • JavaScript前端开发案例教程

    JavaScript前端开发案例教程

    JavaScript是这种运用于Web前端开发的开发语言,具备简易、易懂、实用的特性,用JavaScript开发设计网页页面能够提高网页页面的参与性,为客户出示即时的、动态性的互动感受。 《 JavaScript前端

    大小:75.1 MBJS前端电子书

  • JavaScript数据可视化编程

    JavaScript数据可视化编程

    大小:61.8 MBjs编程电子书

  • HTML5+CSS3+JavaScript从入门到精通

    HTML5+CSS3+JavaScript从入门到精通

    本书以基础知识、示例、实战案例相结合的方式详尽讲述了HTML,CSS,JavaScript及目前最新的前端技术

    大小:186 MBweb开发电子书

  • JavaScript忍者秘籍

    JavaScript忍者秘籍

    这是由jQuery库创始人编写的一本深入剖析JavaScript语言的书,从不同层次讲述了逐步成为JavaScript高手所需的知识,适合具备一定JavaScript基础知识的读者阅读

    大小:38.6 MBJavaScript电子书

  • JavaScript基础教程

    JavaScript基础教程

    本书是经典的JavaScript入门书,以易学便查、图文并茂、循序渐进和善于用常见任务讲解语言知识而著称。书中从JavaScript语言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式

    大小:14 MBJS教程电子书

  • 你不知道的JavaScript(中卷)

    你不知道的JavaScript(中卷)

    JavaScript这门语言简单易用,很容易上手,但其语言机制复杂微妙,即使是经验丰富的JavaScript开发人员,如果没有认真学习的话也无法真正理解。

    大小:7.8 MBJS电子书

用户留言