【初窥javascript奥秘之让人捉摸不定的this】你知道现在this指向哪里吗？？？-CSDN博客

前言

之所以会有此篇文章当然还要从最近的一次面试说起，很抱歉居然又扯到面试上去看，其实不要说，平时不注意的东西，往往在面试时便会立马给你揪出来哪里有问题。

比如我当时就小小的栽了个跟头，栽跟头不要紧，要紧的是我确实对js的一些问题没有了解透彻。

俗话说的好，半灌水响叮当，我就那种一直认为自己js功底好的人，但真的拿出手来说，其实真的有点水了......此时再不好好学习一番，岂不是坐井观天，所以让我们开动吧！

小弟最近的文章基本都是边写边发，若是各位发现什么问题，或者感觉废话太多，请包涵。

闲扯作用域

你了解javascript的作用域吗？真的了解吗？那来试试这道题吧：

1 if (!("a" in window)) {

2 var a = 1;

3 }

4 alert(a);

好吧，拿出你的答案吧，吾已经露出了邪恶的笑容了，因为多数人看着这道题脑壳就有点昏（我会说我也有点昏吗？？？）

让我们一起来剥离她性感的外衣吧：

第一步："a" in window这是什么意思？

意思是a是window的属性吗？那我们来做个试验：

我那个去，你会发现不管注释var a 还是不注释，a都是window的属性......于是上面答案呼之欲出！！！但我一团浆糊在我们脑袋中膨胀扩散......

在js的变量作用域中有个原则：所有变量声明都在范围作用域的顶部！

所以，之前我犯了一个愚蠢的错误，错的连我也吃惊，所以我把我自己喝大家都忽悠了，注意陷阱：

其实刚刚上面的完整代码是这样的：

复制代码

// var a;

var in_window = 'a' in window;

alert(in_window);

if (!("a" in window)) {

var a = 1;

}

alert(a);

</script>

复制代码

这样的话：in_window自然是true，这才是隐藏的真相！！！

若是注释下面这些代码的话：

终于正确了，刚刚因为自己的一个错误差点颠覆我最近学习的东西，太可怕了！

现在我们来看看“所有变量申明都会在范围作用域的顶部”是什么意思。

意思是在最下面定义的变量会自动提到上面去啦！！！所以我们定义变量时不如直接全部定义上去算啦。

回到本题：

if (!("a" in window)) {

var a = 1;

}

alert(a);

其实他该是这个样子的。。。。

var a;

if (!("a" in window)) {

a = 1;

}

alert(a);

他将if里面的申明也提前了，怎么样不服气吧，其实我也是有点不服气，我想再试试：

var s = '';

if (false) {

var a = 1;

}

请注意，其中s没有任何意义，就是为了我方便设置断点：

至此真相出现，无论如何a的申明都会提前包括以下几种情况：

var s = '';

while (false) {

var a = 1;

}

变形一

学而不思则罔，我们将题目做个简单变形看看：

if (!("a" in window)) {

a = 1;

}

alert(a);

在if里面去掉了申明，这道题就该是“1”了，但是若是if里面的代码不被执行的话就会报错了哟；

变形2：碰上了函数

刚刚那个现在看来就相对简单了，现在我们看看如此如此这般这般又会如何（我承认我闲的蛋疼好了）？

if (!("a" in window)) {

var a = function () { window.a = 1; }

}

alert(a);

这样一改真的很蛋疼啦，这里不管a被定义为什么，但他是函数表达式，函数表达式就和原来一样，所以不变，if里面不会被执行！

那若是这个样子呢？

if (!("a" in window)) {

function a() { window.a = 1; }

}

alert(a);

这个场景其实我也傻了，那么设置个断点看看：

看来a并不在window中，所以会执行if中的代码；

这里却又引出了另一个问题：到底变量提前或者函数提前？

var a = '1';

function a(){}

alert(a);

function a() { }

var a = '1';

alert(a);

这两种写法会导致最后输出有所不同吗？？？

答案是不会，他们的的结果都是1，原因就是函数式申明更加被优先啦，所以无论怎么写函数式什么都在最前面！！

复制代码

function a() {return false; }

if (a()) {

var a = '1';

}

s = '';

alert(a);

复制代码

function a() {return true; }

if (a()) {

var a = '1';

}

s = '';

alert(a);

复制代码

我们前面说过，无论如何，if里面的申明会提前，那么我们这两道题可以改写一下：

复制代码

var a = function () { return true };

var a;

if (a()) {

a = '1';

}

s = '';

alert(a);

复制代码

注意来：这里的10行，虽说申明了变量a却没有给其赋值，所以a还是函数，这从这里也可以看出来：

所以上面两个答案就没问题了，一个打印函数，一个打印数字1；

变形三

1 var a = 1,

2 b = function a(x) { x && b(--x); };

3 alert(a);

现在我不运行代码试试是否可以解析，答案是不可以。。。我解析不出来，还是运行算了吧，我太水了！

这里涉及几个重要概念：

1 变量声明在进入执行上下文就完成了

2 函数声明也是提前的，所有的函数声明都在执行代码之前都已经完成了声明，和变量声明一样

3 函数声明会覆盖变量声明，但不会覆盖变量赋值，如我们上面看到的

想要理清问题，我还是老老实实一步步做工作吧：

根据规则三，这个结果是没有问题的，再看看下面的

从这里可以看出，若是注释了var a，这里function a()压根与它没什么事情，我们可以直接将之忽略（可能有误）

所以该题可以理解为：

var a = 1,

b = function (x) { x && b(--x); };

alert(a);

坑爹的我本来是想对js中的this做次研究的，没想到在作用域相关的东西上转了这么久，但是经过这次折腾我相信在这块地方我应该不会出问题了吧？？？

进入正题

通常情况下, this代表的是前面提到的Globle Object，也就是Browser环境时的window Object.

当function作为某一对象的 method 时, this 代表这个 function 所属的 object

其实这里有个原则“javascript中的this永远指向其函数拥有者”或者“this指针代表的是执行当前代码的对象的所有者”

说到javascript中的this就不能不提javascript中的函数，说到javascript中的函数就会涉及到闭包，我今天就以以下几个方面研究下javascript中的this：

1 一般情况下的this

2 对象调用中的this

3 函数调用中的this

4 页面dom事件对象中的this

5 大杂烩

正常情况下的this

正常情况下的this就是windows，我会乱说？

var a = 1;

alert(window.a);

申明a其实就在window上申明的，其实我各位说这些干嘛呢。。。。大家都知道呀，所以跳过算啦。

对象中的this

对象中的this情况相对复杂一点可能和我们后面的原型扯上关系，至于原因我们后面再说，先看看下面这个例子：

复制代码

1 var person = {

2 name: '叶小钗',

3 getName: function () {

4 var scope = this;

5 alert(scope.name);

6 var s = ''//无实际意义，用于设置断点

7 }

8 };

9 person.getName();

复制代码

这个例子亦很平常，仿佛一切理所当然，当我拿出来说是想证明一件事情“this指向其函数拥有者”，这次拥有者为person所以打印叶小钗理所当然

我们简单做下变形：

复制代码

1 var name = '素还真';

2 function global_getName() {

3 var scope = this;

4 return scope.name;

5 var s = ''//无实际意义，用于设置断点

6 }

7 var person = {

8 name: '叶小钗',

9 getName: function () {

10 var scope = this;

11 return scope.name;

12 var s = ''//无实际意义，用于设置断点

13 }

14 };

15 var s1 = global_getName();

16 var s2 = person.getName();

18 var s = '';

复制代码

也没任何问题，好的我们再做一次变形：

复制代码

var name = '素还真';

function global_getName() {

var scope = this;

return scope.name;

var s = ''//无实际意义，用于设置断点

}

var person = {

getName: global_getName

};

var s1 = global_getName();

var s2 = person.getName();

var s = '';

复制代码

我们看到getName被指向了global_getName，那我们再调用person.getName会不会有所不同呢？

当然不会了！我发现我自己被自己感动了，完全在说一些没意义的东西，所以下面这种情况是不可能骗到大家的，我就不绕弯子了：

复制代码

var name = '素还真';

function global_getName() {

var scope = this;

return scope.name;

var s = ''//无实际意义，用于设置断点

}

var person = {

getName: global_getName

};

var hehe = {

getName: person.getName

};

var s1 = global_getName();//素还真

var s2 = person.getName();//叶小钗

var s3 = hehe.getName(); //笑吧

复制代码

函数中的this

要说函数的话，我先说说javascript中函数调用有四种方式和函数中this的相关东东：

1 方法调用模式：作为对象属性调用obj.func()

2 函数调用模式：指向全局，直接调用 func()

3 构造器调用模式：new方式调用，会隐式创建一个新对象其隐藏链接至函数prototype成员

4 call/apply调用模式：动态改变this指向的怪咖

函数代码中this值的第一个特性（同时也是最主要的特性）就是：它并非静态的绑定在函数上。

正如此前提到的，this的值是在进入执行上下文（Excution context）的阶段确定的，并且在函数代码中的话，其值每次都不尽相同。

然而，一旦进入执行代码阶段，其值就不能改变了。如果要想给this赋一个新的值是不可能的，因为在那时this根本就不是变量了。

对于函数中this的设定被认为是一个失误，但谁管他那么多呢。。。

现在回到正文，请看以下例子：

复制代码

1 function func() {

2 var scope = this;

3 function s_func() {

4 var s_scope = this;

5 var s1 = scope;

6 var s2 = s_scope;

7 var s = '';

8 }

9 s_func();

10 }

11 this.func();

复制代码

这里s1，s2都指向全局，这是为什么呢？我也不知道了，这里就去查询了下资料：

“ 函数上下文中this的值是函数调用者提供并且由当前调用表达式的形式而定的。如果在调用括号()的左边有引用类型的值，那么this的值就会设置为该引用类型值的base对象。所有其他情况下（非引用类型），this的值总是null。然而，由于null对于this来说没有任何意义，因此会隐式转换为全局对象。“

——Javascript this 的一些学习总结

”当调用括号的左边不是引用类型而是其它类型，这个值自动设置为null，结果为全局对象。“

——深入理解JavaScript系列（13）：This? Yes,this!

我们随便看一个变形：

复制代码

1 var person = {

2 name: '叶小钗',

3 func: func

4 };

5 function func() {

6 var scope = this;

7 function s_func() {

8 var s_scope = this;

9 var obj = {};

10 obj.s1 = scope;

11 obj.s2 = s_scope;

12 return obj;

13 }

14 return s_func ();

15 }

17 var o = this.func();

18 var o2 = person.func();

19 var s = '';

复制代码

这个应该比较好理解这边就不说了。

构造函数

以上说那么多绕过去绕过来的大家一定累了吧，好吧，开心点，我们看看下面这个东西，我想你心情会好起来的！！！

复制代码

1 var name = 'window_叶小钗';

2 var Person = function (name) {

3 this.name = name;

4 };

6 Person('叶小钗');

7 var s1 = Person.name;

8 var o = new Person();

10 var s = '';

复制代码

这是一段可怕的代码，Person('叶小钗')事实上改变不了任何事情，但从某种意义上来说Person也是对象，

所以他确确实实是存在name这个值的：

因为this.name是属于该对象的子对象的属性，若不实例化便休想染指

这个样子写又会有所不同，而且又产生了诡异的一幕：

复制代码

var name = 'window_叶小钗';

var Person = function (name) {

this.name = name;

};

Person.name = name;

Person.name1 = name;

var o = new Person('叶小钗');

var s1 = Person.name;

var s2 = Person.name1;

var s3 = o.name;

var s = '';

复制代码

我们发现，由于Person中定义了this.name，外面无论怎么赋值都无效啦！

关于动态指定this的call/apply

每个函数都有一个方法call可以动态指定this指向，第一个参数便是this指向，不传或者null更具前面说的便是window，第二个参数为参数：

复制代码

1 var name = 'window_叶小钗';

2 function getName() {

3 return this.name;

4 }

5 var person = { name: '叶小钗' };

6 var s1 = getName();

7 var s2 = getName.call();

8 var s3 = getName.call(null);

9 var s4 = getName.call(undefined);

10 var s5 = getName.call(person);

11 var s = '';

复制代码

dom事件中的this

复制代码

点击我试试</div>

function test_this(el) {

var scope = this;

var s = '';

}

</script>

复制代码

我们看到el是dom对象，this指向的是window，那么换个写法看看：

复制代码

点击我试试</div>

function test_this(e) {

var scope = this;

var s = '';

}

document.getElementById('wl').onclick = test_this;

</script>

复制代码

这个样子，this指向的是dom对象，我们再试试：

复制代码

点击我试试</div>

function test_this(e) {

var scope = this;

var s = '';

}

document.getElementById('wl').addEventListener('click', test_this, false);

</script>

复制代码

这样结果与上面相同。

检测学习成果的时间

现在，我感觉我对javascript中的this好像比较清楚了，是吗？？来大家一起来做两道题吧，大家记得独立做下哦：

作用域：

a = 2;

var a = 1;

alert(a);

(function () {

baz = 5;

var bar = 10;

})();

alert(baz);

this：

确实想不到合适的了，各位园友给推荐两个呗。

结语

通过此次的研究学习，我感觉我对this的了解相对深入一点了，在后面工作中再注意总结一番，我相信我可以完全掌握this的特性！

小弟现在还很水，又是边写边发文，若是有不对或是理解有误的地方还请各位大侠提出来哟。

参考资料：

详解Javascript 中的this指针

深入理解JavaScript系列（13）：This? Yes,this!

Javascript this 的一些学习总结

如果你觉得这篇文章还不错，请帮忙点击一下推荐，谢谢！

PS：小弟写了3个多小时，没有功劳也有苦劳，没有苦劳也有疲劳啊！！！若是各位觉得还能读，请猛击顶！！！他们说连续点会顶多次我不知道是不是呢？

您可以考虑给小钗发个小额微信红包以资鼓励

上海-B站招聘靠谱前端（3年左右工作经验），喜欢二次元的小伙伴私聊！

分类: javascript

好文要顶关注我收藏该文

叶小钗

关注 - 32

粉丝 - 5014

荣誉：推荐博客

+加关注

32 3

« 上一篇：一道面试题带来的前端优化——实现星星点评

» 下一篇：【CSS3初探之字体、文本相关】让人开不了始的CSS3。。。

posted on 2013-04-22 15:43 叶小钗阅读(3323) 评论(24) 编辑收藏

评论:

#1楼 2013-04-22 15:55 | BERWOLF

答案是:1和5

支持(0)反对(0)

#2楼[楼主] 2013-04-22 16:06 | 叶小钗

@ BERWOLF

大哥，你要简单分析下吧

支持(0)反对(0)

#3楼 2013-04-22 16:16 | BERWOLF

@ 叶小钗

引用

@BERWOLF大哥，你要简单分析下吧

a = 2;//给window添加一个属性:a=2

var a = 1;//产生一个变量a=1;

alert(a);//输出变量a的值,所以是1

(function () {

baz = 5;

var bar = 10;

})();

alert(baz);//这里输出window的属性baz,因为出了{}所以变量bar失效,而window.baz有值且为5;

支持(0)反对(0)

#4楼[楼主] 2013-04-22 16:23 | 叶小钗

@ BERWOLF

@无码帝

我发现我可耻的把题目理解错了。。。

支持(0)反对(0)

#5楼 2013-04-22 17:02 | 岁月漫步

你辛苦了

支持(0)反对(0)

#6楼 2013-04-22 17:19 | 无码帝

@ BERWOLF

a = 2;

var a = 1;

alert(a);

根据声明提升可以理解为

var a;

a = 2;

a = 1;

alert(a);

支持(0)反对(0)

#7楼[楼主] 2013-04-22 17:52 | 叶小钗

@ 无码帝

下面那道题呢？

支持(0)反对(0)

#8楼 2013-04-22 19:16 | 无码帝

@ 叶小钗

(function () {

baz = 5;

var bar = 10;

})();

alert(baz);

baz没有在匿名函数的上下文中声明，它是属于全局上下文中的变量，而bar在匿名函数中声明并初始化。所以alert(baz)的结果是全局中的baz，则是5。

把题目修改一下

(function () {

baz = 5;

var baz = 10;

alert(baz);

})();

alert(baz);

在里，baz在匿名函数中声明了，不过是在baz = 5的后面，根据变量声明提升了，第一个alert显示结果为10.对于下一个alert结果，其实函数已经变成这样

(function () {

var baz ;

baz = 5;

baz = 10;

alert(baz);

})();

alert(baz);

这个baz=5不再声明的是全局变量，而是简单的赋值。所以第二个alert会报错。

支持(0)反对(0)

#9楼 2013-04-22 19:30 | simonleung

ES5 有strict mode的,this 在function內不會指向window

支持(0)反对(0)

#10楼 2013-04-22 20:10 | BERWOLF

@ 无码帝

引用

@BERWOLFa = 2;

var a = 1;

alert(a);

根据声明提升可以理解为

var a;

a = 2;

a = 1;

alert(a);

a=2;

var a=1;

第一个a在声明前使用,应该是给window添加一个a的属性

第二个才是声明一个a的变量

alert(a);找到最近的a,这个a是变量a,所以输出1.

(以上是推测,可以去firebox上看一下dom属性)

支持(0)反对(0)

#11楼 2013-04-22 21:24 | 李骏杰

看半天不知道楼主在说什么

支持(0)反对(0)

#12楼 2013-04-22 21:34 | 清香白莲素还真

钗公出的两道题和this关联不大，只要进入执行环境时，对variable object的属性绑定有关。

你的徒弟应该是假死吧，你和宫无痕商量好了一起对付大宗师。

On entering an execution context, the properties are bound to the variable object in the following order:

• For function code: for each formal parameter, as defined in the FormalParameterList, create a

property of the variable object whose name is the Identifier and whose attributes are determined by

the type of code. The values of the parameters are supplied by the caller as arguments to [[Call]]. If

the caller supplies fewer parameter values than there are formal parameters, the extra formal

parameters have value undefined. If two or more formal parameters share the same name, hence the

same property, the corresponding property is given the value that was supplied for the last parameter

with this name. If the value of this last parameter was not supplied by the caller, the value of the

corresponding property is undefined.

• For each FunctionDeclaration in the code, in source text order, create a property of the variable

object whose name is the Identifier in the FunctionDeclaration, whose value is the result returned by-38-

creating a Function object as described in 13, and whose attributes are determined by the type of

code. If the variable object already has a property with this name, replace its value and attributes.

Semantically, this step must follow the creation of FormalParameterList properties.

• For each VariableDeclaration or VariableDeclarationNoIn in the code, create a property of the

variable object whose name is the Identifier in the VariableDeclaration or VariableDeclarationNoIn,

whose value is undefined and whose attributes are determined by the type of code. If there is

already a property of the variable object with the name of a declared variable, the value of the

property and its attributes are not changed. Semantically, this step must follow the creation of the

FormalParameterList and FunctionDeclaration properties. In particular, if a declared variable has

the same name as a declared function or formal parameter, the variable declaration does not disturb

the existing property.

支持(0)反对(0)

#13楼 2013-04-22 22:06 | TBag

真是太难为你了，你这文章写这么多，没有一点看头。。杂乱无章。

支持(0)反对(0)

#14楼 2013-04-22 22:36 | 傻瓜小Yǚ

…看了一半，还是看不下去了。太乱了…

支持(0)反对(0)

#15楼[楼主] 2013-04-22 22:53 | 叶小钗

@ 大家都不容易

和老夫聊天的不是宫无后，和老夫聊天的哪位左眼的红色花纹不一样

支持(0)反对(0)

#16楼[楼主] 2013-04-22 22:59 | 叶小钗

@ TBag

@傻瓜小Yǚ

两位专业方向不是web前端吧？

支持(0)反对(0)

#17楼 2013-04-23 07:07 | dotnet的诱惑

其实，这个问题很简单，在做开发的时候，如果不知道this指向谁，直接console.info(this)就OK了

支持(0)反对(0)

#18楼 2013-04-23 11:29 | 小腼腆

看懂了

支持(0)反对(0)

#19楼 2013-05-03 17:29 | flyfish1986

最容易混淆的就是函数调用中的this了，其实一个很简单的办法就可以区分开：函数的调用方式！！！最后两道题只是变量对象在上下文的两个阶段解析的问题，与this没关系。关于作用域，只有两种:global和函数，不存在代码块作用域，如if或者for之类的。

支持(0)反对(0)

#20楼 2013-06-10 11:56 | 永远的阿哲

研究精神可嘉，但实际把简单问题搞复杂了

支持(0)反对(0)

#21楼[楼主] 2013-06-16 13:17 | 叶小钗

@ 大家都不容易

我徒弟看来确实挂了

支持(0)反对(0)

#22楼 2013-06-30 13:23 | apodemakeles

LZ，第一个试验里第二种注释掉//var a的那个我怎么试着是false?...

支持(0)反对(0)

#23楼 2014-10-17 12:13 | sun_mile_rain

楼主赞，总结得很详细哦~

但是文章中有个错误, 变形2：碰上了函数这一小节中关于如下代码的解析说：看来a并不在window中，所以会执行if中的代码；

var s = '';

if (!("a" in window)) {

function a() { window.a = 1; }

a();

}

alert(a);

a的值为function a() { window.a = 1; }是因为函数声明提升的原因。其实接下来也有讲到这个概念，此处的错误，应该当时思绪比较乱导致的

支持(0)反对(0)

#24楼 2016-02-21 10:10 | Fighting_dao

刚开始学js，受益匪浅。谢谢博主

支持(0)反对(0)

刷新评论刷新页面返回顶部

注册用户登录后才能发表评论，请登录或注册，访问网站首页。