理解JavaScript的this对象
1.概述
this对象是在运行时基于函数的执行环境绑定的,this总是返回一个对象,简单说,就是返回属性或方法“当前”所在的对象。在全局函数中,this等于window,而当函数作为某个对象的方法调用时,this等于那个对象。不过匿名函数的执行环境具有全局性,因此其this对象通常指向window(如果通过call()或者apply()改变函数执行环境的情况下,this会指向其他对象。)。
2.为什么使用this?
虽然知道了this是怎么回事了,但是为什么要使用this,或者说this它带来了那些好处了。
因为在实例化对象时,总是不能确定开发者会使用什么样的变量名。使用 this,即可在任何多个地方重用同一个函数。请思考下面的例子:
function showColor() {
alert(this.color);
};
var oCar1 = new Object;
oCar1.color = "red";
oCar1.showColor = showColor;
var oCar2 = new Object;
oCar2.color = "blue";
oCar2.showColor = showColor;
oCar1.showColor(); //输出 "red"
oCar2.showColor(); //输出 "blue"
3.下面来看使用this的一些情况
示例一
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
alert(object.getNameFunc()()); //"The Window"
上面代码先创建了一个全局变量name,又创建了一个包含name属性的对象。这个对象还包含一个方法-getNameFunc(),它返回一个匿名函数,而这个匿名函数又返回this.name。由于getNameFunc()返回一个函数因此调用object.getNameFunc()()就会立即调用它的返回的函数,最后返回了全局name变量的值The Window。为什么没有返回My Object?
解释:每个函数在调用的时候,其活动对象都回自动取得两个变量:this和arguments。而调用object.getNameFunc()()返回的匿名函数是在全局环境中执行的,所以它的this指向就是window了。
那么如果要调用外部的this,有什么办法呢?通过把外部作用域中的this对象保存在一个闭包能够访问到的变量里,就可以让闭包访问该对象了,如下所示。
示例二
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
var that = this;
return function(){
return that.name;
};
}
};
alert(object.getNameFunc()()); //"MyObject"
这个例子与上面的例子区别是,在定义匿名函数之前,我们把this对象赋值给了一个名叫that的变量,从而使得this的值得到了固定。而定义了闭包,通过作用域链就能访问到that了。
示例三
function sayColor(color){
this.color=color;
alert(this.color);
}
function ClassB(sColor, sName) {
sayColor.call(this, sColor);//this是指classB的实例对象,将sayColor函数作为classB的实例对象方法调用,并传入了sColor参数。
// sayColor.apply(this, arguments);
this.name = sName;
this.sayName = function () {
alert(this.name);
};
}
理解JavaScript的this对象的更多相关文章
- 全面理解Javascript中Function对象的属性和方法
http://www.cnblogs.com/liontone/p/3970420.html 函数是 JavaScript 中的基本数据类型,在函数这个对象上定义了一些属性和方法,下面我们逐一来介绍这 ...
- 三张图较为好理解JavaScript的原型对象与原型链
最近从网上看到别人详细得讲解了js的原型对象和原型链,看完感觉是看得最清晰的一个,于是,摘录到自己博客里 对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与_ ...
- 深入理解JavaScript的闭包特性如何给循环中的对象添加事件
初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...
- 深入理解javascript原型和闭包(1)——一切都是对象
“一切都是对象”这句话的重点在于如何去理解“对象”这个概念. ——当然,也不是所有的都是对象,值类型就不是对象. 首先咱们还是先看看javascript中一个常用的函数——typeof().typeo ...
- 深入理解javascript原型和闭包(2)——函数和对象的关系
上文(理解javascript原型和作用域系列(1)——一切都是对象)已经提到,函数就是对象的一种,因为通过instanceof函数可以判断. var fn = function () { }; co ...
- 深入理解javascript原型和闭包(1)---一切都是对象
深入理解javascript原型和闭包(1)---一切都是对象 type函数输出的类型,在此列出: function show (x){ console.log(typeof(x));//undefi ...
- 如何给循环中的对象添加事件--深入理解JavaScript的闭包特性
初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...
- 深入理解JavaScript的闭包特性 如何给循环中的对象添加事件(转载)
原文参考:http://blog.csdn.net/gaoshanwudi/article/details/7355794 初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数 ...
- 深入理解Javascript window对象
首先看我们的源代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...
随机推荐
- isnull函数
isnull是判断一个字段是否为空值,返回一个特定的值 列: isnull(a,0) 如果a字段有空值返回0 没有空值就返回a的本身 isnull(a,1)=2 字段a有空值返回1,判断isnull ...
- 2017年12月13日 LinQ用法基本的增删改查
LinQ是什么? LinQ是语言集成的查询,是用于C#跟Vb的扩展语言 LinQ的用法 新建一个App_Code文件夹,在文件夹下添加一个数据LinQ to SQL类,可以直接直接点击服务器管理器然后 ...
- Java 基础(8)——流程控制
上次的运算符都消化好了吗?每一天都要用到一些哦~ 以前有提到过一嘴,程序执行都是从上到下执行的,emm,学到这里,感觉这句话是对的也是错的了…… 如果都是一行一行执行下去的话,上节课的例子: 今天不上 ...
- java温故而知新(9)OOP(面向对象编程)理念
Object Oriented Programming (面向对象的程序设计) 1.定义 面向对象程序设计(OOP)的具体定义很难下,也很容易因此而引起争论,在 Object-Orie ...
- Synchronized的原理及自旋锁,偏向锁,轻量级锁,重量级锁的区别(摘抄和理解)
1. 自旋锁的优缺点: 自旋锁 自旋锁原理非常简单,如果持有锁的线程能在很短时间内释放锁资源,那么那些等待竞争锁的线程就不需要做内核态和用户态之间的切换进入阻塞挂起状态,它们只需要等一等(自旋),等持 ...
- 从官网下载mod_jk.so
最近在搞apache和tomcat集群,这里就要用到mol_jk.so,在官网找了很久才知道在哪里下载,英语是硬伤啊. 1.打开tomcat官网 http://tomcat.apache.org/ 2 ...
- 201610-H5项目总结
1.首屏进入动效使用jQuery的animate(); $('.btn_driver').animate({ left:'26%' },'slow'); $('.btn_show').animate( ...
- 【阿里云产品公测】ACE下上传文件永久存储实践
本帖主要内容: ;$,=VB:' 在阿里云的ACE下,我是如何实现让上传的文件永久保存的? ,%"!8T 本文以PHP为例,具体知识点如下: WD# 96V 第一,扩展服务“存储 ...
- c++开发ocx入门实践一
原文:http://blog.csdn.net/yhhyhhyhhyhh/article/details/51374200 最近项目中利用ocx封装了底层视频播放及处理的控件,以供c#和web调用.对 ...
- 浏览器环境下的javascript DOM对象继承模型
这张图是我直接在现代浏览器中通过prototype原型溯源绘制的一张浏览器宿主环境下的javascript DOM对象模型,对于有效学习和使用javascript DOM编程起到高屋建瓴的指导作用, ...