在之前写代码的经历中,常常试过写着写着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. first

    不知道学啥,怎么办,写博客.找不到工作,怎么办,写博客.好吧,第一天博客完成.-渣渣米

  2. MSXML应用总结

    MSXML的DOM模型是符合W3C DOM标准的,而DOM API在Windows中以COM接口的形式提供,关于COM请大家查阅相关资料.简单来说,COM提供了一个环境和一套规则,使接口的设计实现到对 ...

  3. 转载:详细解析Java中抽象类和接口的区别

    在Java语言中, abstract class 和interface 是支持抽象类定义的两种机制.正是由于这两种机制的存在,才赋予了Java强大的 面向对象能力.abstract class和int ...

  4. Android应用开发-数据存储和界面展现(一)(重制版)

    常见布局 相对布局(RelativeLayout) 相对布局下控件默认位置都是左上角(左对齐.顶部对齐父元素),控件之间可以重叠 可以相对于父元素上下左右对齐,相对于父元素水平居中.竖直居中.水平竖直 ...

  5. Windows Redis使用

    一.Redis 的安装 1.Redis 下载 Windows 版本下载:https://github.com/dmajkic/redis/downloads 2.解压到 C:\redis-2.4.5- ...

  6. oracle for循环查找结果

    -- Call the procedure begin ' ) loop dbms_output.put_line('v_rlt = '||v_rlt.ID||v_rlt.inspection_no) ...

  7. CSS 伪类 (Pseudo-classes)

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...

  8. Jquery 防止页面刷新

    1.禁止鼠标右键功能$(document).ready(function() { $(document).bind("contextmenu",function(e) { aler ...

  9. JLINK通过JFLASH烧写bin文件报错处理方法

    错误原因:烧写开始地址出错,打开BIN文件后弹出的设置开始地址不正确不能为0 解决措施:用J-FLASH LITE或者将开始地址设置成正确的地址(KEILMDK中IROM1的开始地址

  10. 表在用时建索引要加ONLINE

    因为: 源地址:https://zhidao.baidu.com/question/585392982737434725.html 一般建立索引会引起锁表,不允许进行数据更新等DML操作: 如果建立索 ...