javascript this的理解（面试题）

JS this指向谜题解析

最新推荐文章于 2024-04-03 02:50:14 发布

转载最新推荐文章于 2024-04-03 02:50:14 发布 · 91 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/outside/p/3741005.html

文章标签：

#面试 #javascript #ViewUI

本文通过一道关于JavaScript中this关键字的面试题，详细解析了this在不同上下文中指向的变化规律，并通过具体示例深入探讨了函数调用方式对this指向的影响。

最近遇到一道考察this的面试题，结果是四分之三回答错了，本来对this的了解还是比较清楚的，一下子就被弄蒙了。代码如下：

var x = 10;
var foo = {
   x : 20,
   bar : function(){
       var x = 30;
       console.log(this.x)
    
   }
};
foo.bar();
(foo.bar)();
(foo.bar = foo.bar)();
(foo.bar,foo.bar)();

　我给出的答案是 20,10,20，?;

解释我答题时的思路：

第一个:对象中的this永远指向该对象，所以是foo中的x=20;

第二个:foo.bar=function(){......},所以我考虑执行代码相当于(function(){var x = 30;console.log(this.x)})();故this指向window，所以x=10;

第三个:foo.bar赋值给foo.bar，那这个函数没变，跟第一题一样，输出x=20;

第四题我不懂；

先不说哪个对哪个错，先了解跟这道题有关的基本知识

（1）一个对象中一个带有this的方法被调用后，this指向window，不是调用它的对象；

var a = {
	b : "b",
	c : function(){
		console.log(this.b);
	}
};
var A = a.c;
A();//undefined;


var obj = {
	b : "objB",
	c : function(){
		var fn = a.c;
		fn();
	}
};
obj.c();//undefined
//这里不是只想obj中的b

（2）关于自执行匿名函数

(function(){}())||(function(){})()

(function(){console.log("helloworld")})();//helloworld
//匿名函数自执行，不需要调用

但请注意：
(console.log("helloworld"))();//helloworld 
//TypeError: undefined is not a function

//就是()()中不是一个函数，输出结果后会弹出错误提示。

进过调试和自己的理解，接下来解释我回答问题的对错。

第一题思路没问题；

第二题错了。why：我理解错误的地方用代码来解释一下

var name = "don't tell you";
var obj = {
      name : "outside",
      fn : function(){
             console.log(this); 
      }    
}  
obj.fn()//outside;
var Fn = obj.fn;
Fn();//don't tell you;

我就是以为(foo.bar)()中的foo.bar被赋予了一个新的空间，从而函数中的this指向window.其实它就是自执行foo中的bar函数，所以本题的答案是x=20;

第三题错了。why:上面提到的这句话一个对象中一个带有this的方法被调用后，this指向window，不是调用它的对象

所以foo.bar = foo.bar后，this已经指向window了，故自执行后，输出为window中的x=10;

第四题：我现在还搞不太清楚，不过我做了一定的调试

(function(){console.log("helloworld")},foo.bar)();//10
(foo.bar,function(){console.log("helloworld")})();//helloworld
//可以看出，在()()中的两个函数，永远执行第二个

那执行第二个函数(foo.bar)()应该输出20啊！为什么输出10，这个暂时还不太清楚。

转载于:https://www.cnblogs.com/outside/p/3741005.html