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 ...
随机推荐
- Codeigniter框架前后台部署(多目录部署)
个网站一般包含前台和后台并且访问的url是不同的,Codeigniter怎么来部署呢? 在网上看到了一篇比较好的文章: 在下载好的ci的根目录建立一个目录 admin 将application目录中的 ...
- Hadoop Shell
1.常用的一些Shell 再好的博客,都不如官方文档好用: http://hadoop.apache.org/docs/r1.0.4/cn/hdfs_shell.html
- SIP协议整理
本文记录开发.实现IMS项目时,整理的SIP协议基础知识:若有侵权,请告之. SIP协议 1. SIP协议简介 SIP是一个应用层的控制协议,可以用来建立.修改.和终止多媒体会话(或者会议) ...
- gulp-usemin 插件使用
关于什么是gulp,它和grunt有什么区别等问题,这里不做任何介绍.本文主要介绍如何使用gulp-usemin这款插件,同时也会简单介绍本文中用到的一些插件. 什么是gulp-usemin 用来将H ...
- css中padding和magin的区别
1.Margin 用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离. 如果提供全部四个参数值,将按上-右-下-左的顺序作用于四边. 如果只提供一个,将用于全部的四边. 如果提供两个,第 ...
- IOC简洁说明
what is ioc: 控制注入,是一种设计模式 the benefits of using this: 降低耦合度 什么是DI 什么是依赖? 当一个类需要另一个类协作来完成工作的时候就产生了依赖 ...
- SSL证书可以给多个域名使用吗？
欢迎访问网易云社区,了解更多网易技术产品运营经验 从信任等级的角度来说,SSL证书主要分为三类: 1.域名型https证书(DVSSL):信任等级一般,只需验证网站的真实性便可颁发证书保护网站: 2. ...
- 洛谷P2495 [SDOI2011]消耗战（虚树）
题面 传送门 题解 为啥一直莫名其妙\(90\)分啊--重构了一下代码才\(A\)掉-- 先考虑直接\(dp\)怎么做 树形\(dp\)的时候,记一下断开某个节点的最小值,就是从根节点到它的路径上最短 ...
- Python strip()函数用法
Python中字符串处理函数里有三个去空格(包括'\n', '\r', '\t', ' ')的函数: strip 同时去掉左右两边的空格lstrip 去掉左边的空格rstrip 去掉右边的空格 具体示 ...
- KVM 安装 VMware 虚拟机
去掉了“双引号”改为:vmx.allowNested = TRUE 打开在其中创建虚拟机的文件夹VMDISK和搜索与您的虚拟机的名称. vmx 文件. 用记事本打开它,并添加上述条目. 所以 vmx. ...