本文由 DTcms素材网 – DT素材网 发布，转载请注明出处，如有问题请联系我们！JS中的this指向问题？2018最全this指向解释
收藏 本篇文章给大家带来的内容是关于JS中的this指向问题？2018最全this指向解释，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
this,被谁调用就指向谁
在全局下的this
console.log(this) //这里的this是全局下的this, 因此这个this默认指向的是BOM的顶级对象window
在函数中的this
var fn = function() { console.log(this)}fn() //window
这里的this是函数fn里的this,而fn函数是被window调用的, 因此这个函数中的this指向window
对象中的this
var obj = { name: 'zhang', fnObj: function() { console.log(this) }}obj.fnObj() //obj
在obj对象中定义了一个fnObj方法, 在其中打印this, 因为fnObj是被obj这个对象调用的, 所以这个函数中的this指向是他的调用者obj
构造函数中的this
var func = function(ele) { console.log(this) //func}var newFu = new func('p')
构造函数中的this就是指向这个构造函数本身
var func = function(ele) { this.box = document.querySelector('p') this.box.onclick = function() { console.log(this) //p }}
在构造函数中获取一个标签, 并且为这个标签添加一个事件, 这个事件中的this指向的是调用这个事件的p
箭头函数中的this
在DOM&BOM环境下的箭头函数
箭头函数中的this,是继承过来的, 也就是说, 箭头函数中的this,会继承其父级的this指向, 上文的this指向哪里, 箭头函数中的this就会指向哪里
var a = { b : function(){ var func = ()=> { console.log(this); //这里的this指向a这个对象 } func(); }, c : 'Hello!'}a.b()
箭头函数func的父级是b函数, b函数被a调用, 因此b函数的this指向a, 因此func箭头函数的this会继承b函数中的this指向, 此外, 箭头函数中的this,不会被apply,call,bind所改变
var a = { b : () => { console.log(this) //指向window var func = ()=> { console.log(this); //这里的this指向window } func(); }, c : 'Hello!'}a.b()
箭头函数func的this继承自箭头函数b, 箭头函数b的this继承自他的父级a对象, 因为a对象是window创建出来的, 因此箭头函数b的this指向window, 箭头函数func继承箭头函数b的this,因此也指向window
在nodeJS环境下的箭头函数
module.exports.b = 'haha'var b = 'asdvar a = { b: 'name', c: ()=>{ console.log(this.b) //haha }}a.c()
在node中箭头函数中的this指向也会继承其上一级的this指向, 只不过这里没有window对象了, 而是指向了module.exports这个对象
以上就是对JS中的this指向问题？2018最全this指向解释的全部介绍，如果您想了解更多有关JavaScript视频教程，请关注PHP中文网。
