javascript this关键字指向详解
在之前写代码的经历中,常常试过写着写着this就莫名其妙的不知道指向到哪里去了。今天看了曾探的javascript设计模式,里面特别谈到了this在不同情况下指代的对象,非常有意思。
this指代的情况
this有以下4种情况:
1、对象.函数的形式调用:object.function();
2、普通函数的形式调用:function();
3、构造器调用;
4、Function.prototype.call或Function.prototype.apply调用;
1、对象.函数的形式调用
对象.函数方式调用时,指代该对象。
|
1
2
3
4
5
6
7
|
var obj = { num:1, getNum:function(){ alert(this.num);//输出1 }}obj.getNum(); |
2、普通函数形式调用
普通函数的方式被调用时,this指向全局对象。
|
1
2
3
4
5
6
7
8
9
10
|
window.num = 2;var obj = { num:1, getNum:function(){ alert(this.num); }}obj.getNum();//弹出1var fun1 = obj.getNum;fun1(); //弹出2 |
太神奇了,直接调用函数 fun(); 与通过对象调用函数 xxx.fun(); this指代的对象不同。
3、构造器调用
为了能够用上new关键字,javascript的创建对象可以这样定义。
|
1
2
3
|
var person = function(){ this.name = '刘备';} |
在这种情况下,this指代这个正在创建中的对象。
|
1
2
|
var p = new person();alert(p.name);//弹出刘备 |
4、Function.prototype.call或Function.prototype.apply调用
|
1
2
3
4
5
6
7
8
9
10
11
|
var obj1 = { name:'关羽', getName:function(){ return this.name; }}var obj2 = { name:'刘备'}alert(obj1.getName()); //关羽alert(obj1.getName.call(obj2)); //刘备 |
javascript this关键字指向详解的更多相关文章
- 面向对象(OOP)--OOP基础与this指向详解
前 言 学过程序语言的都知道,我们的程序语言进化是从“面向机器”.到“面向过程”.再到“面向对象”一步步的发展而来.类似于汇编语言这样的面向机器的语言,随着时代的发展已经逐 ...
- Javascript中prototype属性详解 (存)
Javascript中prototype属性详解 在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不 ...
- this指向详解及改变它的指向的方法
一.this指向详解(彻底理解js中this的指向,不必硬背) 首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是 ...
- JavaScript面向对象编程—this详解
this详解 作者的话 在JavaScriptOPPt面向对象编程中,this这位老大哥,相信大家不会陌生.大家在遇到this时,很多朋友难免会有个疑问:"这个this是什么,它到底指向 ...
- 【JavaScript中的this详解】
前言 this用法说难不难,有时候函数调用时,往往会搞不清楚this指向谁?那么,关于this的用法,你知道多少呢? 下面我来给大家整理一下关于this的详细分析,希望对大家有所帮助! this指向的 ...
- JavaScript中的this详解
前言 this用法说难不难,有时候函数调用时,往往会搞不清楚this指向谁?那么,关于this的用法,你知道多少呢? 下面我来给大家整理一下关于this的详细分析,希望对大家有所帮助! this指向的 ...
- Javascript常用的设计模式详解
Javascript常用的设计模式详解 阅读目录 一:理解工厂模式 二:理解单体模式 三:理解模块模式 四:理解代理模式 五:理解职责链模式 六:命令模式的理解: 七:模板方法模式 八:理解javas ...
- JavaScript 各种遍历方式详解及总结
JavaScript 各种遍历方式详解 在$.each中想要终止循环,但是它没有continue或者break这样的终止方式,所以尝试使用return来进行终止,但是发现并没有跳出循环.为了搞清楚js ...
- JavaScript进阶内容——DOM详解
JavaScript进阶内容--DOM详解 当我们已经熟练掌握JavaScript的语法之后,我们就该进入更深层次的学习了 首先我们思考一下:JavaScript是用来做什么的? JavaScript ...
随机推荐
- PetaPoco 批量插入数据
网上找的代码,还没经过验证 /// <summary> /// Bulk inserts multiple rows to SQL /// </summary> /// < ...
- Angular2学习之开发环境构建
一.主要资料 http://blog.csdn.net/cz_jjq/article/details/50425206 http://www.tuicool.com/articles/mi6rmuB ...
- glusterfs 内存管理方式
glusterfs中的内存管理方式: 首先来看看glusterfs的内存管理结构吧: struct mem_pool { struct list_head list; int hot_count; i ...
- 在Visual Studio中设置多核并行编译
VS是一款非常强大实用的IDE,是在Windows环境下学习编程的首选软件. 有些时候大一点的工程项目编译要耗时挺长时间,随便修改一下代码就可能要编译将近一分钟,甚至更多.即便在开启的增量编译的情况下 ...
- ruby : nil?, empty? and blank?的选择
article = nil article.nil? # => true empty? checks if an element - like a string or an array f.e. ...
- Lua学习----Lua的表达式
前言 Lua的运算符和其他语言基本类似.但也有一点点区别 1.算术运算符 Lua的算术运算符加入了指数运算符^ print(2 ^ 10) -->打印 1024. 求2的10次方 2.关系运算符 ...
- Winfrom 开发小技能
1.放弃进度条.动态进度图片等方式实现用户体验优化方式(主要是优化用户等待体验),建议使用方式? 答:对于From或者Control而言,其提供了Cursor属性设置即可. 例如: this.Curs ...
- Adobe 软件防止联网激活更改Hosts文件
来自为知笔记(Wiz) 附件列表
- SonarQube的使用入门
SonarQube的安装.配置与使用 详情请参照原博客:http://www.cnblogs.com/qiaoyeye/p/5249786.html SonarQube是管理代码质量一个开放平台,可以 ...
- 【学】jQuery的源码思路2——$符号是如何封装的
jQuery中的$符号功能很强大,原因在于对函数参数的个数以及种类的控制,还有对于面向对象思想的运用 function jQuery(args){ //接受参数,并对其判断 this.elements ...