目录

1、 this作为全局变量
2、 作为对象方法的调用
3、 作为构造函数调用
4、 apply调用

this是Javascript语言的一个关键字。它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。

1、 this作为全局变量

var name = "The Window";
var object = {
    name : "My Object",
    getNameFunc : function(){
      return function(){
        return this.name;
      };
    }
};
console.log(object.getNameFunc()()); //The Window

2、 作为对象方法的调用

函数还可以作为某个对象的方法调用,这时this就指这个上级对象。

function test2(){
console.log("x的值",this.x);
  }
  var o = {};
  o.x = 1;
  o.m = test2;
  o.m(); //

当方法在某个对象的内部时,此时this就指的是此方法的上级对象,由此可知最外层方法的上级对象是window全局对象

3、 作为构造函数调用

所谓构造函数,就是通过这个函数生成一个新对象(object)。这时,this就指这个新对象。

function test3(){
    this.x = 1;
  }
  var o = new test3();
  console.log("x的值",o.x);//

4、 apply调用

apply()是函数对象的一个方法,它的作用是改变函数的调用对象,它的第一个参数就表示改变后的调用这个函数的对象。因此,this指的就是这第一个参数。

var x = 0;
  function test4(){
    alert(this.x);
  }
  var o={};
  o.x = 1;
  o.m = test4;
  o.m.apply(); //

apply()的参数为空时,默认调用全局对象。因此,这时的运行结果为0,证明this指的是全局对象。

如果把最后一行代码修改为o.m.apply(o); //1

运行结果就变成了1,证明了这时this代表的是对象o。

注:在通常的函数调用中,this是由激活上下文代码的调用者来提供的,即调用函数的父上下文(parent context )。this取决于调用函数的方式。

为了在任何情况下准确无误的确定this值,有必要理解和记住这重要的一点。正是调用函数的方式影响了调用的上下文中的this值,没有别的什么(我们可以在一些文章,甚至是在关于javascript的书籍中看到,它们声称:“this值取决于函数如何定义,如果它是全局函数,this设置为全局对象,如果函数是一个对象的方法,this将总是指向这个对象。–这绝对不正确”)。继续我们的话题,可以看到,即使是正常的全局函数也会被调用方式的不同形式激活,这些不同的调用方式导致了不同的this值。

function foo() {
alert(this);
} foo(); // global alert(foo === foo.prototype.constructor); // true // 但是同一个function的不同的调用表达式,this是不同的 foo.prototype.constructor(); // foo.prototype

有可能作为一些对象定义的方法来调用函数,但是this将不会设置为这个对象。

var foo = {
bar: function () {
alert(this);
alert(this === foo);
}
}; foo.bar(); // foo, true var exampleFunc = foo.bar; alert(exampleFunc === foo.bar); // true // 再一次,同一个function的不同的调用表达式,this是不同的 exampleFunc(); // global, false

参考地址:

深入理解JavaScript系列(13):This? Yes,this!

Javascript的this用法

JS之this应用详解的更多相关文章

  1. js调试工具Console命令详解

    这篇文章主要介绍了js调试工具Console命令详解,需要的朋友可以参考下   一.显示信息的命令 复制代码 代码如下: < !DOCTYPE html> < html> &l ...

  2. JQ的offset().top与js的offsetTop区别详解

    一.前言 最近在做一个图片懒加载的插件,就纵轴(Y轴)而言,我需要时时获取图片的上偏移量,好判断是否已进入视图区域,而我所理解的是offsetTop应该是跟offset().top一样的,然后陷入了因 ...

  3. JQ的offset().top与JS的getBoundingClientRect区别详解,JS获取元素距离视窗顶部可变距离

     壹 ❀ 引 我在 JQ的offset().top与js的offsetTop区别详解 这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset( ...

  4. JS中this关键字详解

    本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 阅读此文章,还需要心平气和的阅读完,相信一定会有所收获,我也会不定期的发布,分享一些文章,共同学习 首先,必须搞清楚在JS里面,函数 ...

  5. JS 中 this 关键字详解

    本文主要解释在JS里面this关键字的指向问题(在浏览器环境下). 首先,必须搞清楚在JS里面,函数的几种调用方式: 普通函数调用 作为方法来调用 作为构造函数来调用 使用apply/call方法来调 ...

  6. Js apply() call()使用详解

    Js apply方法详解我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里 ...

  7. Js apply call方法详解

    Js apply方法详解 我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...

  8. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  9. 转var,let,const,js严格模式的详解

    最近看微信公众账号/知乎网上的文章说,现在的前端的人都注重用什么框架,一问原生js感觉都没有用到工作中.用不到的,学这些意义没有.上午我刚面试了一个前端,工作4年吧.最初是北大青鸟培训的,做后端.ne ...

  10. 原生JS:String对象详解

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

随机推荐

  1. visual studio单项目一次生成多框架类库、多框架项目合并

    目录 不同平台框架项目使用同一套代码,一次编译生成多个框架类库 需要先了解的东西 分析 添加PropertyGroup 多目标平台 编译符号和输出目录设置 添加依赖 代码文件处理 主副平台项目文件处理 ...

  2. unity 简单通用游戏模式设计

    好吧好吧,又谈到这个问题了,其实早就想写这个博客了,犹豫了好久.在设计游戏的时候我本人是很排斥什么游戏架构设计,mvc什么的,我只想马上动手就把自己的游戏玩法最快的用代码敲出来,还不会出无法挽回的错误 ...

  3. linux中ftp的安装过程记录[运维篇]

    安装FTP的全过程记录,对于相同情况希望有所帮助.[centOS] 1.查询本机是否安装vsftpd: rpm -qa |grep vsftpd : 2.安装ftp服务 yum install vsf ...

  4. 【Spark工作原理】stage划分原理理解

    Job->Stage->Task开发完一个应用以后,把这个应用提交到Spark集群,这个应用叫Application.这个应用里面开发了很多代码,这些代码里面凡是遇到一个action操作, ...

  5. Java入门知识点

    Java入门知识点   Java源代码的流程 Java程序由.java文件生成,通过JVM进行编译得到字节文件.class class HelloWorld { public static void ...

  6. centos7配置apache服务

    首先写下基本的步骤: 1.环境准备:关闭防火墙(不关闭无法访问,我这里只是简单的配置,实际部署项目应该会有具体的设置),关闭selinux(试过,不关闭也没事,一般都关闭) 配置 ip 2.安装软件包 ...

  7. Spring Caching集成Ehcache

    Ehcache可以对页面.对象.数据进行缓存,同时支持集群/分布式缓存.在应用中用于常常需要读取的数据交换,而不是通过DB DAO数据交换(cache不占用DB宝贵的NIO,直接交换堆内存). 整合S ...

  8. 在浏览器中输入www.baidu.com后执行的全部过程

    1.客户端浏览器通过DNS解析到www.baidu.com 的IP地址220.181.27.48,通过这个IP地址找到客户端到服务器的路径.客户端浏览器发起一个HTTP会话到220.181.27.48 ...

  9. 链表的创建(C语言实现)

    学习链表之前,我们要知道为什么要引入链表. C语言中的数组使用之前,我们必须要定义数组的大小.但是当我们不知道数据个数(或者很大)时,定义数组大小就成了一个困扰,而且对于这么多数据的处理也会很麻烦.所 ...

  10. 高手速成android开源项目【tool篇】

    主要包括那些不错的开发库,包括依赖注入框架.图片缓存.网络相关.数据库ORM建模.Android公共库.Android 高版本向低版本兼容.多媒体相关及其他. 一.依赖注入DI 通过依赖注入减少Vie ...