在之前写代码的经历中,常常试过写着写着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();//弹出1
var 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关键字指向详解的更多相关文章

  1. 面向对象(OOP)--OOP基础与this指向详解

      前  言            学过程序语言的都知道,我们的程序语言进化是从“面向机器”.到“面向过程”.再到“面向对象”一步步的发展而来.类似于汇编语言这样的面向机器的语言,随着时代的发展已经逐 ...

  2. Javascript中prototype属性详解 (存)

    Javascript中prototype属性详解   在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不 ...

  3. this指向详解及改变它的指向的方法

    一.this指向详解(彻底理解js中this的指向,不必硬背) 首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是 ...

  4. JavaScript面向对象编程—this详解

      this详解 作者的话 在JavaScriptOPPt面向对象编程中,this这位老大哥,相信大家不会陌生.大家在遇到this时,很多朋友难免会有个疑问:"这个this是什么,它到底指向 ...

  5. 【JavaScript中的this详解】

    前言 this用法说难不难,有时候函数调用时,往往会搞不清楚this指向谁?那么,关于this的用法,你知道多少呢? 下面我来给大家整理一下关于this的详细分析,希望对大家有所帮助! this指向的 ...

  6. JavaScript中的this详解

    前言 this用法说难不难,有时候函数调用时,往往会搞不清楚this指向谁?那么,关于this的用法,你知道多少呢? 下面我来给大家整理一下关于this的详细分析,希望对大家有所帮助! this指向的 ...

  7. Javascript常用的设计模式详解

    Javascript常用的设计模式详解 阅读目录 一:理解工厂模式 二:理解单体模式 三:理解模块模式 四:理解代理模式 五:理解职责链模式 六:命令模式的理解: 七:模板方法模式 八:理解javas ...

  8. JavaScript 各种遍历方式详解及总结

    JavaScript 各种遍历方式详解 在$.each中想要终止循环,但是它没有continue或者break这样的终止方式,所以尝试使用return来进行终止,但是发现并没有跳出循环.为了搞清楚js ...

  9. JavaScript进阶内容——DOM详解

    JavaScript进阶内容--DOM详解 当我们已经熟练掌握JavaScript的语法之后,我们就该进入更深层次的学习了 首先我们思考一下:JavaScript是用来做什么的? JavaScript ...

随机推荐

  1. PetaPoco 批量插入数据

    网上找的代码,还没经过验证 /// <summary> /// Bulk inserts multiple rows to SQL /// </summary> /// < ...

  2. Angular2学习之开发环境构建

    一.主要资料 http://blog.csdn.net/cz_jjq/article/details/50425206 http://www.tuicool.com/articles/mi6rmuB ...

  3. glusterfs 内存管理方式

    glusterfs中的内存管理方式: 首先来看看glusterfs的内存管理结构吧: struct mem_pool { struct list_head list; int hot_count; i ...

  4. 在Visual Studio中设置多核并行编译

    VS是一款非常强大实用的IDE,是在Windows环境下学习编程的首选软件. 有些时候大一点的工程项目编译要耗时挺长时间,随便修改一下代码就可能要编译将近一分钟,甚至更多.即便在开启的增量编译的情况下 ...

  5. ruby : nil?, empty? and blank?的选择

    article = nil article.nil? # => true empty? checks if an element - like a string or an array f.e. ...

  6. Lua学习----Lua的表达式

    前言 Lua的运算符和其他语言基本类似.但也有一点点区别 1.算术运算符 Lua的算术运算符加入了指数运算符^ print(2 ^ 10) -->打印 1024. 求2的10次方 2.关系运算符 ...

  7. Winfrom 开发小技能

    1.放弃进度条.动态进度图片等方式实现用户体验优化方式(主要是优化用户等待体验),建议使用方式? 答:对于From或者Control而言,其提供了Cursor属性设置即可. 例如: this.Curs ...

  8. Adobe 软件防止联网激活更改Hosts文件

    来自为知笔记(Wiz) 附件列表

  9. SonarQube的使用入门

    SonarQube的安装.配置与使用 详情请参照原博客:http://www.cnblogs.com/qiaoyeye/p/5249786.html SonarQube是管理代码质量一个开放平台,可以 ...

  10. 【学】jQuery的源码思路2——$符号是如何封装的

    jQuery中的$符号功能很强大,原因在于对函数参数的个数以及种类的控制,还有对于面向对象思想的运用 function jQuery(args){ //接受参数,并对其判断 this.elements ...