浅谈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 相关文章推荐
jWiard 基于JQuery的强大的向导控件介绍
Oct 28 Javascript
可以用鼠标拖动的DIV实现思路及代码
Oct 21 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
Jul 06 Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 Javascript
JavaScript实现一个空中避难的小游戏
Jun 06 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
基于jQuery的表单填充实例
Aug 22 jQuery
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 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
德生PL660的电路分析和打磨
2021/03/02 无线电
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
PHP 命名空间实例说明
2011/01/27 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
js显示时间 js显示最后修改时间
2013/01/02 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
python控制台英汉汉英电子词典
2020/04/23 Python
python字符类型的一些方法小结
2016/05/16 Python
python实现windows下文件备份脚本
2018/05/27 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
python中dict()的高级用法实现
2019/11/13 Python
Python箱型图处理离群点的例子
2019/12/09 Python
浅谈TensorFlow之稀疏张量表示
2020/06/30 Python
一篇文章带你搞定Ubuntu中打开Pycharm总是卡顿崩溃
2020/11/02 Python
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
美国独家设计师眼镜在线光学商店:Glasses Gallery
2017/12/28 全球购物
招聘单位介绍信
2014/01/14 职场文书
大二自我鉴定
2014/01/31 职场文书
2014年党务公开方案
2014/05/08 职场文书
2014年个人委托书范本
2014/10/13 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
大三学生英语考试作弊检讨书
2015/01/01 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书