怎么理解并掌握JavaScript中的this
这篇文章主要介绍“怎么理解并掌握JavaScript中的this”,在日常操作中,相信很多人在怎么理解并掌握JavaScript中的this问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么理解并掌握JavaScript中的this”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
网站建设哪家好,找创新互联公司!专注于网页设计、网站建设、微信开发、微信平台小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了珠海免费建站欢迎大家使用!
我们先看一段代码:
let from = 'WuHan'; var obj = { from: 'BeiJing', logFrom: function () { console.log(from); } }; let logFrom = obj.logFrom; logFrom(); obj.logFrom();
执行上面的代码,打印的结果是:
打印结果都是 WuHan,这个例子迷惑的地方主要是下面这两个 from 的定义,第一个属于全局变量,第二个属于局部变量,logFrom 函数使用的是全局的 from 还是 obj 对象内部的 from。答案是「使用全局的 from」。
那如果想使用 obj 对象内部定义的 from 该咋么做呢?这就需要进入我们今天要讨论的话题 「this 机制」,困扰读者比较深的是 this 究竟代表谁。记住一句话「this 始终代表的是一个对象」。
当把上面的代码换成( 把打印语句 console.log(from) 换成 console.log(this.from) ):
var obj = { from: 'BeiJing', logFrom: function () { console.log(this.from); } };
当执行:
let logFrom = obj.logFrom; logFrom();
执行结果是 undefined。
当执行:
obj.logFrom();
执行结果是 BeiJing。
为什么会是这样?
其实 this 就是被「动态」绑定到执行上下文中的一个属性,也就是说当构建一个执行上下文的时候就会绑定一个 this 属性。主要有两种执行上下文:全局执行上下文和函数执行上下文,那么就有两种 this,一种全局执行上下文中的 this,另一种是函数执行上下文中的 this。
(1) 当在全局执行一个函数的时候(通过括号的方式执行),this 指向全局对象,在浏览器中,如果在严格模式下 this 为 undefined,在非严格模式下,this 为 window。比如 let logFrom = obj.logFrom,此时变量 logFrom 属于全局变量,通过全局调用一个函数,this 为 window(这里属于非严格模式),window 没有属性 from,故结果为 undefined。
这里给大家留个思考题,如果把第一行代码中的 let 换成 var,结果是什么?
(2) 当通过某个对象调用一个方法的时候,this 为当前的对象。比如通过 obj 调用方法 logFrom,this 为 obj,所以打印结果为 BeiJing。
使用第 1、2 这两条可以搞定大多数 this 的问题,但是有一种情况需要留意。比如下面的代码:
let lefex = { name: 'suyan', age: 0, addAge: function () { console.log('outer this = ', this); this.age += 2; setTimeout(function () { console.log('inner this = ', this); this.age += 1; }, 100); } }; lefex.addAge();
打印结果为(非严格模式下执行):
结果发现两个 this 并不一样,内部函数并不会继承外部函数的 this。为了解决这个问题,就有了 let that = this 这样丑陋的代码。
当然可以使用箭头函数解决这个问题:
this 指向就是当前创建的对象,下面代码中 this 指的是 suyan。
function Person(name) { this.name = name; console.log(this); } let suyan = new Person('suyan');
到此,关于“怎么理解并掌握JavaScript中的this”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
分享题目:怎么理解并掌握JavaScript中的this
网页链接:http://scyanting.com/article/gipcph.html