js中this那些事儿
前几天写东西由于恶趣味作祟将所有的函数全部封装在json中，起初好好的，函数B也可以调用函数A的内容，不过在写一个点击事件时出现了意外，
代码如下：
var $ ={
"A":function(x){
alert("Hello World")
},
"B": function(){
this.A();
}
}
$.B(); //输出“Hello World”
这样在json中别的函数内也能调用，当然仅仅这样我也没写这篇随笔了，下面Dome升级，上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.onload=function(){
var btn=document.getElementById("btn");
var $ ={
"A":function(x){
alert("Hello World")
},
"B": function(){
btn.onclick=function(){
this.A();
}
}
}
$.B();
}
</script>
</head>
<body>
<button id="btn">你好</button>
</body>
</html>
点击按钮控制台包错： this.A is not a function
明明A函数定义了为什么显示A不是函数呢？
我们看看上下两个案例B函数中的this的区别：
//上面的案例
"B": function(){
this.A();
console.log(this)
} //输出：
Object {A: function, B: function}
A: function (x)
B: function ()
__proto__: Object
//下面的案例
"B": function(){
btn.onclick=function(){
console.log(this)
this.A();
}
} //输出
<button id="btn">你好</button>
这就说明此时this指向的是btn，原因是this指的是，调用函数的那个对象
那如果我们非在B函数中点击btn调用函数A呢，有没有办法？答案是有的，我们借用桥梁的思想，设置一个中间变量，上代码：
var btn=document.getElementById("btn");
var $ ={
"A":function(x){
alert("Hello World")
},
"B": function(){
var that=this
btn.onclick=function(){
console.log(that)
that.A(); //弹出“Hello World”
}
}
}
$.B();
//控制台输出
object {A: function, B: function}
A: function (x)
B: function ()
__proto__: Object
到这儿this的这个坑就算跳出来了，以后遇到别的坑也会在另行讲述
js中this那些事儿的更多相关文章
- JS中this的那些事儿
this是JavaScript中最复杂的机制之一.它是一个很特别的关键字,被自动定义在所有函数的作用域中. 一.this到底指向什么? this既不指向函数自身,也不指向函数的词法作用域,具体指向什么 ...
- 浅谈JS中的闭包
浅谈JS中的闭包 在介绍闭包之前,我先介绍点JS的基础知识,下面的基础知识会充分的帮助你理解闭包.那么接下来先看下变量的作用域. 变量的作用域 变量共有两种,一种为全局变量,一种为局部变量.那么全局变 ...
- node(基础)_node.js中的http服务以及模板引擎的渲染
一.前言 本节的内容主要涉及: 1.node.js中http服务 2.node.js中fs服务 3.node.js中模板引擎的渲染 4.利用上面几点模拟apache服务器 二.知识 1.node.js ...
- DOM LEVEL 1 中的那些事儿[总结篇-下]
本文承接:DOM LEVEL 1 中的那些事儿[上] 2.3 Element类型 Element类型应该是Document类型之外使用的最多的节点类型了,Element代表XML或HTML文档中的 ...
- js中JSON和JSONP的区别，让你从懵逼到恍然大悟
说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服 ...
- 前端走进机器学习生态，在 Node.js 中使用 Python
这次给大家带来一个好东西,它的主要用途就是能让大家在 Node.js 中使用 Python 的接口和函数.可能你看到这里会好奇,会疑惑,会不解,我 Node.js 大法那么好,干嘛要用 Python ...
- 5.0 JS中引用类型介绍
其实,在前面的"js的六大数据类型"文章中稍微说了一下引用类型.前面我们说到js中有六大数据类型(五种基本数据类型 + 一种引用类型).下面的章节中,我们将详细讲解引用类型. 1. ...
- 【repost】JS中的异常处理方法分享
我们在编写js过程中,难免会遇到一些代码错误问题,需要找出来,有些时候怕因为js问题导致用户体验差,这里给出一些解决方法 js容错语句,就是js出错也不提示错误(防止浏览器右下角有个黄色的三角符号,要 ...
- JS中给正则表达式加变量
前不久同事询问我js里面怎么给正则中添加变量的问题,遂写篇博客记录下. 一.字面量 其实当我们定义一个字符串,一个数组,一个对象等等的时候,我们习惯用字面量来定义,例如: var s = &quo ...
随机推荐
- javascript总结46: JS三大系列-方便的offset 家族
1 offset 家族 offset这个单词本身是--偏移,补偿,位移的意思. js中有一套方便的获取元素尺寸的办法就是offset家族: 2 offset 结构介绍为: 3 offset常用属性 ...
- 编写高质量代码改善C#程序的157个建议——建议102：区分接口和抽象类的应用场合
建议102:区分接口和抽象类的应用场合 接口和抽象类有一些显而易见的区别: 接口支持多继承,抽象类则不能. 接口可以包含方法.属性.索引器.事件的签名,但不能有实现,抽象类则可以. 接口在增加新方法后 ...
- java-设计模式汇总整理
最近,对各种模式做了一个整理,便于后续自用. 1.工厂模式 总结:很好理解,一个接口,2个类实现这个接口,那么可以用“接口 变量=new 接口实现类”的方式调用不同的实现类,调用方式直接使用接口的方法 ...
- leetcode 存在重复元素
给定一个整数数组,判断是否存在重复元素. 如果任何值在数组中出现至少两次,函数返回 true.如果数组中每个元素都不相同,则返回 false. 示例 1: 输入: [1,2,3,1] 输出: true ...
- WinForm中DataGridView的使用（四） - 区分单双击事件
虽然DataGridView单双击事件都有,但双击事件其实也会触发单击事件的处理,所以如果双击事件和单击事件的行为不同,或者双击时不想触发单击事件,或者单击事件会阻塞双击事件的处理时(比如单击后会有弹 ...
- WPF 简洁的主界面
用的是dev的TileLayouotControl控件. <dxwui:PageAdornerControl Header="" Padding="30" ...
- C#操作Json数据
JSON是现今各语言实现数据交互应用最广泛的一种格式,在于Xml的比较中,由于 JSON 所使用的字符要比 XML 少得多,可以大大得节约传输数据所占用得带宽. 本文采用的是Newtonsoft.Js ...
- Spring Cloud使用总结
本文来自网易云社区,转载务必请注明出处. Spring Cloud 是spring团队推出的基于SpringBoot的分布式微服务框架,为开发者提供了在分布式系统(如配置管理.服务发现.断路器.智能路 ...
- [NOI2010]能量采集（莫比乌斯反演）
题面: bzoj luogu NOI2010能量采集 题解 读完题之后我们发现在每个产生贡献的点\((x1,y1)\)中,它与原点之间的点\((x2,y2)\)都满足\(x2|x1\),\(y2|y1 ...
- XSSFWorkbook实现导出excel
1.pom.xml中加入poi依赖: <!-- poi --> <dependency> <groupId>org.apache ...