谈谈 JavaScript 中的 this 指向问题
2016-03-25 16:09
1021 查看
JavaScript 中的 this 为一个重难点,它不像静态语言 C#、Java 一样,就表示当前对象。而在 JS 中, this 是运行时确定,而并非定义时就已确定其值。
谈起 this ,必须少不了 JavaScript 另一个重点:函数,在 JS 中函数有以下几种定义方法。
一 this 指向 window
![](http://images2015.cnblogs.com/blog/620936/201603/620936-20160325152447854-1201322119.png)
二 this 指向当前对象
![](http://images2015.cnblogs.com/blog/620936/201603/620936-20160325153515120-246292361.png)
三 this 指向通过构造器函数所创建的对象
![](http://images2015.cnblogs.com/blog/620936/201603/620936-20160325154441495-1752027062.png)
四 this 在原型中,指向通过该构造器函数创建的对象(同 new )
![](http://images2015.cnblogs.com/blog/620936/201603/620936-20160325155113448-1494397922.png)
最后,看看几个容易引起误解的地方 ,有关该函数中 this 指向,关于以下两个,本人仅仅通过 chrome 控制台及调试,原理性感觉用 Java、C# 的无法解释。
![](http://images2015.cnblogs.com/blog/620936/201603/620936-20160325160234183-1176116919.png)
![](http://images2015.cnblogs.com/blog/620936/201603/620936-20160325161258261-1059536936.png)
参考资料:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions
谈起 this ,必须少不了 JavaScript 另一个重点:函数,在 JS 中函数有以下几种定义方法。
// 函数声明 function fun(){ } // 函数表达式 var fun=function(){ }; // Function 构造函数 var fun=new Function (arg1, arg2, ... argN, functionBody) arg1 arg2 .... 为函数形参 functionBody 为函数主体
一 this 指向 window
function f(){ console.dir(this); console.dir(this.f===f); console.dir(this===window) } f(); // 此时,可视 f 为 window 对象下定义的一个属性,f() 可视为由 window 进行调用,此时,this 即指向 window
![](http://images2015.cnblogs.com/blog/620936/201603/620936-20160325152447854-1201322119.png)
二 this 指向当前对象
var obj={name:"jack",age:20,say:function() { console.dir(this); console.dir(this===obj); alert(this.name); }}; obj.say(); // 通过 obj 对象调用 say 方法,而此时 say 方法即指向当前对象
![](http://images2015.cnblogs.com/blog/620936/201603/620936-20160325153515120-246292361.png)
三 this 指向通过构造器函数所创建的对象
var Person=function(name,age) { this.Name=name; this.Age=age; console.dir(this); }; new Person("jack",20); Person("jack",20); // 前者通过 new 关键词,调用 Person 函数,此时,this 指向当前构造器函数所创建的对象 // 而后者,直接调用 Person 函数,参考第一条,可视为 window.Person(),此时,this 指向 window
![](http://images2015.cnblogs.com/blog/620936/201603/620936-20160325154441495-1752027062.png)
四 this 在原型中,指向通过该构造器函数创建的对象(同 new )
var Person=function(name,age) { this.Name=name; this.Age=age; }; Person.prototype.say=function() { console.dir(this); } new Person(“jack”,20).say(); // 首选,以 Person 为构造器创建对象,再调用 say 方法,此时,this 指向以该构造器造建的函数对象
![](http://images2015.cnblogs.com/blog/620936/201603/620936-20160325155113448-1494397922.png)
最后,看看几个容易引起误解的地方 ,有关该函数中 this 指向,关于以下两个,本人仅仅通过 chrome 控制台及调试,原理性感觉用 Java、C# 的无法解释。
var f={name:'jack',age:20,say:function() { console.dir(this); console.dir(this.name); }}; var f1=f.say; f1(); console.dir(window.name); // 将 f 对象中 say 属性(say 为函数)赋值给 f1 变量,而此时,通过 f1()调用,此时,this 指向 window,并非 f 对象
![](http://images2015.cnblogs.com/blog/620936/201603/620936-20160325160234183-1176116919.png)
var f=function() { console.dir(this); var f1=function() { console.dir(this); console.dir(this===f); }; f1(); }; f(); // 在函数中,再定义一个函数时,同时,在外层函数中调用该函数,而此时 ,this 并非指向外层函数对象,而是指向 window
![](http://images2015.cnblogs.com/blog/620936/201603/620936-20160325161258261-1059536936.png)
参考资料:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions
相关文章推荐
- JS之for循环优化
- JS中的函数
- javascript鼠标滚动事件中出现的问题
- 在 JavaScript 中判断用户是用手机还是电脑打开此网页
- 鼠标滚动局部-选项卡
- JavaScript的全局变量与局部变量解析
- javascript
- javascript
- 今天碰到了关于登陆后,重定向到上一级页面
- input输入框的js改变事件
- jsp showModalDialog父子窗口传值
- JSF学习五Ajax
- Javascript入门
- 用js查找法实现当前栏目的高亮显示的代码
- JavaScript面向对象编程(继承实现方式)
- JS中通过方法名字符串调用方法
- js 图片放大镜功能
- JS脚本加载与执行对性能的影响
- 简单实现原生JS中的多重继承
- js常用正则表达式