简述this的用法
　　“this是由被调用的方式确定”这个事实，使得this可以被改变，从而为函数增加了动态性，可变性，使得变成更加灵活。目前因为工作经验有限，暂时总结
一下五种情况下的this的用法，以后有时间应该从ECMA规范上来深入地理解一下this的应用。
1.情况一：以函数的形式调用，this是window
         console.log(this);//window

         function fu(){

             console.log(this);

         }

         fu();//window
2.情况二：以方法的形式调用，this是调用方法的对象
     　　var obj ={name:'this'};

         function foo(){

             console.log(this);

         }

         obj.foo=foo;

         obj.foo();//输出obj   { name: 'this', foo: [Function: foo] }
3.情况三 ： 以构造函数的形式调用
         function D() {

             this.name ='test';

             this.age =18;

             console.log(this);

         }

         var d = new D();//输出d对象

         d.name ='hewenfeng';

         D();//window

         console.log(d);//输出d对象
4.情况四： 在全局作用域中调用
      console.log(this);//window 
5. 情况五：在响应函数中，给谁绑定事件，this就是谁。
 <!DOCTYPE HTML>

 <html >

 <head>

     <meta charset="UTF-8">

 </head>

 <body>

 <div id="b" onclick="console.log(this)">

 <div>

 </body>

 </html>

 输出：div元素本身

 <!DOCTYPE HTML>

 <html >

 <head>

     <meta charset="UTF-8">

 </head>

 <body>

 <div id="b" onclick="console.log(this)">

 <div> 

 <script type="text/javascript">

 var c=document.getElementById("b");

 c.onclick=function(){console.log(1)}

 </script>

 </body>

 </html>

 输出：1

 onclick的绑定方式会覆盖内联式的事件绑定。也可以在c.onclick里输出this，可知道this代表div元素本身。

 <!DOCTYPE HTML>

 <html >

 <head>

     <meta charset="UTF-8">

 </head>

 <body>

 <div id="b" onclick="console.log(this)">

 <div> 

 <script type="text/javascript">

 var c=document.getElementById("b");

 c.onclick=function(){console.log(1)}

 c.addEventListener("click",function(){alert('2')},false)

 </script>

 </body>

 </html>

 输出：1,弹出
　　addEventListener不会覆盖c.onclick绑定的函数，（自然也不会覆盖内联的onclick，addEventListener就是以叠加的方式绑定事件处理函数的，
就像用addEventListener也可以绑定几个事件处理函数一样）也可以在addEventListener的事件处理函数里输出this，可知道this代表div元素本身。
												


											
JS中的this的应用总结的更多相关文章
	

    
						
  1. 5.0 JS中引用类型介绍
		
    其实,在前面的"js的六大数据类型"文章中稍微说了一下引用类型.前面我们说到js中有六大数据类型(五种基本数据类型 + 一种引用类型).下面的章节中,我们将详细讲解引用类型. 1. ...
    
		
    2. 
						
  2. 【repost】JS中的异常处理方法分享
		
    我们在编写js过程中,难免会遇到一些代码错误问题,需要找出来,有些时候怕因为js问题导致用户体验差,这里给出一些解决方法 js容错语句,就是js出错也不提示错误(防止浏览器右下角有个黄色的三角符号,要 ...
    
		
    3. 
						
  3. JS中给正则表达式加变量
		
    前不久同事询问我js里面怎么给正则中添加变量的问题,遂写篇博客记录下.   一.字面量 其实当我们定义一个字符串,一个数组,一个对象等等的时候,我们习惯用字面量来定义,例如: var s = &quo ...
    
		
    4. 
						
  4. js中几种实用的跨域方法原理详解（转）
		
    今天研究js跨域问题的时候发现一篇好博,非常详细地讲解了js几种跨域方法的原理,特分享一下. 原博地址:http://www.cnblogs.com/2050/p/3191744.html 下面正文开 ...
    
		
    5. 
						
  5. 关于js中的this
		
    关于js中的this this是javascript中一个很特别的关键字,也是一种很复杂的机制,学习this的第一步就是要明白this既不指向函数自身也不指向函数的词法作用域,this实际上是函数被调 ...
    
		
    6. 
						
  6. 表值函数与JS中split()的联系
		
    在公司用云平台做开发就是麻烦 ,做了很多功能或者有些收获,都没办法写博客,结果回家了自己要把大脑里面记住的写出来. split()这个函数我们并不陌生,但是当前台有许多字段然后随意勾选后的这些参数传递 ...
    
		
    7. 
						
  7. JS中 call() 与apply 方法
		
    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...
    
		
    8. 
						
  8. 在node.js中，使用基于ORM架构的Sequelize，操作mysql数据库之增删改查
		
    Sequelize是一个基于promise的关系型数据库ORM框架,这个库完全采用JavaScript开发并且能够用在Node.JS环境中,易于使用,支持多SQL方言(dialect),.它当前支持M ...
    
		
    9. 
						
  9. 分析js中的constructor 和prototype
		
    在javascript的使用过程中,constructor 和prototype这两个概念是相当重要的,深入的理解这两个概念对理解js的一些核心概念非常的重要. 我们在定义函数的时候,函数定义的时候函 ...
    
		
    10. 
						
  10. 如何在Node.js中合并两个复杂对象
		
    通常情况下,在Node.js中我们可以通过underscore的extend或者lodash的merge来合并两个对象,但是对于像下面这种复杂的对象,要如何来应对呢? 例如我有以下两个object:  ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. Jmeter脚本录制方法（一）——分别使用Badboy录制和Jmeter自带的代理服务器录制
			
    Jmeter录制方式分三种,分别是:使用Badboy录制.Jmeter自带的代理服务器录制和手工录制,今天先介绍前两种录制方法. Badboy录制 Badboy是用C++开发的动态应用测试工具, 其拥 ...
    
			
    2. 
						
  2. 醒醒吧！互联网的真正未来不是AI，更不是VR,AR，而是区块链
			
    这些力量并非命运,而是轨迹.他们提供的并不是我们将去向何方的预测,而是告诉我们,在不远的将来,我们会向那个方向前行,必然而然. ---凯文•凯利 文字与货币 人类在演化过程中,凭借智慧创造了无数事物, ...
    
			
    3. 
						
  3. (原)怎样解决python dataframe loc，iloc循环处理速度很慢的问题
			
    怎样解决python dataframe loc,iloc循环处理速度很慢的问题 1.问题说明 最近用DataFrame做大数据 处理,发现处理速度特别慢,追究原因,发现是循环处理时,loc,iloc ...
    
			
    4. 
						
  4. Python系列之内置函数
			
    内置函数 一.数学运算类: abs(a):求绝对值如果参数是个复数则返回复数的模. a = abs(-1) print(a) >>>1 compilex([real[, imag]] ...
    
			
    5. 
						
  5. WPF DataGrid自动生成行号
			
      在使用WPF进行应用程序的开发时,经常会为DataGrid生成行号,这里主要介绍一下生成行号的方法.通常有三种方法,这里主要介绍其中的两种,另一种简单提一下. 1. 直接在LoadingRow事件 ...
    
			
    6. 
						
  6. java优雅的使用elasticsearch api
			
    本文给出一种优雅的拼装elasticsearch查询的方式,可能会使得使用elasticsearch的方式变得优雅起来,使得代码结构很清晰易读. 建立elasticsearch连接部分请参看另一篇博客 ...
    
			
    7. 
						
  7. java使用spark/spark-sql处理schema数据(spark1.6)
			
    1.spark是什么? Spark是基于内存计算的大数据并行计算框架. 1.1 Spark基于内存计算 相比于MapReduce基于IO计算,提高了在大数据环境下数据处理的实时性. 1.2 高容错性和 ...
    
			
    8. 
						
  8. gitlab服务器搭建教程
			
    gitlab服务器搭建教程 ----2016年终总结 三 参考https://bbs.gitlab.cc/topic/35/gitlab-ce-8-7-%E6%BA%90%E7%A0%81%E5%AE ...
    
			
    9. 
						
  9. [置顶]
        一个demo学会c#
			
    学习了c#4.5高级编程这本书,自己喜欢边学边总结边写demo,所以写了这篇文章,包含了大部分的c#编程知识.让你一个demo掌握c#编程,如果有问题可以留言. 此demo主要包括五个文件:Stude ...
    
			
    10. 
						
  10. C GOTO使用示例
			
    GOTO虽然会破坏程序的结构,使用代码可读性变差,但是GOTO依然还是有可用的地方 #include <stdio.h>#include <stdbool.h> int mai ...
    
			
    11.