【转】javascript运行机制之this详解

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

this使用到的情况：

1. 纯函数

2. 对象方法调用

3. 使用new调用构造函数

4. 内部函数

5. 使用call / apply

6.事件绑定

---------------------------------------------------------------

1. 纯函数

 var name = 'this is window';  //定义window的name属性

 function getName(){

     console.log(this);    //控制台输出: Window  //this指向的是全局对象--window对象

     console.log(this.name);  //控制台输出: this is window  /

 }

 getName();

运行结果分析：纯函数中的this均指向了全局对象，即window。

2. 对象方法调用

 var name = 'this is window';  //定义window的name属性,看this.name是否会调用到

 var testObj = {

     name:'this is testObj',

     getName:function(){

         console.log(this);  //控制台输出:testObj   //this指向的是testObj对象

         console.log(this.name);  //控制台输出: this is testObj

     }

 }

 testObj.getName();

运行结果分析：被调用方法中this均指向了调用该方法的对象。

3. 使用new调用构造函数

 function getObj(){

     console.log(this);    //控制台输出: getObj{}  //this指向的新创建的getObj对象

 }

 new getObj();

运行结果分析：new 构造函数中的this指向新生成的对象。

4. 内部函数

 var name = "this is window";  //定义window的name属性,看this.name是否会调用到

 var testObj = {

     name : "this is testObj",

     getName:function(){

         //var self = this;   //临时保存this对象

         var handle = function(){

             console.log(this);   //控制台输出: Window  //this指向的是全局对象--window对象

             console.log(this.name);  //控制台输出: this is window

             //console.log(self);  //这样可以获取到的this即指向testObj对象

         }

         handle();

     }

 }

 testObj.getName();

运行结果分析：内部函数中的this仍然指向的是全局对象，即window。这里普遍被认为是JavaScript语言的设计错误，因为没有人想让内部函数中的this指向全局对象。一般的处理方式是将this作为变量保存下来，一般约定为that或者self，如上述代码所示。

5. 使用call / apply

 var name = 'this is window';  //定义window的name属性,看this.name是否会调用到

 var testObj1 = {

     name : 'this is testObj1',

     getName:function(){

         console.log(this);   //控制台输出: testObj2  //this指向的是testObj2对象

         console.log(this.name);  //控制台输出: this is testObj2

     }

 }

 var testObj2 = {

     name: 'this is testObj2'

 }

 testObj1.getName.apply(testObj2);

 testObj1.getName.call(testObj2);

Note：apply和call类似，只是两者的第2个参数不同：
[1] call( thisArg [，arg1，arg2，… ] ); // 第2个参数使用参数列表：arg1，arg2，...
[2] apply(thisArg [，argArray] ); //第2个参数使用参数数组：argArray
运行结果分析：使用call / apply 的函数里面的this指向绑定的对象。

6. 事件绑定
事件方法中的this应该是最容易让人产生疑惑的地方，大部分的出错都源于此。

 //页面Element上进行绑定

   <script type="text/javascript">

      function btClick(){

 <span style="white-space:pre">        </span>console.log(this);  //控制台输出: Window  //this指向的是全局对象--window对象

 <span style="white-space:pre">    </span> }

   </script>

   <body>

     <button id="btn" onclick="btClick();" >点击</button>

   </body>

 //js中绑定方式（1）

   <body>

     <button id="btn">点击</button>

   </body>

   <script type="text/javascript">

      function btClick(){

         console.log(this);  //控制台输出:<button id="btn">点击</button>  //this指向的是Element按钮对象

      }

      document.getElementById("btn").onclick = btClick;

      document.getElementById("btn").onclick;

   </script>

 //js中绑定方式（2）

  <body>

     <button id="btn">点击</button>

   </body>

   <script type="text/javascript">

      document.getElementById("btn").onclick = function(){

          console.log(this);  //控制台输出:<button id="btn">点击</button>  //this指向的是Element按钮对象

      }

      document.getElementById("btn").onclick;

   </script>

 //js中绑定方式（3）

  <body>

     <button id="btn">点击</button>

   </body>

   <script type="text/javascript">

      function btClick(){

         console.log(this);

      }

      document.getElementById("btn").addEventListener('click',btClick); //控制台输出:<button id="btn">点击</button>  //this指向的是Element按钮对象把函数(方法)用在事件处理的时候。

      document.getElementById("btn").attachEvent('onclick',btClick);  //IE使用,<span style="font-family: Arial, Helvetica, sans-serif;">控制台输出: Window  //this指向的是全局对象--window对象</span>

   </script>

运行结果分析：以上2种常用事件绑定方法，在页面Element上的进行事件绑定（onclick="btClick();"），this指向的是全局对象；而在js中进行绑定，除了attachEvent绑定的事件方法外，this指向的是绑定事件的Elment元素。

【转】javascript运行机制之this详解的更多相关文章

javascript解析机制、闭包详解
js解析机制: js代码解析之前会创建一个如下的词法环境对象(仓库):LexicalEnvironment{ } 在扫描js代码时会把: 1.用声明的方式创建的函数的名字: 2.用var定义的变量的名 ...
JavaScript运行机制详解
JavaScript运行机制详解 var test = function(){ alert("test"); } var test2 = function(){ alert(& ...
从setTimeout谈JavaScript运行机制
从setTimeout说起众所周知,JavaScript是单线程的编程,什么是单线程,就是说同一时间JavaScript只能执行一段代码,如果这段代码要执行很长时间,那么之后的代码只能尽情地等待它执 ...
深入浅出JavaScript运行机制
一.引子本文介绍JavaScript运行机制,这一部分比较抽象,我们先从一道面试题入手: console.log(1); setTimeout(function(){ console.log(3); ...
JavaScript运行机制与setTimeout
前段时间,老板交给了我一个任务:通过setTimeout来延后网站某些复杂资源的请求.正好借此机会,将JavaScript运行机制和setTimeout重新认真思考一遍,并将我对它们的理解整理如下. ...
Javascript 调试利器 Firebug使用详解
Javascript 调试利器 Firebug使用详解有时候,为了更清楚方便的查看输出信息,我们可能需要将一些调试信息进行分组输出,那么可以使用console.group来对信息进行分组,在组信息输 ...
javascript中的this作用域详解
javascript中的this作用域详解 Javascript中this的指向一直是困扰我很久的问题,在使用中出错的机率也非常大.在面向对象语言中,它代表了当前对象的一个引用,而在js中却经常让我觉 ...
大数据学习笔记——Spark工作机制以及API详解
Spark工作机制以及API详解本篇文章将会承接上篇关于如何部署Spark分布式集群的博客,会先对RDD编程中常见的API进行一个整理,接着再结合源代码以及注释详细地解读spark的作业提交流程,调 ...
深入理解JavaScript运行机制
深入理解JavaScript运行机制前言本文是写作在给团队新人培训之际,所以其实本文的受众是对JavaScript的运行机制不了解或了解起来有困难的小伙伴.也就是说,其实真正的原理和本文阐述的并不 ...

随机推荐

win10使用Composer-Setup安装Composer以及使用Composer安装Yii2最新版
1:下载 ca-bundle.crt和cacert.pem 将这两个文件放在php目录下 2:php.ini中添加上述两个文件的路径 curl.cainfo=C:/xampp/php/ca-bundl ...
JS-怎么得到局部域中的数据
1,使用全局变量 var str = '';function fn1(){ var a = '大鸡腿~'; str = a;} 2,使用一个局部函数 function fn2(){ ...
在NopCommerce中启用MiniProfiler
MVC MiniProfiler是Stack Overflow团队设计的一款对ASP.NET MVC.WebForm 以及WCF 的性能分析的小程序.可以对一个页面本身,及该页面通过直接引用.Ajax ...
linux下如何查找需要的文件后并删除
1.首先查找指定目录下的文件,默认为当前目录使用命令:find . -name 'a.txt' 会得到当前目录下所有包括子孙目录下的所有后缀为txt的文件 2.查找后删除使用命令:find . - ...
opengles tutorial
https://developer.apple.com/library/ios/documentation/3DDrawing/Conceptual/OpenGLES_ProgrammingGuide ...
【Visual Lisp】变体与安全数组
(vlax-make-variant) ;;创建一个未初始化的变体 ;;01.整型值变体(setq myvar (vlax-make-variant 10)) ;;创建整型值变体,返回 #<va ...
C2第四次作业解题报告
看过题解后如果觉得还算有用,请帮忙加点我所在团队博客访问量 http://www.cnblogs.com/newbe/ http://www.cnblogs.com/newbe/p/4069834.h ...
pgsql 常用的命令
pgsql 常用的命令:1. 创建数据库create database name with owner username; 2. 创建用户create role with createdb ;crea ...
CPU相关知识---物理CPU数、物理核数、逻辑核数、逻辑CPU数？
一.物理CPU数.物理核数.逻辑核数.逻辑CPU数相互关系??? 物理CPU数 ---> 每个物理CPU对应物理核数 ---> (每个物理核数对应逻辑核数)物理CPU对应逻辑核数 --- ...
starUML使用教程
starUML使用教程下载与安装先从官网下载软件,这个版本是收费的,但可以先进行试用.也可以使用免费版,基本UML依然齐全,但用起来感觉没有收费版好用. 下载之后按照安装说明,一步步安装就可以了. ...

【转】javascript运行机制之this详解

【转】javascript运行机制之this详解的更多相关文章

随机推荐

热门专题