JavaScript中的this关键词指向
作者: SilentLove
本文介绍了JavaScript中的this关键词指向,this是JavaScript的一个关键字,他是函数执行过程中,自动生成的一个内部对象,指当前的对象,只在当前函数内部使用,更多相关资料需要的小伙伴可以参考下面文章内容
1、es5中的this的指向
this
是JavaScript
的一个关键字,他是函数执行过程中,自动生成的一个内部对象,指当前的对象,只在当前函数内部使用。- 在
es5
中this
的指向取决于函数运行时的环境。 - 没有直接挂载者(或称调用者)的函数中
this
,非严格模式下指向window
,在use strict
严格模式下,默认为undefined。以下都是在非严格模式下讨论
var name = 'hello window!'; var obj = { name: 'hello obj!', fn: function() { console.log(this.name); } }; var fn = obj.fn; fn(); // hello window! obj.fn(); // hello obj!
obj.fn()
在执行时,fn
中的this
指向的是当前的调用对象obj
。fn()
执行时,this
指向的是window
对象。
var fn = obj.fn; // 等价于 window.fn = obj.fn; fn(); // 等价于 window.fn();
匿名函数的执行环境是全局的
var name = 'hello window!'; var obj = { name: 'hello obj!', fn: function() { console.log(this.name); // 'hello obj!' return function() { console.log(this.name); // 'hello window!' }; } }; obj.fn()();
2、es6中的this
es6
箭头函数的特点
- 箭头函数没有自己的
this
- 函数体内的
this
对象,就是定义时所在的对象,而不是使用时所在的对象,即外层代码的this
引用。 - 不可以当作构造函数,也就是说,不可以使用
new
命令,否则会抛出一个错误。 - 没有
arguments
对象。如果要用,可以用Rest
参数代替。 - 不可以使用
yield
命令,因此箭头函数不能用作Generator
函数
示例说明,修改上述示例代码中的函数为箭头函数:
// 示例代码1 var name = 'hello window!'; var obj = { name: 'hello obj!', fn: () => { console.log(this.name); // 这里的this指向的外层的this,即window对象,想当于上打印的是console.log(window.name); } }; var fn = obj.fn; fn(); // hello window! obj.fn(); // hello window! // 示例代码2 var name = 'hello window!'; var obj = { name: 'hello obj!', fn: function() { console.log(this.name); // hello obj! return () => { console.log(this.name); // hello obj! // this指向外层的this,即obj对象 }; } }; obj.fn()();
总结:
es5
中的this
主要看运行的环境,指向的是调用它的对象。- 箭头函数中的
this
是在一开始就固定的,并不受调用对象
到此这篇关于JavaScript中的this关键词指向的文章就介绍到这了,更多相关js的this指向内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!