JavaScript进阶之this
javascript的this,一个不知道究竟属于谁的东西
this是一个大利器,用好了就可以帮我们省掉很多事,然而事实上却总是让我们出错。自己就吃过很大的亏。现在咱们就来扒一扒this究竟是什么。
自己看过很多博客或者帖子,看了之后总是感觉当时明白了。后面用的时候总是各种混乱。其实并非人家讲得不好,实在是自己没有真正理解到,后面通过做项目才算是看透了一些东西。
首先我们得死记一句话,this指向的是当前对象。
那么这个对象究竟指的是什么。什么是对象。我们从以下几个方面来理解:
- JavaScript是一种弱类型的语言,和一些强类型的语言如java,C#等不同。js的对象和他们的对象不一样,js的所有数据都是对象,普遍的对象就是若干键值对的组合。而在java,C#中是先有类,再通过类来创建实例,这个实例叫做对象。ps:在ES6中js推出了class这个概念(本人表示非常喜欢这样发展)。
- js所有数据都是对象,言外之意就是:number,array,function,null,erro,reg,date,{一系列键值对的组合}等等数据类型都可以看作对象。
- 我们有多种方式创建对象,new functionName或者直接var Myobject={一系列键值对}等等
下面我们就来用一个demo来看看吧
首先我们创建一个构造函数。这个构造函数类似于Java中类的构造函数,Js的构造函数的目的也是初始化值的作用,只是JS中无需先写class,直接写一个构造函数然后new这个构造函数就可以创建一个对象。
var person=function (name) {
this.name=name;
this.show=function () {
alert("我的名字是 "+this.name);
}
}
我们可以看到构造函数里面有this,这个this.name就是指向这个函数中创建的name;符合我们之前的那句话,this指向当前对象。
我们再添加一段Html代码以显示效果
<body>
<div>
<div>
<button id="test">查看爱好</button>
</div>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
然后我们为这个id为test的按钮绑定一个事件,此时js代码变为
var person=function (name) {
this.name=name;
this.show=function () {
alert("我的名字是 "+this.name);
}
}
var pengl=new person("PengL");
document.getElementById("test").addEventListener("click",function() {
pengl.show();
});
我们点击这个按钮可以看到
现在我们来分析一下代码,我们通过var pengl=new person("PengL");来创建了一个对象,此时this指向的便是PengL这个当前对象,然后将对象的show方法绑定为按钮的点击事件,点击按钮后通过弹出框可以看到this.name指向的名字。说明到现在为止。this,指向当前对象仍然是正确的。
那么问题来了,如果我们不用new创建对象,直接调用这个函数会怎么样呢。我们把代码改成这样
var person=function (name) {
this.name=name;
this.show=function () {
alert("我的名字是 "+this.name);
}
}
//var pengl=new person("PengL");
var pengl=person("PengL");
document.getElementById("test").addEventListener("click",function() {
pengl.show();
});
然后运行点击按钮查看效果,这时我们发现没有反应,我们打开控制台调试看,发现报错
我们可以看到控制台下面显示show属性undefined,为什么会这样。明明在构造函数中定义了show的呀。然而实际情况是这样:我们这次没有新建对象,而是直接把函数赋给了变量PengL,这时我们需要考虑的问题是什么?当前对象是谁?是这个函数吗?函数不也是对象吗?事实是如果没有新建对象。那么这些普通函数都属于一个大对象,那就是document对象。所以现在this,指的是document对象。而document对象并没有定义show方法,所以此时报错show为undefined。
通过上面的例子我们可以看到,this指向当前对象并没有错,重点是我们得弄明白当前对象是哪个,比如我们直接在html代码中添加onclick事件
<button value="aihao" onclick="GetButton(this.value)">
查看爱好
</button>
这时这个this指向的便是button元素这个对象,this.value便可以获取button的value值。
如过在js中通过this来获取value值
function GetButton () {
alert(this.value);
}
这时this指向的便是document对象,又会出现value undefined的错误了。
通过以上例子我们总结出以下几点:
- 找准当前对象是谁
- this指向当前对象
- 创建对象后this才能指向这个对象,直接调用函数是没用的
- 普通函数和全局变量等属于的对象都是document
这就是我想要分享的对于this的理解,可能有些同学对于js的对象这有一些不熟悉,看demo的时候会有些不容易理解,网上有很多大牛写的关于对象的博客。大家可以去看看。后面要是有机会,笔者也尝试看能不能把对象也来说说清楚!!!
JavaScript进阶之this的更多相关文章
- #笔记#JavaScript进阶篇一
#JavaScript进阶篇 http://www.imooc.com/learn/10 #认识DOM #window对象 浏览器窗口可视区域监测—— 在不同浏览器(PC)都实用的 JavaScrip ...
- 4、JavaScript进阶篇①——基础语法
一.认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面 ...
- JavaScript 进阶(一)JS的"多线程"
这个系列的文章名为“JavaScript 进阶”,内容涉及JS中容易忽略但是很有用的,偏JS底层的,以及复杂项目中的JS的实践.主要来源于我几年的开发过程中遇到的问题.小弟第一次写博客,写的不好的地方 ...
- JavaScript进阶(一)
OK接下来,我们再次梳理一遍js并且提高一个等级. 众所周知,web前端开发者需要了解html和css,会只用html和css创建一个漂亮的页 面,但是这肯定是不够的,因为它只是一个静态的页面,我们 ...
- Javascript 进阶 面向对象编程 继承的一个样例
Javascript的难点就是面向对象编程,上一篇介绍了Javascript的两种继承方式:Javascript 进阶 继承.这篇使用一个样例来展示js怎样面向对象编程.以及怎样基于类实现继承. 1. ...
- JavaScript进阶(九)JS实现本地文件上传至阿里云服务器
JS实现本地文件上传至阿里云服务器 前言 在前面的博客< JavaScript进阶(八)JS实现图片预览并导入服务器功能>(点击查看详情)中,实现了JS将本地图片文件预览并上传至阿里云服务 ...
- JavaScript进阶(十一)JsJava2.0版本
JavaScript进阶(十一)JsJava2.0版本 2007年9月11日,JsJava团队发布了JsJava2.0版本,该版本不仅增加了许多新的类库,而且参照J2SE1.4,大量使用了类的继承和实 ...
- Javascript 进阶 面向对象编程 继承的一个例子
Javascript的难点就是面向对象编程,上一篇介绍了Javascript的两种继承方式:Javascript 进阶 继承,这篇使用一个例子来展示js如何面向对象编程,以及如何基于类实现继承. 1. ...
- javascript进阶笔记(2)
js是一门函数式语言,因为js的强大威力依赖于是否将其作为函数式语言进行使用.在js中,我们通常要大量使用函数式编程风格.函数式编程专注于:少而精.通常无副作用.将函数作为程序代码的基础构件块. 在函 ...
- JavaScript进阶系列07,鼠标事件
鼠标事件有Keydown, Keyup, Keypress,但Keypress与Keydown和Keyup不同,如果按ctrl, shift, caps lock......等修饰键,不会触发Keyp ...
随机推荐
- 使用CSS使内容垂直居中的N中方法。
使用css+div使页面内容水平居中的方法大家并不陌生,那么如何使内容垂直居中呢? OK,下面进入正题,不如我们使用做高中数学题时经常用的思想:分情况讨论. 1.当待垂直居中的DIV高宽为已知时: ...
- MySQL 半同步复制+MMM架构
200 ? "200px" : this.width)!important;} --> 介绍 上篇文章介绍了MMM架构的实现方法,但是上篇文章的MMM方案的复制是异步复制,异 ...
- Java集合类的组织结构和继承、实现关系
Collection继承.实现关系如下(说明(I)表示接口,(C)表示Java类,<--表示继承,<<--表示实现): (I)Iterable |<--(I)Collectio ...
- c#方法
1.引用型参数: 关键字:ref 2.输出型参数 关键字:out 例: double area(out double p) { double t=3.14*10; p=2*t*3.14; return ...
- 由于Replication,DBCC Shrink不能收缩Log File
使用Backup创建测试环境之后,发现testdb的Log File过大,达到400GB,由于测试环境实际上不需要这么大的Log Space,占用400GB的Disk Space实在浪费Disk Re ...
- gcc
gcc编译源文件一步到位的命令就是 $ gcc demo.c -o demo 实际上这一步包含了四步: 1.预处理 $ gcc -E demo.c demo.i 预处理功能主要包括宏定义,文件包含,条 ...
- JavaScript == 、!=、===、!===的比较
; '; ; test == num //true 相同类型 相同值 test === num //true 相同类型 相同值 test !== num //false test与num类型相同,其值 ...
- TSQL语句练习题
1. 查询Student表中的所有记录的Sname.Ssex和Class列. select Sname,Ssex,Class from Student 2. 查询教师所有的单位即不重复的Depart列 ...
- innerHTML与innerText的异同
在一道面试题中看到的. 1.功能讲解: innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 设置或获取 ...
- How to make a not-so-boring speech?
For almost 26 years, even a trivial boy like me, have made over 100 and listened uncountable speeche ...