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 ...
随机推荐
- Hadoop权威指南文摘
第1章 初识Hadoop 1.1 数据!数据! 1.2 数据的存储与分析 HDFS实现数据的存储,MapReduce实现数据额分析与处理 1.3 相较于其他系统的优势 MapReduce是一个批量查询 ...
- 前端福利之表单input按钮在各浏览器之间的兼容性(转)
从网上看了这篇关于表单input按钮的浏览器兼容性问题,总结的还不错,所以copy下来学习下. input按钮在各个浏览器之间的兼容性问题,看下边这段代码: input.item { backgrou ...
- BZOJ 1878 hh的项链（简单莫队）
Description HH有一串由各种漂亮的贝壳组成的项链.HH相信不同的贝壳会带来好运,所以每次散步 完后,他都会随意取出一 段贝壳,思考它们所表达的含义.HH不断地收集新的贝壳,因此他的项链变得 ...
- 阿里云云主机添加swap分区与swap性能优化
1.swap的功能与相应内核参数 Linux 将物理内存分为内存段的部分被称作“页面”.交换是指内存页面被复制到预先设定好的硬盘空间(叫做交换空间)的过程,目的是释放用于页面的内存.物理内存和交换空间 ...
- [原创] 改善 Firemonkey Canvas 几何绘图质量问题（移动平台）
说明: Fiiremonkey 的跨平台能力,大家有目共睹(一码同介面跨四平台),唯独移动平台在几何绘图方面,质量始终不尽人意,我也曾试着去修正(如:修正曲线平滑问题),也曾找过第三方案(如:AggP ...
- ubuntu 编译安装 mod_wsgi
在编译过程中遇到一些问题,记录下来方便别人使用. step1: 下载.windows下面会有编译好的包,Ubuntu没有需要自己编译. 地址: https://github.com/GrahamDum ...
- 基于SSH的网上购物商城系统-JavaWeb项目-有源码
开发工具:Myeclipse/Eclipse + MySQL + Tomcat 项目简介: 基于WEB的网上购物系统主要功能包括:前台用户登录退出.注册.在线购物.修改个人信息.后台商品管理等等.本系 ...
- C++裁剪文件，截断文件，_chsize()
errno_t _chsize_s( int fd, __int64 size ); 详见msdn知识库 _chsize将文件裁剪为指定大小,大小的度量方法与 long ftell(FILE * fp ...
- RobotFramework中查询数据库相关
先要安装:robotframework-databaselibrary,并导入RIDE 封装“连接数据库”关键字,内容如下: 断开数据库:Disconnect From Database,没有参数 一 ...
- 浅谈K8S cni和网络方案
此文已由作者黄扬授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 在早先的k8s版本中,kubelet代码里提供了networkPlugin,networkPlugin是一组接 ...