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 ...
随机推荐
- 在Linux上编译Hadoop-2.4.0
目录 目录 1 1. 前言 1 2. 安装依赖 1 2.1. 安装ProtocolBuffer 2 2.2. 安装CMake 2 2.3. 安装JDK 2 2.4. 安装Maven 3 3. 编译Ha ...
- Cocosd-x-2.2.2 & VS2012 & Eclipse 开发环境搭建
1.安装软件: 1.1 安装JDK(JDK1.7.0_51) JAVA_HOME C:\Program Files\Java\jdk1..0_51 CLASSPATH .;%JAVA_HOME%\li ...
- WPF学习资源整理
WPF(WindowsPresentation Foundation)是微软推出的基于Windows Vista的用户界面框架,属于.NET Framework 3.0的一部分.它提供了统一的编程模型 ...
- Spring Cache介绍和使用
Spring Cache 缓存是实际工作中非经常常使用的一种提高性能的方法, 我们会在很多场景下来使用缓存. 本文通过一个简单的样例进行展开,通过对照我们原来的自己定义缓存和 spring 的基于凝视 ...
- 1、Semantic-UI之开发环境搭建
下载webstrom(其他的任何可以进行前端开发的软件都可以) Download WebStorm: The Smartest JavaScript IDE by JetBrains 安装并激活web ...
- [Delphi] Webbroker ISAPI 示例说明
新建Webbroker项目: 选择类型: 开始可以使用:Indy VCL Application 方便调试,完成后,再新建一个DLL 项目,引用业务单元. 示例代码如下: unit uDataMo ...
- delphi实现截全屏功能
procedure TForm1.Button10Click(Sender: TObject);var bmp: TBitmap; can: TCanvas; dc: HDC; Image1: TIm ...
- [LeetCode 题解]：Swap Nodes in Pairs
前言 [LeetCode 题解]系列传送门: http://www.cnblogs.com/double-win/category/573499.html 1.题目描述 Given a li ...
- 基于python+selenium的框架思路（二）
一.如下是用例格式,第一个sheet为用例汇总,后面的sheet为具体的用例步骤 sheet:测试用例 sheet:搜索 sheet:刘江博客验证 二.读取该excel文件取出关键字等信息,作为关键字 ...
- Java集合框架（Collection Framework）学习之 HashMap
从API文档可以得到HashMap的以下几个特点: 基于哈希表(hash table)实现,并且是链式哈希表 允许空值和空键(null=null 键值对) HashMap与Hashtable基本相同, ...