JavaScript中的this到底是什么(一)

对于常年使用C++,C#,Java等这些面向对象语言的程序员来说，几乎天天都和this打交道。在这些语言里，this含义非常明确，就是指向当前的对象实例，我们用起来也是相当的放心。然而，到了JavaScript这个动态语言里，this的写法没变，但是其含义却大大地不同了，下面用实例说明，使用浏览器为Firefox14.0.1.

首先，Hello World o(^▽^)o

本人从刚开始自学javascript这门灵活的编程语言到现在，也有一年多的时间了。

在这一年多的时间里，这门语言所带给我的不仅是高额的工作回报，还有很多意想不到的惊喜，让我这样一个艺术生领略编程的魅力。

从今天开始，准备每周一更我的博客，不止是分享，更是勉励自己。

OK，我们进入今天的主题，今天我们来谈谈javascript里面一个比较特殊的对象：this

接触过其他面向对象的编程语言（如：java，C，C++等）的小伙伴们可能对this非常熟悉。

不过它在javascript当中为什么会经常性的给我们造成很多麻烦呢？

我们先来说说他与其他编程语言的不同

在javascript里面，this是一个特殊的对象，它不像其他编程语言那样，是存储在实例中的值，直接指向此实例。

而是作为一个单独的指针，在不同的情况之下，指向不同的位置，这也是为什么我们会将它搞混的原因。

下面我们来看下，它在不同情况下分别是怎样一种形态

 1.在全局作用域时：

这个是最好理解的，即在全局作用域下this指向window，也就是在全局作用域下，this与window是等价的：

console.log(this === window); //true

另外，由于在此时，this等价于window，所以我们在全局作用域声明的变量也会指向this：

var x = 1;
console.log(this.x);//1
console.log(window.x);//1

当然，我们还有另一种声明变量的方法：

x = 0;
function setNum(){
x = 1;
};
console.log(this.x);//0
setNum();
console.log(this.x);//1

当声明变量时不使用 var 或者 let的话 此时相当于给全局的this添加或者改变属性值

看起来还是很简单的，不就是个等价于window的对象么。

当然，如果仅仅是这样，this或许根本就没有存在的必要了。

而this最让人头疼的部分就是它在不同的作用域下，它的形态也是截然不同的

 2.当在函数中时：

到这里时，this的陷阱已经渐渐显露出来了

这里为什么说是当在函数中而不是局部作用域时，要讲这个，首先我们要清楚function是什么

在javascript中，function作为js中的一个特殊对象：函数，是有着不同的形态的

我们通常看到的：

function set(){
  var x = 0;
};

在这一形态下，其内部的this是与全局作用域时一样，直接指向window，所以其形态 依然等价于window。

var x = 0;
function num(){
  this.x = 1;
}
console.log(this.x);//0
num();
console.log(this.x);//1

这里就是经常容易犯得错误，很多人觉得，当this已经在一个function之中时，其目前所处位置为当前的局部作用域，所以目前指向的应该是此函数

但是，如果你将这个函数实例化（new）之后，此函数将生成一个全新的环境，此时在此实例中的this也会随之发生变化，它将指向所在实例。

num = "0";
function setThis(){
  this.num = "1";
}
console.log(this.num);//"0"
new setThis();
console.log(this.num);//"0"
console.log(new setThis().num);//1

这是因为，当实例化之后，此函数变成了一个实例对象，而其内部的this也自然而然的指向了此实例对象，如同一开始的this是指向window的对象一样指向了它所在的实例

另外，在我们写javascript的时候，我们通常还会有一种调用函数的方法，即为元素绑定事件，比如button.addEventListener(‘click', fn, false)等，如果在fn里面需要使用到this的话，那么此时this指向事件处理元素，也就是button

注意：this作为关键字，你是无法复写它的。

不知不觉，写的也好多了，其实this还有更多的形态，比如prototype，比如在html中，比如在dom事件处理程序里，由于篇幅过长，这里就不再继续进行敖述，下回我会讲到在prototype中的this

this在我的理解中作为一个指针，相应的它在prototype原型链中会有更重要的地位，不过不在我们今天的范围之内，暂不做过多的解释

以后基本会每周一更吧，作为javascript的新手，也希望写的东西可以跟更多人分享，更希望从大家的思想中总结更多的经验！

关于JavaScript中的this到底是什么(一)，每周一都会给大家更新的，作为javascript的新手，希望写的东西可以和身边的朋友分享，更希望互相交流学习经验。谢谢！

赞 (0)

相关推荐

  • JS中的this变量的使用介绍

    JavaScript中this的使用 在JavaScript中this变量是一个令人难以摸清的关键字,this可谓是非常强大,充分了解this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余. 对于this变量最要的是能够理清this所引用的对象到底是哪一个,也许很多资料上都有自己的解释,但有些概念讲的偏繁杂.而我的理解是:首先分析this所在的函数是当做哪个对象的方法调用的,则该对象就是this所引用的对象. 示例一. 复制代码 代码如下: var obj = {};

  • javascript中的self和this用法小结

    一. 起因 那天用到prototype.js于是打开看看,才看几行就满头雾水,原因是对js的面向对象不是很熟悉,于是百度+google了一把,最后终于算小有收获,写此纪念一下^_^. prototype.js代码片段 代码如下:var Class = {     create: function() {         return function() {             this.initialize.apply(this , arguments);         }     }

  • js中的this关键字详解

    this是Javascript语言的一个关键字. 它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.比如, 复制代码 代码如下: function test(){ this.x = 1; } 随着函数使用场合的不同,this的值会发生变化.但是有一个总的原则,那就是this指的是,调用函数的那个对象. 下面分四种情况,详细讨论this的用法. 情况一:纯粹的函数调用 这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global. 请看下面这段代码,它的运行结果是1.

  • Javascript this关键字使用分析

    关于js中的this关键字的文章已经不少了,我看过几篇,我写这篇文章的目的是从实例中分析出this的工作原理,希望对大家有所帮助. 一.基本的: 复制代码 代码如下: function doSomething(){ alert(this.id); } alert(window.doSomething);//证明了doSomething是属于window的 doSomething();//undefined window.onload = function(){ document.getEleme

  • Javascript this指针

    Javascript this指针

    前言 Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript 可以通过一定的设计模式来实现面向对象的编程,其中this "指针"就是实现面向对象的一个很重要的特性.但是this也是Javascript中一个非常容易理解错,进而用错的特性.特别是对于接触静态语言比较久了的同志来说更是如此. 示例说明 我们先来看一个最简单的示例: <script type="text/javascript&

  • javascript中onclick(this)用法介绍

    this指触发事件的对象 复制代码 代码如下: <input id="myinput" type="text" value="javascript中onclick中的this" onclick="javascript:test(this);"/> 复制代码 代码如下: function test(obj){ alert(obj); //[object HTMLInputElement] alert(obj.id);

  • 深入理解Javascript中this的作用域

    大家在使用Javascript的时候经常被this这个家伙搞得晕头转向的.对大多数有OOP开发经验的开发人员来说this是当前作用域中引用普通元素的标识符,但是在Javascript中它却显得古灵精怪的,因为它不是固定不变的,而是随着它的执行环境的改变而改变.在Javascript中this总是指向调用它所在方法的对象. 举一个简单的例子: 复制代码 代码如下: function test(){ alert(this); } var obj=function(){ var name='testO

  • 有关js的变量作用域和this指针的讨论

    一.变量作用域:[P71] 这一句话说的非常精辟:"在ECMAScript中,只有两种执行环境,全局环境和函数环境,每个函数都是一个执行环境,包括嵌套函数.换句话说,其他情况下即使变量声明在一对大括号中,在括号外部仍然可以访问这些变量".以下给出例子: 复制代码 代码如下: for(var i=0; i<5; i++) { var num = 20; // 在for语句中声明的变量 } alert(num); // 在for语句外部调用变量,仍然可以得到num的值 对异常语句也同

  • javascript this用法小结

    javascript this用法小结

    this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascript中,由于 javascript的动态性(解释执行,当然也有简单的预编译过程),this的指向在运行时才确定.这个特性在给我们带来迷惑的同时也带来了编程上的 自由和灵活,结合apply(call)方法,可以使JS变得异常强大.2.变化的this 在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是指向该函数所属的对象(运行时).当我们在页面中定义

  • js this函数调用无需再次抓获id，name或标签名

    this就是你当前要执行的js所抓获的节点,这样在js里就可以不用document.getElement之类的写法来抓获id,name或标签名,省去一些麻烦.一般用obj来代替. 复制代码 代码如下: <input type="button" id="tianjia" value="保 存" class="btn1" onClick="nullCheck(this)"/> <script&

  • js报错 Object doesn't support this property or method的原因分析

    js报错: Object doesn't support this property or method 问题原因: 1:js代码用了javascript关键字 2:方法名和表单或者div form名冲突 3.button中有name＝"submit" 4.上传图片时提示:Object doesn't support this property or method 原因:服务器上安装的AspJpeg的版本低于1.4版. 解决方法:安装1.4或以上版本的AspJpeg组件. 我也遇到这个

  • JavaScript中几个重要的属性(this、constructor、prototype)介绍

    this this表示当前对象,如果在全局作用范围内使用this,则指代当前页面对象window: 如果在函数中使用this,则this指代什么是根据运行时此函数在什么对象上被调用. 我们还可以使用apply和call两个全局方法来改变函数中this的具体指向. 先看一个在全局作用范围内使用this的例子: 复制代码 代码如下: <script type=> console.log( === window); console.log(window.alert === .alert); cons

  • JAVASCRIPT THIS详解 面向对象

    虽然在开始学习的时候觉得比较难,但只要理解了,用起来是非常方便和意义确定的.JavaScript也提供了这个this关键字,不过用起来就比经典OO语言中要"混乱"的多了.下面就来看看,在JavaScript中各种this的使用方法有什么混乱之处? 1.在HTML元素事件属性中inline方式使用this关键字: <div onclick=" // 可以在里面使用this ">division element</div> 我们一般比较常用的方法

随机推荐