编程过程中,着实十分困扰this的指向性,经过查阅一番资料,终于搞清楚了,在这里总结一下,全文分为以下三个部分:

  1. 什么是this指针?
  2. this指针指向哪里?
  3. 何时使用this?

一 什么是this指针?

在JavaScript中,this指针是在创建函数时,由系统默认生成的两个隐式参数之一(另一个是arguments)。

this指针指向与该函数调用进行隐式关联的一个对象,该对象被称为“函数上下文”。

要想成功的使用this,就必须搞清楚在不同情形下,this指针指向什么“函数上下文”,下面将总结this参数在不同状况下的不同表现。

二 this指针指向哪里?

要搞清楚this指针的指向,需要根据不同的函数调用方式进行分析,有以下四种不同的调用情况:

(1)作为函数进行调用

这里作为函数进行调用是为了区分函数的其他调用方式(作为方法调用,new操作符调用和call,apply调用)。

函数通常通过()操作符进行调用,此时函数内的this指针指向的是window对象。

原因其实很好理解,默认this指针指向调用函数的对象,此时函数实际上是window对象的一个方法,因此this指针指向window对象是合情合理的。

但是,这里有一个不太好的地方需要特别注意:

var object = {
way1 : function() {
console.log(this);
function innerFunc() {
console.log(this);
}
innerFunc();
}
} object.way1(); //object
//window

innerFunc函数内的this指针在此时意外的指向了window对象,使用时应该记住这个差异。因为本质上这个函数依然作为满足“作为函数进行调用”的条件。

(2)作为方法进行调用

一个方法所属的对象在该方法体内可以以this的形式进行引用,因此,当一个函数以方法的形式被调用时,this指针指向该方法的所有者。

这是可以将JavaScript作为面向对象代码进行编写的主要手段之一。

(3)作为构造器进行调用

当函数作为“构造函数”进行调用时,this指针的指向解释起来就略微复杂一点了。

我们要从构造函数本身来说起:

在JavaScript中,构造函数被用来构造对象:

function Person(name,age) {
this.name = name;
this.age = age;
} var jenny = new Person('jenny',24); console.log(jenny.name); //jenny

构造函数的调用,返回值即为一个对象,而这个对象即为构造函数作用域内this指针的引用对象,即“函数上下文”。

(4)call(),apply()方法调用

除了上述的三种情况下造成this指针的引用对象差异外,我们还可以自定义this指针的指向,通过使用call(),apply()方法。

两个方法的使用方式为:

function getName(age,sex) {
console.log(this.name);
this.age = age;
this.sex = sex;
} var jenny = { name : jenny }; getName.call(jenny,24,female); getName.apply(jenny,[24,female]); //jenny

可见这两种调用方式的唯一区别在于,传入参数的形式,call方法依次写入参数,而apply方法则将所需传入函数的参数打包为一个数组统一传入。

而这两种方法在做的事为,将函数内部的隐式this参数指向其第一个参数,并将其后的参数传入至函数中,调用函数。

因此,在此种情况下,函数内部的this指针指向call与apply方法指定的对象。

以上是JavaScript中,this指针在四种情况下的引用对象。

三 何时使用this指针

未完待续。

JavaScript的this指针到底指向哪?的更多相关文章

  1. javaScript中this到底指向谁

    1.前言 在JavaScript中,this的指向一直是大多数初学者的易错点,总是搞不清楚this到底指向谁,而在求职面试中,this的指向问题往往又是高频考点.本篇博文就来总结一下在JavaScri ...

  2. JavaScript中this指针指向的彻底理解

    this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象 这一点与函数中自由变量Action-varibal不同 var ...

  3. 图说js中的this——深入理解javascript中this指针

    没搞错吧!js写了那么多年,this还是会搞错!没搞错,javascript就是回搞错! ………… 文章来源自——周陆军的个人网站:http://zhoulujun.cn/zhoulujun/html ...

  4. javascript中this指针

    看完此片文章豁然开朗,非常感谢.javascript技术难点(三)之this.new.apply和call详解 下面说一说自己的理解: this指针总是指向调用他的对象,其实我更愿意理解为:this指 ...

  5. javascript 误用this指针 的情况

    理解了this指针后,我们再来看看一些很容易误用this指针的情况. 示例1——内联式绑定Dom元素的事件处理函数 <script type="text/javascript" ...

  6. const指针和指向常量的指针

    先看下面六种写法: . const int p; . const int *p; . int const* p; . int * const p; . const int * const p; . i ...

  7. C语言-指针到底是什么?

    1.指针到底是什么?(1).指针变量与普通变量的区别 指针的实质就是一个变量,他跟普通变量没有任何本质区别.指针完整的名字应该叫做指针变量,简称为指针.2.为什么需要指针?(1).指针的出现是为了实现 ...

  8. 不可或缺 Windows Native (18) - C++: this 指针, 对象数组, 对象和指针, const 对象, const 指针和指向 const 对象的指针, const 对象的引用

    [源码下载] 不可或缺 Windows Native (18) - C++: this 指针, 对象数组, 对象和指针, const 对象,  const 指针和指向 const 对象的指针, con ...

  9. cocos2dx中CC_CALLBACK_1等宏中this指针实际指向

    首先看代码,我在Helloworld中添加两个函数. void HelloWorld::addTarget(){ Size visibleSize = Director::getInstance()- ...

随机推荐

  1. [Jenkins] 解决 Gradle 编译包含 SVG Drawable 出现异常

    异常信息 java.awt.AWTError: Can't connect to X11 window server using 'localhost:10.0' as the value of th ...

  2. 160520、MyBatis的几种批量操作

    MyBatis中批量插入 方法一: <insert id="insertbatch" parameterType="Java.util.List"> ...

  3. Android ImageView 获取图片信息后进行比较

    ImageView a=(ImageView)findViewById(R.id.imageView2); //获取当前图片ConstantState类对象 Drawable.ConstantStat ...

  4. 微软构建高效DevOps团队培训总结

    9.21和9.22这两天参加了微软DevOps的培训,主要是围绕TFS2015的不少新功能来讲的,相比较之前我们一直使用TFS2013来管理团队,确实强大了不少,也更加实用了. 首先,什么是DevOp ...

  5. Oracle Java Mission Control MBean 服务器 飞行记录器

    Oracle Java Mission ControlMBean 服务器飞行记录器

  6. webpack4学习笔记(一)

    webpack4 1,安装webpack npm insatll webpack --save-dev //安装最新版本 npm insatll webpack@<version> --s ...

  7. jquery插件网址

    各种分布图的插件:http://echarts.baidu.com/demo.html

  8. golang官方实现如何对httpserver做频率限制(最大连接数限制)

    一般海量处理服务,都会对服务做个最大连接数限制,超过该限制之后,拒绝服务,避免发生雪崩,压坏服务. 使用golang来编写httpserver时,如何进行呢?官方已经有实现好的包. 使用示例: imp ...

  9. 前端 javascript 变量

    变量: python: name = 'alex' JavaScript: name = 'alex' # 全局变量 声明var var name = 'eric' # 局部变量 写全局变量基本好少J ...

  10. robotium原理之获取WebElement元素

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/hunterno4/article/details/35569665         robotium ...