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 ...
随机推荐
- Reconstruction(三维重建)文件被修改
修改内容: 该函数被修改了一部分,然后修改中止了,可能是牵一发而动全身,导致中止.无论什么原因,这个Reconstruction.cpp文件是唯一被修改的文件了.如果没有被修改该多好!!!!!! 如何 ...
- Paint的ColorFilter
一.简介 setColorFilter(ColorFilter filter) 设置颜色过滤,这个方法需要我们传入一个ColorFilter参数同样也会返回一个ColorFilter实例.我们在set ...
- 深入浅出Java多线程（2）-Swing中的EDT（事件分发线程） [转载]
本系列文章导航 深入浅出Java多线程(1)-方法 join 深入浅出Java多线程(2)-Swing中的EDT(事件分发线程) 深入浅出多线程(3)-Future异步模式以及在JDK1.5Concu ...
- CSS与jQuery补漏
1.position属性 这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型.相对定位元素会相对于它在正常流中的默认位置偏移. ...
- C++ 的写好库编译好，DELPHI或者Java做界面，iOS 和 Android 就都搞定。
当然也可以使用BCB和相关的开发库来开发App,只是别人没法帮助你. 摘自<想到做到-Android开发关键技术与精彩案例>.(詹建飞) p40
- ConcurrentDictionary 与 Dictionary
ASP.NET中ConcurrentDictionary是.Net4 增加的,与 Dictionary 最主要区别是, 前者是线程安全的集合,可以由多个线程同时并发读写Key-value. 那么 ...
- ZT 基于git的版本管理思路
http://nvie.com/posts/a-successful-git-branching-model/ 分为5种分支: feature:功能分支,开发人员在此种分支下开发新的功能,开发完成后m ...
- 数独高阶技巧之八——SDC
在本系列的第四篇“简单异数链”中,向大家介绍了XY-Wing等一系列Wing类技巧,并提到可以用(拐弯的)数组的观念来理解这些结构,经过第六篇ALS的学习之后,大家回过头再去看Wing,应该可以发现相 ...
- c# Quartz.net的简单封装
分享一个以前封装的Quartz.net类. 新建一个QuartzClass类库项目.nuget控制台输入 image.png 添加Quartz.net的引用. 我们新建一个JobBase.cs文件,里 ...
- sublime 插件安装之sublime highlight 如何优雅拷贝代码到word
首先:打开preference => Package Control,输入 Add Repository ,用它来为Sublime 添加插件安装源, https://github.com/n ...