探索Javascript中this的奥秘

前言: this 是 JavaScript 比较特殊的关键字,运用的地方之广,方式之灵活奠定了它的强大,但同时注定了它的难用 。自己刚开始学的时候被绕的很晕,为了彻底弄懂它查了很多资料。然后将自己学的东西整理了一下,以通俗易懂的方式表达出来,权当做学习笔记,同时也可以给有需要的童鞋做下参考^_^

什么是this?

this 关键字的含义是明确且具体的,即指代当前对象。即意味着这个 this 是在某种相对情况下才成立的。

this 被分为三种情况:全局对象、当前对象或者任意对象;判断处于那种情况,这完全取决于函数的调用方式,JavaScript 中主要的函数调用有以下几种方式:

  • 作为普通函数调用
  • 作为对象方法调用
  • 作为构造函数调用
  • 使用 apply 或 call 调用

1. 作为普通函数调用
    ------这是我们最常用的方法,这种调用方式属于全局调用,这里的 this 指的是全局对象

function test(){
 this.a = 5;
 alert(this.a);
 alert(this);
}
test(); // 5 [object Window]

如上所示:定义在全局的函数, 函数的所有者就是当前页面, 也就是window对象,所以example()的调用对象就是Window,因此这里面的this就代表Window;

换一种写法:

var a = 5;
function test(){
 var a = 10;
 alert(this.a);
}
test(); //5

如上所示:test()函数内部也声明了一个变量a,但是调用test()的结果为5,说明此时函数内部的this代表了全局对象即Window;

再换种写法:

var a = 5;
function test(){
 this.a = 10;
}
test();
alert(a); //10

如上所示: 调用test()函数,更改了全局变量a的值,即表明此时this代表全局对象。

2.作为对象函数的调用
   ------当函数被某个对象调用时,此时this就指向了这个对象

var name="张三";
 var person={
  name:"李四",
  showName:function(){
   alert(this.name);
  }
 }
 person.showName(); //输出 李四
 var other=person.showName;
 other(); //输出 张三

如上所示:执行 person.showName()的结果为 李四,说明此时showName中的this指向了person;

而把person.showName赋给other后,因为other属于全局变量,可以看成是window对象的一个属性。所以当调用other(),相当于调用window.other(),因此this指向了window, 输出结果为 张三;

所以说作为函数对象调用时,this就指向了这个调用的对象。

3. 作为构造函数调用
    ------构造函数,就是通过这个函数生成一个新对象(object),这时候的 this 就会指向这个新对象;

function animal(){
 this.name = "豆豆";
}
var dog = new animal();
alert(dog.name); // 输出 豆豆

如上所示:通过new关键字生成一个object类型的对象并把它赋给dog,执行这个构造函数的话,会吧构造函数作用域里的this指向这个对象,在这里就是指向了dog,因此this.name 等同于dog.name, 所以输出结果为豆豆。

4.使用 apply 或 call 调用
    ------apply()是函数对象的一个方法,它应用某一对象的一个方法,用另一个对象替换当前对象。

var a = "张三";
function test(){
 alert(this.a);
}
var b = {};
b.a = "李四";
b.n = test;
b.n(); //李四
b.n.apply(); //张三
b.n.apply(b); //李四

如上所示:b.n()----因为调用的对象为b,所以this指向了b,this.a  == b.a  ,所以结果为李四;

     b.n.apply----当apply()的参数为空时,就是没有对象去替换当前对象,默认用全局对象,所以this指向window,结果为张三;

     b.n.apply(b)----指将当前的this指向替换成b,因此this指向了b,结果为李四

(本文参考了网上的资料和一些书籍,如有错误之处,欢迎指出,将及时改正,么么哒O(∩_∩)O)

总结:本文介绍了 JavaScript 中的 this 关键字在各种情况下的含义,实例都很简单,这样更能有助于加深理解。虽然这只是 JavaScript 中一个很小的概念,但借此我们可以了解 JavaScript 中函数的执行环境,充分掌握this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余。最后,感谢您的观看。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们

时间: 2016-12-10

学习掌握JavaScript中this的使用技巧

tip 首先,我知道这篇文章很无聊,无非就是关于 js 中的 this,并且也已经有千千万万的文章写过这部分内容了:  但是,我还是想写一篇关于 js 中的 this 的文章,算是一个总结归纳吧:(大神们可以绕行看我的其他文章)  在 js 中,this 这个上下文总是变化莫测,很多时候出现 bug 总是一头雾水,其实,只要分清楚不同的情况下如何执行就 ok 了. 全局执行 首先,我们在全局环境中看看它的 this 是什么:  first. 浏览器: console.log(this); //

Javascript中this绑定的3种方法与比较

介绍 this 可以说是 javascript 中最耐人寻味的一个特性,学习this 的第一步就是明白 this 既不是指向函数自身也不指向函数的作用域. this 实际上是在函数被调用时发生的绑定,它指向什么地方完全取决于函数在哪里被调用. 为什么需要绑定this this代指当前的上下文环境,在不经意间容易改变: var info = "This is global info"; var obj = { info: 'This is local info', getInfo: ge

再次谈论Javascript中的this

一直对Javascript中的this都有一种似是而非的感觉,今天突然感觉豁然开朗,特此记录一下. 咱们先看个栗子: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>this的使用</title> <script type="text/javascript"> var Car,tesla; Car=functio

JavaScript中的this,call,apply使用及区别详解

学习起因: 在之前的JavaScript学习中,this,call,apply总是让我感到迷惑,但是他们的运用又非常的广泛.遂专门花了一天,来弄懂JavaScript的this,call,apply. 中途参考的书籍也很多,以<JavaScript设计模式与开发实践>为主,<JavaScript高级程序设计>.<你不知道的JavaScript>为辅.这三本书对我理解this,call,apply都起了很大的帮助. this 首先,我们先讲述this. 在<Java

几句话带你理解JS中的this、闭包、原型链

原型链 所有对象都是基于Object.prototype,Object.prototype就是JavaScript的根对象,在Object.prototype中定义的方法都可以被其它对象访问到,当然也可以被重写了,所以直接在Object.prototype上调用的是原始功能的toString()方法,该方法会放回参数对象的内置属性[[class]]的值,这个值是个字符串,比如'[Object String]' 要理解原型链机制的话,首先得知道根本原因:JavaScript中的对象都有一个内置属性

JavaScript的this关键字的理解

概念性的概述this 当一个函数创建后,一个关键字this就随之(在后台)创建,它链接到一个对象,而函数正是在这个对象中进行操作.换句话说,关键字this可在函数中使用,是对一个对象的引用,而函数正是该对象的属性或方法. 让我们来看这个对象: <!DOCTYPE html><html lang="en"><body><script> var cody = { living:true, age:23, gender:'male', getG

聊一聊JS中this的指向问题

JS中的this指向一直是个让人头疼的问题,想当初我学的是天昏地暗,查了好多资料,看的头都大了,跟他大战了那么多回合,终于把它搞定个七八分,其实往往都是我们复杂化了,现在就让大家轻松看懂this的指向,我会分以下几种情况来说. this的指向: 1.this 指的是调用当前方法(函数)的那个对象,也就是说函数在谁那被调用,this就指的是谁. 来看两个栗子: oBtn.onclick = function(){ alert(this); //oBtn } oBtn[i].onclick = fn

JavaScript中的this使用详解

其实this是一个老生常谈的问题了.关于this的文章非常多,其实我本以为自己早弄明白了它,不过昨天在做项目的过程中,还是出现了一丝疑惑,想到大概之前在JavaScript weekly里收藏待看的一篇详解this的文章(后有链接,也附上了稀土上的中文译文)和另一篇一位前辈推荐的文章,就把它们看了看,对this的认识确实提升了一些. JavaScript 中的'this'是动态的,它在函数运行时被确定而非在函数声明时被确定.所有的函数都可以调用'this',这无关于该函数是否属于某个对象.关于t

JavaScript中this的四个绑定规则总结

前言 如果要问javascript中哪两个知识点容易混淆,作用域查询和this机制绝对名列前茅.所以这篇文章开始将介绍javascript中this的四个绑定规则,下面来一起看看吧. 绑定规则 1. 默认绑定 独立函数调用时,this 指向全局对象,如果使用严格模式,那么全局对象无法使用默认绑定, this绑定至 undefined. function foo() { console.log(this.a); } var a = 2; foo(); // 2 严格模式时: function fo

JS中改变this指向的方法(call和apply、bind)

this是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化.但是总有一个原则,那就是this指的是调用函数的那个对象. this一般指向的是当前被调用者,但也可以通过其它方式来改变它的指向,下面将介绍三种方式: 1.call用作继承时: function Parent(age){ this.name=['mike','jack','smith']; this.age=age; } function Child(age){ Parent.call(this,age);

实例浅析js的this

js的this是什么?关于这个东西,博客园里面有太多的解释了,不过,本人看了一下,感觉对this解释的有点复杂了,因此,本人在此给this一个简单易于理解的定义. this其实是js的一个对象,至于是什么对象呢?很简单,this这个对象就是:谁调用它它就指向谁. 关于这一点,其实,博客园的文章已经说明了很多了,有的文章也说到了点子上,只不过,他们解释的还是有点模糊,这里,我给大家做几个简单的对照实验,根据这几个对照实验的结果,大家应该很清楚了. 希望大家根据我的代码重复实现下面的实验. 首先,我

javascript this详细介绍

this的值是在运行时确定的 JS中的this究竟代表什么,这是在程序运行时根据上下文环境确定,可以分为以下几种情况. 1. 全局作用域中的this 在全局作用域中,this指向window对象. console.log(this);//指向window对象 this.x = 5//在全局作用域内创建一个x //与this.x = 5的等价情况: //var x = 5; //x = 5; 在全局作用域中执行var x=5,其实是为window对象创建一个属性x,并令其等于5. 若定义变量时不加

老生常谈 js中this的指向

在js中this的指向对于新手来说一定是个难题,但是如果你真正理解了的话,也就没什么问题啦,下面就来讲讲this吧. JS中,this的值取决于调用的模式(调用对象),而JS中共有4种调用模式: 1.函数调用模式 当一个函数不是一个对象的属性时,当作函数俩调用,这时函数内的this指向全局对象(大对数情况下是window) window.value=1; function getValue(){ console.log(this.value); } getValue();//输出1,此时的thi

老生常谈js中0到底是 true 还是 false

想到一个好玩的,运行如下 javascript : if ('0') alert("'0' is true"); if ('0' == false) alert("'0' is false"); 结果是,两次都 alert 了!那么 '0' 到底是 true 还是 false 呢? 答案是:在js做比较的时候,有这样的三条规则: • 如果比较的两者中有bool,会把 bool 先转换为对应的 number,即 0 和 1 • 如果比较的双方中有一方为number一方

老生常谈js中的MVC

MVC是什么? MVC是一种架构模式,它将应用抽象为3个部分:模型(数据).视图.控制器(分发器). 本文将用一个经典的例子todoList来展开(代码在最后). 一个事件发生的过程(通信单向流动): 1.用户在视图 V 上与应用程序交互 2.控制器 C 触发相应的事件,要求模型 M 改变状态(读写数据) 3.模型 M 将数据发送到视图 V ,更新数据,展现给用户 在js的传统开发模式中,大多基于事件驱动的: 1.hash驱动 2.DOM事件,用来驱动视图 3.模型事件(业务模型事件和数据模型事

JS中this的指向以及call、apply的作用

在具体的实际应用中,this 的指向无法在函数定义时确定,而是在函数执行的时候才确定的,根据执行时的环境大致可以分为以下3种: 1.当函数作为普通函数调用时,this 指向全局对象 2.当函数作为对象的方法调用时,this 指向该对象 3.当函数作为构造器调用时,this 指向新创建的对象 示例一: window.name = 'myname'; function getName() { console.log(this.name); } getName(); //输出myname 示例二: v

js中this的指向问题归纳总结

前言 js中this指向问题是个老生常谈的问题了,下面这篇文章再来给大家介绍下,大家可以看看,更深入的了解了解,下面话不多说了,来一起看看详细的介绍吧 this this:上下文,会根据执行环境变化而发生指向的改变. 1.单独的this,指向的是window这个对象 alert(this); // this -> window 2.全局函数中的this function demo() { alert(this); // this -> window } demo(); 在严格模式下,this是

老生常谈JS中的继承及实现代码

JS虽然不像是JAVA那种强类型的语言,但也有着与JAVA类型的继承属性,那么JS中的继承是如何实现的呢? 一.构造函数继承 在构造函数中,同样属于两个新创建的函数,也是不相等的 function Fn(name){ this.name = name; this.show = function(){ alert(this.name); } } var obj1 = new Fn("AAA"); var obj2 = new Fn("BBB"); console.lo

Angular.JS中的this指向详解

[this详解] 1.谁最终调用函数,this指向谁. ① this指向的,永远只可能是对象!!!!!! ② this指向谁,永远不取决于this写在哪!!而是取决于函数在哪调用. ③ this指向的对象,我们称之为函数的上下文context,也叫函数的调用者 2.※※※※※this指向的规律(与函数调用的方式息息相关): this指向的情况,取决于函数调用的方式有哪些: ① 通过函数名()直接调用:this指向window ② 通过对象.函数名()调用的:this指向这个对象 ③ 函数作为数组

关于JavaScript中的this指向问题总结篇

在javascript中this的指向一直是前端同事的心头病,也同时是各面试题的首选,现在我们就来总结一下js中this的指向.首先需要了解一下几个概念: 1:全局变量默认挂载在window对象下 2:一般情况下this指向它的调用者 3:es6的箭头函数中,this指向创建者,并非调用者 4:通过call.apply.bind可以改改变this的指向 下面我们具体分析一下 1:在函数调用时 (非严格模式) const func = function () { console.log(this)