首页 » HTML5 » 跳槽必备:JavaScript面试热点之this对象详解

跳槽必备:JavaScript面试热点之this对象详解

原文 http://blog.csdn.net/zwjweb/article/details/78911154

2017-12-28 02:00:23阅读(322)

跳槽面试的时候,很多时候都会做笔试题,其中遇到关于this的知识点比例很高。今天就带大家来认识下JavaScript中的this对象,高薪必备。

从简单开始

先看下面一段简单的代码:

跳槽必备:JavaScript面试<a href=热点之this对象详解" src="http://p3.pstatp.com/large/50a300040b5e13d48f31" alt="跳槽必备:JavaScript面试热点之this对象详解">


问题1:obj是javascript中的什么类型?(想一想再往下看)

答案为:obj是js中的对象类型。对象就是一些属性和方法的集合。

问题2:如果执行obj.foo(),会在控制台输出什么呢?

答案为:js。

通过上面的这个小例子简单的认识下this:this是js对象中的一个特殊指针,它的指向根据环境不同而会发生改变。

生活中也有关于this的例子,比如张三的儿子张小明,这里的this就是张小明;李四的儿子李小明,这里的this就是李小明。

破解面试法宝

this指向:谁调用或者哪个对象调用this所在的函数,this就指向谁。

①构造函数this和普通函数this指向

跳槽必备:JavaScript面试热点之this对象详解

对象构造函数中的this

跳槽必备:JavaScript面试热点之this对象详解

普通函数中的this

在普通函数中this中指的是window对象,所以this.name调用的是‘淘宝’。

下面再来看一个有些难度的:

跳槽必备:JavaScript面试热点之this对象详解

上面例子中的obj.foo()也可以拆开了写成这样:

var re = obj.foo();

re(); ====> window.re();

写成这样是不是更利于理解了呢。

定时器中的this指向

先来看一个定时器的例子:

跳槽必备:JavaScript面试热点之this对象详解

定时器中的this

这里要记住一点,定时器中的this指的是window对象。

this的指向面试实例

跳槽必备:JavaScript面试热点之this对象详解

面试题

分析:obj.foo()调用的是obj对象中的foo()方法;foo()方法里有一个定时器,定时器的一个参数是this.fn,这里的this指的是obj对象;然后fn()方法里又调用了this.name,但是大家还记得定时器中的this指的是window对象吧,所以最终this.name调用的是window对象中的name。

再加点难度,修改上面的题,使其能最终输出:‘腾讯’呢?

跳槽必备:JavaScript面试热点之this对象详解

ES6 箭头函数和 this

跳槽必备:JavaScript面试热点之this对象详解

ES6中的箭头函数

箭头函数的特征就是:定义在哪,this 就指向那。即箭头函数定义在一个对象里,那箭头函数里的 this 就指向该对象。

相信能看到最后的各位,对于JavaScript中的有关this的坑都能跳出来的~~~。

web前端/H5/javascript学习群:250777811

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹