争怎路由网:是一个主要分享无线路由器安装设置经验的网站,汇总WiFi常见问题的解决方法。

JS中的this指向问题?2018最全this指向解释

时间:2024/5/26作者:未知来源:争怎路由网人气:

网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
本篇文章给大家带来的内容是关于JS中的this指向问题?2018最全this指向解释,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

微信截图_20181011164218.png

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中文网。

以上就是JS中的this指向问题?2018最全this指向解释的详细内容,更多请关注php中文网其它相关文章!


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



关键词:JS中的this指向问题?2018最全this指向解释




Copyright © 2012-2018 争怎路由网(http://www.zhengzen.com) .All Rights Reserved 网站地图 友情链接

免责声明:本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除,敬请见谅!

QQ:1006262270   邮箱:kfyvi376850063@126.com   手机版