在深入学习JavaScript之后,我们越来越多的会遇到函数或者在对象内部中,对于this的指向问题的疑惑,其实基本上每一个编程语言中都有一个this,这个this的指向都是大同小异,你也可以汉化它的意思,this的意思是这个,就是本身的意思,那么在JavaScript中,我们的this代替的那个本身到底会随着代码情况的不同而有什么变化呢?今天,我们就来一体探讨一下JavaScript中关于this的指向问题:

  首先呢,this可以指向window对象,和其他调用它的对象,当然,在严格模式下,它指向undefined,那我们就先来看一下最简单的形式,代码1:

 function People (name,age){
this.name = name;
this.age = age;
}
var xiaoMing=new People('xiaoming',13);
alert(xiaoMing.name);//这时会弹出xiaoming

上边呢,是我们对于this的理解最简单的一种形式,xiaoMing是我们通过构造函数People新创建的一个对象,那么函数中的this指向的就是我们的对象xiaoMing,所有当我们调用xiaoMing.name的时候,会弹出它的名字,注意,在这里我们美创建一个对象,这个对象就会有它自己本身的this来指向它本身,好了,这是我们应用中最简单的一种方式,相信大家对于这种方式都不会有疑惑.我们接着往下看,代码2:

function People (name,age,shoes){
this.name = name;
this.age = age;
this.shoes =shoes
this.run = function (){
console.log(this.name+"穿着"+this.shoes+"在跑步");
}
}

var xiaoMing=new People('xiaoming',13,'nike');
xiaoMing.run();//xiaoming穿着nike在跑步

 

那么这里呢,我们就可以看到,在类中的方法,调用到了类中的属性,是可以调用的,这个就像你要去跑步,而鞋子就是你自己的,那么你当然可以穿着你的nike鞋子去跑步了,好了,现在到了这里,我们应该都可以理解,这就是我们最基本的用法.我们接着往下看,代码3:

 var name = "小红";
var shoes= "adidas"
function People (name,age,shoes){
this.name = name;
this.age = age;
this.shoes =shoes
this.run = (function (){
return function(){
console.log(this.name+"穿着"+this.shoes+"在跑步");
} })();
}
var xiaoMing=new People('xiaoming',13,'nike');
xiaoMing.run();//1.html:241 xiaoming穿着nike在跑步
var other = xiaoMing.run;
other();//1.html:241 小红穿着adidas在跑步

好了从上边的代码中,我们可以明显的看到this在对象中的指向问题,要记住一点,this指向的是对象,是一个对象实体,是一个有意义的,它并不指向函数,例如代码3的第15行,run函数自调用返回的是一个闭包,有人可能会觉得第15行会返回小红,但因为第15行的调用者还是xiaoMing,所以它返回的是xiaoMing的方法,这就与第17行形成一个对比.

 function People (name,age,shoes){
this.name = name;
this.age = age;
this.shoes =shoes
this.run = (function (){
var timer= setInterval(function(){
console.log(this.name+"穿着"+this.shoes+"在跑步");
},30) })();
}
var xiaoMing=new People('xiaoming',13,'nike');
//这里会疯狂的输出小红.

这里就出来了我们要说明的第一个问题,当this在定时器当中时,this的指向为变为window,所以我们也可以这样理解,this的指向并不是定义的时候就确定的,而是在调用时确定的,这也就给我们带来了这么多的不确定性,对于this来说,我们最常用的方式,也是最容易出现指向错误的地方,应该就是匿名函数中:

 var name = "小红";
var shoes= "adidas"
function People (name,age,shoes){
this.name = name;
this.age = age;
this.shoes =shoes
this.run = (function (){
console.log(this.name+"穿着"+this.shoes+"在跑步"); })(); }
var xiaoMing=new People('xiaoming',13,'nike');
//输出小红

对于匿名函数,我么可以这样去理解,每一个函数在执行的i时候都会去寻找它的this调用者和arguments参数,而匿名函数的this是window,所以匿名函数的执行具有全局性,所以,我们在使用匿名函数时,一定要注意它的this指向问题,我们我们可以使用that捕获,call apply和bind等方式去改正this的指向问题,

 var name = "小红";
var shoes= "adidas"
function People (name,age,shoes){
this.name = name;
this.age = age;
this.shoes =shoes
this.run = (function (){
console.log(this.name+"穿着"+this.shoes+"在跑步"); })();
return {}; }
var xiaoMing=new People('xiaoming',13,'nike');
console.log(xiaoMing.name);//undefined

这里我们需要注意另外一个问题,就是当我们构造函数中有一个return返回值时,且这个返回值时一个对象的时候,那么this会指向这个返回的对象,而一般我们的构造函数都是没有返回值,这是我们另外要注意的一点.

好了,讲到这里,希望大家对于this的理解能够多一点点,在应用中我们多用下this,会加深我们对this的理解.有不足的地方还希望指正,谢谢!

javascript中的this指向问题的更多相关文章

  1. javascript中this的指向

    作为一个前端小白在开发中对于this的指向问题有时候总是会模糊,于是花时间研究了一番. 首先this是JS的关键字,this是js函数在运行是生成的一个内部对象,生成的这个this只能在函数内部使用. ...

  2. Javascript中的this指向。

    一.JavaScript中的函数 在了解this指向之前,要先弄明白函数执行时它的执行环境是如何创建的,这样可以更清楚的去理解JavaScript中的this指向. function fn(x,y,n ...

  3. JavaScript中 this 的指向

    很多人都会被JavaScript中this的指向(也就是函数在调用时的调用上下文)弄晕,这里做一下总结: 首先,顶层的this指向全局对象. 函数中的this按照调用方法的不同,其指向也不同: 1.函 ...

  4. 前端面试之JavaScript中this的指向【待完善!】

    JavaScript中this的指向问题! 另一个特殊的对象是 this,它在标准函数和箭头函数中有不同的行为. 在标准函数中, this 引用的是把函数当成方法调用的上下文对象,这时候通常称其为 t ...

  5. JavaScript中的this指向

    this是谁 技术一般水平有限,有什么错的地方,望大家指正. this代指当前对象super调用父类的构造函数,应表会运网数物,加载驱动建立链接执行SQL处理结果,直到现在每想起这三点就能想起我上大学 ...

  6. Javascript 中的this 指向的对象,你搞清楚了吗?

    Javascript 中的this 总让人感到困惑,你能分清以下三种test1(),test2(),test3() 情况下的输出吗? 注:以下Javascript运行环境中为浏览器 //1 this在 ...

  7. 谈谈 JavaScript 中的 this 指向问题

    JavaScript 中的 this 为一个重难点,它不像静态语言 C#.Java 一样,就表示当前对象.而在 JS 中, this 是运行时确定,而并非定义时就已确定其值. 谈起 this ,必须少 ...

  8. JavaScript中this的指向问题

    this是面向对象语言中一个重要的关键字,理解并掌握该关键字的使用对于我们代码的健壮性及优美性至关重要.而javascript的this又有区别于Java.C#等纯面向对象的语言,这使得this更加扑 ...

  9. 轻松几句搞定【Javascript中的this指向】问题

    this关键字在JavaScript中扮演了至关重要的角色,每次它的出现都伴随着它的指向问题,这也是很多初学者容易出错的地方. 不过,这篇文章将会带你一次性搞定this指向的问题,望能给大家提供帮助! ...

随机推荐

  1. iOS开发 贝塞尔曲线UIBezierPath

    最近项目中需要用到用贝塞尔曲线去绘制路径 ,然后往路径里面填充图片,找到这篇文章挺好,记录下来 自己学习! 转至 http://blog.csdn.net/guo_hongjun1611/articl ...

  2. iOS修改手机定位(非越狱任意位置)

    利用开发者的一些调试功能,我们可以修改非越狱的苹果手机定位,模拟任意位置. 经测试,此方法仅限开发者调试使用,并不能长时间修改手机定位. 1. 首先需要了解一些坐标系的知识 iOS,原生坐标系为 WG ...

  3. Django1.9开发博客(13)- redis缓存

    Redis 是一个高性能的key-value数据库.redis的出现, 很大程度补偿了memcached这类keyvalue存储的不足,在部分场合可以对关系数据库起到很好的补充作用. 它提供了Pyth ...

  4. label for

      一般我们在使用radio 时都是结合label来使用的 <label><input type=”radio” name=”radio” value=’0’/>男</l ...

  5. ios基础篇(十一)——UINavgationController的使用(二)页面切换

    上篇说到了添加UIBarButtonItem,接下来说说界面切换: 1.首先我们在刚才的RootViewController中添加一个按钮用来实现跳转: 打开RootViewController.m( ...

  6. jsoup 简介

    Java 程序在解析 HTML 文档时,相信大家都接触过 htmlparser 这个开源项目,我曾经在 IBM DW 上发表过两篇关于 htmlparser 的文章,分别是:从HTML中攫取你所需的信 ...

  7. HTTP Referer 防外链

    HTTP Referer是header的一部分,当浏览器向web服务器发送请求的时候,一般会带上Referer,告诉服务器我是从哪个页面链接过来的,服务器籍此可以获得一些信息用于处理. if (Req ...

  8. Android 命令管理项目

    今天介绍一下Android怎么用命令管理项目,用命令管理Android项目需要用到Android命令,首先介绍一下用Android命令创建新项目,打开命令提示窗口,导航到Android SDK 的to ...

  9. c#读取文本文档实践4-读入到list泛型集合计算后写入新文档

    商品 数量 单价英语 66 100语文 66 80数学 66 100化学 66 40物理 66 60 上面截图是要处理的文本文档内容,目的是计算出总价并加在最后一列. 这一篇与上一篇比较类似,目的相同 ...

  10. ubuntu 13.04 tftp服务器建立

    本文参考博文:http://blog.chinaunix.net/uid-20718037-id-3194493.html 用tftp下载就需要要我们的主机上先安装tftp服务器.    1.安装软件 ...