<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.father {
width: 100px;
height: 100px;
background-color: red;
}
.child {
width: 20px;
height: 20px;
background-color: yellow
}
</style>
</head>
<body>
<div class="father">
<div class="child"></div>
</div>
<script src="jquery-1.11.2.min.js"></script>
<script>
//on方法会向事件监听的处理函数传递一个参数 event.target 处理函数内部的this指向
// event.target 所以打印出来的this就是event.target 即<div class="child"></div>
// $('.child').on('click',function(){
// console.log(this); //<div class="child"></div>
// })
//事件委托，首先按字面的意思就能看你出来，是将事件交由别人来执行，
// 再联想到上面讲的事件冒泡，是不是想到了？对，
// 就是将子元素的事件通过冒泡的形式交由父元素来执行。
// 事件委托不仅实现相同了功能，而且大大减少了DOM操作。
//监听.father下的.child的点击事件
// $('.father').on('click','.child',function(){
// console.log(this); //<div class="child"></div>
// })
 
// $('.child')[0].on('click',function(){
// console.log(this);//<div class="child"></div>
// })
var app={
init:function(){//init()里面的this指的是app
this.$father=$('.father');//给app这个对象绑定一个属性$father
this.$child=$('.child');//给app这个对象绑定一个属性$child
this.bind();//app.bind()
},
bind:function(){
var _this=this;//this指的是app
//监听.father点击事件 监听到click时 向this.sayHi传递了event.target
//即.father的dom对象<div class="father"><div class="child"></div></div>
this.$father.on('click',this.sayHi);
// 将_this.sayHello()改写为_this.sayHello.call(_this)
// sayHello在执行的时候 内部的this指向的app对象本身
this.$child.on('click',function(){
_this.sayHello();
})
//如果没有bind(this),this.sayBye会接受到传递的event.target即.child的dom对象
// 但此时手动绑定了this 而绑定的this与拒收的this是一致的 指代的是app对象
this.$child.on('click',this.sayBye.bind(this))
},
sayHi:function(){
console.log('sayHi',this)//<div class="father"><div class="child"></div></div>
},
sayHello:function(){
console.log('sayHello',this)//app
},
sayBye:function(){
console.log('sayBye',this)//app
}
}
app.init();
</script>
</body>
</html>

JavaScript中this的一些练习的更多相关文章

  1. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  2. javascript中的this与函数讲解

    前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大家可以认为全局作用域其实就是Window函数的函数作用域,我们编写的js代码, ...

  3. JavaScript 中的数据类型

    Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...

  4. javascript中的操作符详解1

    好久没有写点什么了,根据博主的技术,仍然写一点javascript新手入门文章,接下来我们一起来探讨javascript的操作符. 一.前言 javascript中有许多操作符,但是许多初学者并不理解 ...

  5. 掌握javascript中的最基础数据结构-----数组

    这是一篇<数据结构与算法javascript描述>的读书笔记.主要梳理了关于数组的知识.部分内容及源码来自原作. 书中第一章介绍了如何配置javascript运行环境:javascript ...

  6. javascript中变量提升的理解

    网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...

  7. 前端开发：面向对象与javascript中的面向对象实现（二）构造函数与原型

    前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...

  8. 简单分析JavaScript中的面向对象

    初学JavaScript的时候有人会认为JavaScript不是一门面向对象的语言,因为JS是没有类的概念的,但是这并不代表JavaScript没有对象的存在,而且JavaScript也提供了其它的方 ...

  9. Javascript中的valueOf与toString

    基本上,javascript中所有数据类型都拥有valueOf和toString这两个方法,null除外.它们俩解决javascript值运算与显示的问题,本文将详细介绍,有需要的朋友可以参考下. t ...

  10. 关于javascript中的this关键字

    this是非常强大的一个关键字,但是如果你不了解它,可能很难正确的使用它. 下面我解释一下如果在事件处理中使用this. 首先我们讨论一下下面这个函数中的this关联到什么. function doS ...

随机推荐

  1. Win7 MongoDB可视化工具Robo 3T 1.2.1(robomongo)的安装使用

    软件版本: Robo 3T 1.2.1 下载网址: https://robomongo.org/campaign 进入robomongo官网,点击download,进入下载页面 这里选择下载 Robo ...

  2. AQtime使用

    今天刚到网上下了AQtime.因为有个通信及数据存储的程序出现的内存泄漏.在用户的环境里出现了两次,在测试的环境里一次也没有出现,开发人员猜测是一部分代码引起的.说要代码的覆盖测试.看看测试环境里有那 ...

  3. PC端QQ协议说明，完美搞定QQ智能助手

    一. 实验目的: 在虚拟机下NAT模式下通过Wireshark抓包,分析QQ的传输模式.了解QQ在传输信息过程中用到的协议.分析在Nat模式下,信息传输的穿透性. 二. 实验环境: Win7 专业版3 ...

  4. sql server查询在线用户

    select request_session_id spid, object_name(resource_associated_entity_id) tableName from sys.dm_tra ...

  5. XML 总结

    XML 可用于交换.共享和存储数据. XML 文档形成 树状结构,在"根"和"叶子"的分支机构开始的. XML 有非常简单的 语法规则.带有正确语法的 XML ...

  6. jenkins 构建时显示git分支插件、显示构建分支插件

    参数化构建分支 1.安装插件:Git Parameter 2.找到我们在Jenkins中建立的工程,勾选“参数化构建过程”,并如下配置 3.在“源码管理”中如下配置 Jenkins构建完显示构建用户和 ...

  7. Python面向对象的三大特性之异常处理

    一.错误与异常 程序中难免会出现错误,而错误分为两种 1.语法错误:(这种错误,根本过不了python解释器的语法检测,必须在程序执行前就改正) 2.逻辑错误:(逻辑错误),比如用户输入的不合适等一系 ...

  8. C++中的字符数组、字符指、字符串针（腾讯）

    一.字符数组 1.定义时进行初始化的方式 (1)char c[12]={'I',' ','a','m',' ','h','a','p','p','y'};//最后两个元素自动补‘\0’(不是空格),其 ...

  9. Raspberry Pi3驱动Oled ssh1106屏

    Raspberry Pi3可以直接使用GPIO接口驱动OLED屏 一.接线 根据网上随便找的图可以看到树莓派3的GPIO接口引脚顺序 PS:26pin的GPIO为前26针 根据OLED屏的引脚说明,如 ...

  10. 【NOIP2016提高组day2】愤怒的小鸟

    分析 Kiana最近沉迷于一款神奇的游戏无法自拔. 简单来说,这款游戏是在一个平面上进行的. 有一架弹弓位于 (0, 0) 处,每次Kiana可以用它向第一象限发射一只红色的小鸟, 小鸟们的飞行轨迹均 ...