在之前写代码的经历中,常常试过写着写着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. 【我是老中医】Win10系统下MATLAB无法正常打开的解决方案

    转眼大四了,要开始做毕设了,导师给的题目要用到他之前做的东西,都是MATLAB做的,所以不太熟悉MATLAB的我也得用这玩意儿了,想想自己目前也就大二的DSS实验和大三的AI实验用过MATLAB,当时 ...

  2. nwjs 配置文件package.json 转载

    配置文件package.json nw在启动应用程序时,首先要读取package.json文件,初始化基本属性,下面我们看看package.json的完整参数.每个参数配置都标有注释. { /**指定 ...

  3. python3验证码机器学习

    python3验证码机器学习 文档结构为 -- iconset -- ... -- jpg -- captcha.gif -- py -- crack.py 需要的库 pip3 install pil ...

  4. python3-day4-python函数

    一.函数特性:减少重复代码使程序变得可扩展使程序变得易扩展定义语法: def sayhi(): print("hello") return sayhi() def sayhi(na ...

  5. [综]前景检测GMM

    tornadomeet 前景检测算法_4(opencv自带GMM) http://www.cnblogs.com/tornadomeet/archive/2012/06/02/2531705.html ...

  6. ubuntu死机怎么办

    在使用ubuntu的时候由于各种复杂的因素,如软件不兼容,误操作等问题导致"死机"怎么办呢?下面我们来看看如何解决这问题...   可以打开终端模拟器   1 ctrl+alt+t ...

  7. Android线程间通信更新UI的方法(重点分析EventBus)

    Android的UI更新只能在UI线程中,即主线程.子线程中如果要进行UI更新,都是要通知主线程来进行. 几种实现方式总结如下,欢迎补充. 1.runOnUiThread() 子线程中持有当前Acti ...

  8. CSS3常用30种选择器总结

    CSS3常用30种选择器总结 HTML5/CSS3时尚的圆盘时钟动画 带当前日期 www.html5tricks.com/demo/html5-css3-clock-with-date/index.h ...

  9. Sublime Text 2/3安装使用及常用插件

    一.介绍 Sublime Text 是一款较新的编辑器,它轻量.简洁.高效,良好的扩展性以及跨平台等特性,使得越来越多的开发人员喜爱.它是一款收费的商业软件,但可以免费无限制无限期的试用,只会偶尔提醒 ...

  10. java对xml文件的读取

    <?xml version="1.0" encoding="UTF-8"?> <body> <names type="1 ...