浅谈JavaScript中的this指针和引用知识


Posted in Javascript onAugust 05, 2016

this是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化。但是总有一个原则,那就是this指的是调用函数的那个对象。

this指针在传统OO语言中,是在类中声明的,表示对象本身.在JavaScript中,this表示当前上下文,即调用者的引用

********this永远指向的是(函数对象)的所有者

this和全局对象:

var a = 1; 
function foo(){ 
var b = 2; 
console.log(this.a+b);//3 
} 
foo(); 
//foo函数所有者是window,全局函数中this指代的是window对象(********除非使用new,call,apply方法来改变this的指代关系)

this和对象:

var person = { 
name:'Theo Wong', 
gender:'male', 
getName:function(){ 
console.log(this.name);//getName函数所有者是person对象 
} 
}; 
person.getName();

嵌套函数中的this

var myObject = { 
func1:function() { 
console.log(this); //myObject 
var func2=function() { 
console.log(this); //window 
var func3=function() { 
console.log(this); //window 
}(); 
}(); 
} 
}; 
myObject.func1(); 
//在嵌套函数中,由于嵌套函数的执行上下文是window,所以this指代的是window对象,其实这是ECMA-262-3的一个bug,在最新的ECMA-262-5中已经修复

事件处理中的this:

var showValue = function(){ 
alert(this.value); 
};

1.<input id="test" type="text" />

通过dom.onclick绑定事件,document.getElementById('test').onclick = showValue;

此时showValue是作为dom的onclick方法被调用的,所以它的this应该指代的是dom对象,而不再是window对象

2.写在html标签内,<input id="test" type="text" onclick="showValue();" />

当点击dom时,我们获取不到正确的this,此时的this指代的是window对象,因为window对象中没有定义value的值,所以获取不到this.value

***此时的不是将showValue函数赋值给dom对象的onclick,而是引用,此时function()函数所有者是window

document.getElementById('test').onclick = function(){
showValue();
}

通过addEventListener/attachEvent绑定事件监听

<input type="text" id="test" /> 
<script type="text/javascript"> 
var dom = document.getElementById('test'); 
id = 'window'; 
function test(){ 
alert(this.id); 
} 
dom.addEventListener?dom.addEventListener('click',test,false):dom.attachEvent('onclick',test); 
//addEventListener test 
//attachEvent window 
</script>
//这种绑定事件监听的方式,attachEvent this是window对象,而addEventListener则是dom对象的

this和构造:

function obj(name,age){ 
this.name = name; 
this.age = age; 
this.fun = function(){ 
alert(this.name); 
}; 
} 
var obj = new obj('xht',18);//this就指这个新对象,new 改变this的指代关系 
obj.fun();//xht

this和call

//定义一个人,名字为jack 
var jack = { 
name : "jack", 
age : 26 
} 
//定义另一个人,名字为abruzzi 
var abruzzi = { 
name : "abruzzi", 
age : 26 
} 
//定义一个全局的函数对象 
function alertName(){ 
return this.name; 
} 
//设置alertName的上下文为jack, 此时的this为jack 
alert(alertName.call(jack)); 
//设置alertName的上下文为abruzzi,此时的this为abruzzi 
alert(alertName.call(abruzzi));

引用是一个比较有意思的主题,跟其他的语言不同的是,JavaScript 中的引用始终指向最终的对象,而并非引用本身

var obj = {}; // 空对象 
var ref = obj; // 引用 
obj.name = "objectA" ; 
alert(ref . name); //ref 跟着添加了 name 属性 
obj = ["one" , "two" , "three"]; //obj 指向了另一个对象 ( 数组对象 ) 
alert(ref.name); //ref 还指向原来的对象 
alert(obj.length ); //3 
alert(ref.length);

obj 只是对一个匿名对象的引用,所以, ref 并非指向它.

引用指向的只能是具体的对象,当具体对象改变的时候,引用还是引用原来的对象,而不是改变后的对象。

以上所述是小编给大家介绍的JavaScript中的this指针和引用知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
js读取json的两种常用方法示例介绍
Oct 19 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
AngularJS 实现按需异步加载实例代码
Oct 18 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
js采用concat和sort将N个数组拼接起来的方法
Jan 21 Javascript
JS对HTML表格进行增删改操作
Aug 22 Javascript
jQuery表单对象属性过滤选择器实例详解
Sep 13 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
js实现抽奖效果
Mar 27 Javascript
教你完全理解ReentrantLock重入锁
Jun 03 Javascript
JS实现音乐钢琴特效
Jan 06 Javascript
JavaScript中的this引用(推荐)
Aug 05 #Javascript
JS实现HTML表格排序功能
Aug 05 #Javascript
JavaScript如何实现跨域请求
Aug 05 #Javascript
JavaScript数组操作函数汇总
Aug 05 #Javascript
Jquery获取当前城市的天气信息
Aug 05 #Javascript
JavaScript蒙板(model)功能的简单实现代码
Aug 04 #Javascript
Three.js学习之Lamber材质和Phong材质
Aug 04 #Javascript
You might like
php+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
调整优化您的LAMP应用程序的5种简单方法
2011/06/26 PHP
PHP缓存技术的使用说明
2011/08/06 PHP
php Calender(日历)代码分享
2014/01/03 PHP
ThinkPHP提示错误Fatal error: Allowed memory size的解决方法
2015/02/12 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
PHP中PDO事务处理操作示例
2018/05/02 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
基于PHP的登录和注册的功能的实现
2020/08/06 PHP
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
jquery特效 幻灯片效果示例代码
2013/07/16 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
基于keras输出中间层结果的2种实现方式
2020/01/24 Python
keras中的History对象用法
2020/06/19 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
波兰香水和化妆品购物网站:Notino.pl
2017/11/07 全球购物
Madda Fella官网:美国冒险家服装品牌
2020/01/16 全球购物
校领导推荐信
2013/11/01 职场文书
行政前台岗位职责
2013/12/04 职场文书
银行办理业务介绍信
2014/01/18 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
总经理任命书范本
2014/06/05 职场文书
学习党代会心得体会
2014/09/05 职场文书
秋季校运会广播稿100字
2014/09/18 职场文书