浅谈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 相关文章推荐
提高代码性能技巧谈—以创建千行表格为例
Jul 01 Javascript
JavaScript自定义事件介绍
Aug 29 Javascript
js中的cookie的读写操作示例详解
Apr 17 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 Javascript
jquery的checkbox,radio,select等方法小结
Aug 30 Javascript
JS实现的几个常用算法
Nov 12 Javascript
如何解决hover在ie6中的兼容性问题
Dec 15 Javascript
js实现开启密码大写提示
Dec 21 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 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在字符断点处截断文字的实现代码
2011/04/21 PHP
php随机抽奖实例分析
2015/03/04 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
基于PHP实现简单的随机抽奖小程序
2016/01/05 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
Laravel学习教程之request validation的编写
2017/10/25 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
简单的代码实现jquery定时器
2013/11/17 Javascript
JS实现鼠标单击与双击事件共存
2014/03/08 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
理解javascript中DOM事件
2015/12/25 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
用原生js统计文本行数的简单示例
2016/08/19 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
JS实现模糊查询带下拉匹配效果
2018/06/21 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
python简易远程控制单线程版
2018/06/20 Python
python批量修改图片大小的方法
2018/07/24 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
Python os库常用操作代码汇总
2020/11/03 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
给老婆的婚前保证书
2014/02/01 职场文书
成语的广告词
2014/03/19 职场文书
毕业评语大全
2014/05/04 职场文书
法定代表人资格证明书
2015/06/18 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript