这篇文章主要讲解了“JavaScript中的this关键词指向实例分析”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript中的this关键词指向实例分析”吧!
1、es5中的this的指向
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
箭头函数没有自己的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()();
感谢各位的阅读,以上就是“JavaScript中的this关键词指向实例分析”的内容了,经过本文的学习后,相信大家对JavaScript中的this关键词指向实例分析这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是天达云,小编将为大家推送更多相关知识点的文章,欢迎关注!