简述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. 【repost】JS中的异常处理方法分享

    我们在编写js过程中,难免会遇到一些代码错误问题,需要找出来,有些时候怕因为js问题导致用户体验差,这里给出一些解决方法 js容错语句,就是js出错也不提示错误(防止浏览器右下角有个黄色的三角符号,要 ...

  3. JS中给正则表达式加变量

    前不久同事询问我js里面怎么给正则中添加变量的问题,遂写篇博客记录下.   一.字面量 其实当我们定义一个字符串,一个数组,一个对象等等的时候,我们习惯用字面量来定义,例如: var s = &quo ...

  4. js中几种实用的跨域方法原理详解(转)

    今天研究js跨域问题的时候发现一篇好博,非常详细地讲解了js几种跨域方法的原理,特分享一下. 原博地址:http://www.cnblogs.com/2050/p/3191744.html 下面正文开 ...

  5. 关于js中的this

    关于js中的this this是javascript中一个很特别的关键字,也是一种很复杂的机制,学习this的第一步就是要明白this既不指向函数自身也不指向函数的词法作用域,this实际上是函数被调 ...

  6. 表值函数与JS中split()的联系

    在公司用云平台做开发就是麻烦 ,做了很多功能或者有些收获,都没办法写博客,结果回家了自己要把大脑里面记住的写出来. split()这个函数我们并不陌生,但是当前台有许多字段然后随意勾选后的这些参数传递 ...

  7. JS中 call() 与apply 方法

    1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...

  8. 在node.js中,使用基于ORM架构的Sequelize,操作mysql数据库之增删改查

    Sequelize是一个基于promise的关系型数据库ORM框架,这个库完全采用JavaScript开发并且能够用在Node.JS环境中,易于使用,支持多SQL方言(dialect),.它当前支持M ...

  9. 分析js中的constructor 和prototype

    在javascript的使用过程中,constructor 和prototype这两个概念是相当重要的,深入的理解这两个概念对理解js的一些核心概念非常的重要. 我们在定义函数的时候,函数定义的时候函 ...

  10. 如何在Node.js中合并两个复杂对象

    通常情况下,在Node.js中我们可以通过underscore的extend或者lodash的merge来合并两个对象,但是对于像下面这种复杂的对象,要如何来应对呢? 例如我有以下两个object: ...

随机推荐

  1. 80端口被system 占用

    1 运行'netstat -ano'发现80端口被pid=4的进程占用 2 打开任务管理器,发现pid=4的进程,其实是system进程,其对应的进程描述是NT kernel & system ...

  2. 1297. Palindrome ural1297(后缀数组)

    1297. Palindrome Time limit: 1.0 secondMemory limit: 64 MB The “U.S. Robots” HQ has just received a ...

  3. P3377

    题目描述 如题,一开始有N个小根堆,每个堆包含且仅包含一个数.接下来需要支持两种操作: 操作1: 1 x y 将第x个数和第y个数所在的小根堆合并(若第x或第y个数已经被删除或第x和第y个数在用一个堆 ...

  4. NOIP2017SummerTraining0717

    个人感受:自己水平是真的差劲,和他们不是一个档次的,第二题,如果不是陈载元暴力过了,我也不会那么早去A了第二题,第一题真的是无语,以前做到过,还想到了每个对应值a[i]-i,但是没想出来,真的是 可惜 ...

  5. 记一次Java的内存泄露分析

    当前环境 jdk == 1.8 httpasyncclient == 4.1.3 代码地址 git 地址:https://github.com/jasonGeng88/java-network-pro ...

  6. Online Bayesian Probit Regression介绍之Factor Graph

    下面就开始讲讲概率图中的Factor Graph.概率图博大精深,非我等鼠辈能够完全掌握,我只是通过研究一些通用的模型,对概率图了解了一点皮毛.其实我只是从概率这头神兽身上盲人摸象地抓掉几根毛,我打算 ...

  7. python---random模块使用详解

    random与随机操作有关的模块 常用方法: random() --- 返回0-1之见得一个随机浮点数. 调用:random.random() 例如: >>> random.rand ...

  8. 使用wsimport和JAX-WS调用Web Service接口

    本文简单举例说明如何使用wsimport工具和JAX-WS API调用Web Service接口.此方法的优点:使用JDK自带的工具和API接口,无需依赖第三方库. JDK版本:1.8.0_141开发 ...

  9. Linux-jdk1.7-tomcat7 简易安装

    一.jdk 安装 安装包:jdk-7u80-linux-x64.tar.gz 2 解压 [root@localhost package]# tar -zxvf jdk-7u80-linux-x64.t ...

  10. 使用微软URLRewriter.dll的url实现任意后缀名重写

    <?xml version="1.0"?> <!--先引用URLRewriter.dll,放置于Bin目录--> <configuration> ...