`
jonson
  • 浏览: 165102 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

js的this指针理解

    博客分类:
  • js
阅读更多

因为发现身边的一些朋友对js的this指针的理解不是很全面。下面本人简单的讲解一下js的this指针的相关内容,仅供需要的朋友学习参考。

简单的,我先用一句话来概括javascript的this。在js里面,this指针代表的是执行当前代码的对象的所有者。

下面举几个简单的例子加以说明:

var name="jonson";
function test(){alert("您好,我的名字叫"+this.name);}
test();

  这段代码很简单,我们定义了一个全局变量name,一个全局的function,最后调用了这个test方法。运行这段代码,会弹出"您好,我的名字叫jonson"。

这里的test方法以及name方法都属于js的最初始的对象window的。简单的说:下面调用test方法的对象就是window。

 

var obj={};
var name="jonson_window";
obj.name="jonson_obj";
obj.test=function (){alert("您好,我的名字是"+this.name)};
obj.test();

  运行这段代码,页面弹出"您好,我的名字是jonson_obj",而不是"您好,我的名字是jonson_wondow"。因为最后一句obj.test(),指的是obj对象调用test方法,所以这里的

this.name指的自然就是obj.name的值。

function test(){      
alert(this.title);
}
<input  type="button" value="test" onclick="test()" id="test" title="test">

  运行这段代码页面弹出undefined字样。有人会说,我的input标签里面明明有title属性的值为test的。但是这里为什么会弹出undefined字样呢。其实道理很简单,这里是通过onclick方法调用的。其实onclick="test()",相当于function onclick(evenet){test();},而function onclick其实也是一个全局的function,上面的 test方法也是全局的function,都可以视为window对象的两个属性。这里其实就是通过这个在onclick方法里面调用这个test方法,其实这里和第一种说法是一样的。

通过以上的几个例子,我相信大家都多少理解了js的this指代含义------this指针代表的是执行当前代码的对象的所有者。

我希望大家看完这个博客之后,可以自己去测试一下,加深对js的this指代的理解。

分享到:
评论
3 楼 shenya2 2015-12-09  
2 楼 cl1154781231 2014-10-21  
看明白了,不错的文章,我转咯,会注明出处。
1 楼 aykjy 2014-05-06  

谢谢讲解

相关推荐

    对JavaScript中this指针的新理解分享

    主要介绍了对JavaScript中this指针的新理解分享,本文讲解了方法调用模式、函数调用模式、构造函数调用模式、Apply调用模式中的this指针理解,需要的朋友可以参考下

    探寻JavaScript中this指针指向

    探寻JavaScript中this指针指向 首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为...

    Javascript this指针

    Javascript 可以通过一定的设计模式来实现面向对象的编程,其中this “指针”就是实现面向对象的一个很重要的特性。但是this也是Javascript中一个非常容易理解错,进而用错的特性。特别是对于接触静态语言比较久了的...

    改变javascript函数内部this指针指向的三种方法

    在查了大量的资料后,我总结了下面的三条规则,这三条规则,已经可以解决目前我所遇到的所有问题.... 这个规则很好理解: 代码如下: var a = function(obj) { alert&#40;this == obj&#41;; } var o = {}; o.

    深入理解javascript中的 “this”

    This指针作用域: 1)、在全局执行环境中使用this,表示Global对象,在浏览器中就是window对象。 2)、当在函数执行环境中使用this时,情况就有些复杂了。如果函数没有明显的作为非window对象的属性,而只是定义了...

    this的使用总结.zip

    此文件详细说明了javascript的this指向问题,分别从:this的默认绑定,隐式绑定,隐式丢失,显式绑定,new的绑定,严格模式下的this指向等六个方面剖析this的指向问题,每个方面都有测试代码,看文字不明白时,一...

    JS函数this的用法实例分析

    this究竟是什么,this是个关键字,是个指针,指向执行环境作用域,也称之为上下文。 先说下函数吧,个人理解是函数是在语言中重复调用的代码块. 在JS里,把函数赋值给对象的属性时,称之为方法 如: var m={}; m....

    learn-js:js内部基础原理,深刻理解js的运行机制

    -JavaScript- js内部基础原理,深刻理解js的运行机制 包括声明提前、this指针指向、运算符优先级、原型、继承、全局变量污染、对象属性及原型属性优先级等 Fullscreen() in test1.js 数据类型

    AJAX资料(基础或中级水平的请看,对高手的帮助不大)

    压缩包内文档名如下: Core JavaScript 1.5 Guide Javascript面向对象 JavaScript面向对象的支持 JavaScript中支持面向对象的基础 jQuery、JSON超强组合 JSONG Private Members in ...详解Javascript 中的this指针

    javascript中的链式调用

    没有返回值的方法属于赋值器方法,显然它很容易实现链式调用,前提是正确理解this指针的用法。 代码如下: function W(){ this.name=”Wang Hongjian”; this.gender=”male”; } W.prototype.sayHi=fu

    javascript中的原型链深入理解

    在javascript中,函数就有2个功能 第一、 作为一般函数调用 第二、 作为它原型对象的构造函数 也就new() 我们来看一个例子 代码如下: function a(){ this.name = ‘a’; } 当创建一个函数,它会发生什么呢? 第一、...

    LearningJS

    学习JS蓬松的鸟参照的Flappy Bird,大致的知识点类,DOM事件,计时器,画布几个知识点的加深理解 var that = this的作用(闭包,this指针)目前还有几个常量不是很理解,玩起来速度有点快JavaScript30第一天:...

    如何使用50行javaScript代码实现简单版的call,apply,bind

    所谓的this其实可以理解成一根指针: 其实 this 的指向,始终坚持一个原理:this 永远指向最后调用它的那个对象,这就是精髓。最关键所在 this的四种指向: 当this所在的函数被普通调用时,指向window,如果当前是...

    关于Javascript 的 prototype问题。

    prototype 1、 prototype是与Clone联系起来的, 也就是说,当创建实例时,...如何理解js this的动态联编,请参考我写的这篇文章:http://blog.never-online.net/article.asp?id=117 当创建该类实例时,实例具有

    详解js中的原型,原型对象,原型链

    理解原型 我们创建的每一个函数都有一个prototype(原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。看如下例子: function Person(){ } Person....

    JavaScript中神奇的call()方法

    先看看关于call()的官方解释,“调用一个对象的一个方法,以另一个对象替换当前对象。”,看了这样的解释,或许让你更摸不着头脑了。看例子: 复制代码 代码如下: var x = “我是全局变量”;...我的理解是,f.

    外文翻译 stus MVC

    This article introduces Struts, a Model-View-Controller implementation that uses servlets and JavaServer Pages (JSP) technology. Struts can help you control change in your Web project and promote ...

Global site tag (gtag.js) - Google Analytics