浅谈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 相关文章推荐
javascript qq右下角滑出窗口 sheyMsg
Mar 21 Javascript
js实现数组去重、判断数组以及对象中的内容是否相同
Nov 29 Javascript
简介JavaScript中setUTCSeconds()方法的使用
Jun 12 Javascript
JQuery fileupload插件实现文件上传功能
Mar 18 Javascript
JS实现图片的不间断连续滚动的简单实例
Jun 03 Javascript
浅谈时钟的生成(js手写简洁代码)
Aug 20 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
用原生js做单页应用
Jan 17 Javascript
AngularJS Select(选择框)使用详解
Jan 18 Javascript
iView-admin 动态路由问题的解决方法
Oct 03 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
JS 5种遍历对象的方式
Jun 16 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+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
dede3.1分页文字采集过滤规则详说(图文教程)续二
2007/04/03 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
php删除二维数组中的重复值方法
2018/03/12 PHP
php 读取文件夹下所有图片、文件的实例
2018/10/17 PHP
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
一些javascript一些题目的解析
2010/12/25 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
jquery禁用右键示例
2014/04/28 Javascript
Jquery代码实现图片轮播效果(一)
2015/08/12 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
Angularjs实现mvvm式的选项卡示例代码
2016/09/08 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
vue如何截取字符串
2019/05/06 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
Python中的字典遍历备忘
2015/01/17 Python
使用Python神器对付12306变态验证码
2016/01/05 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
python学生管理系统开发
2019/01/30 Python
在python中利用numpy求解多项式以及多项式拟合的方法
2019/07/03 Python
python递归法实现简易连连看小游戏
2020/03/25 Python
python实现密码强度校验
2020/03/18 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
销售高级职员求职信
2013/10/29 职场文书
优秀士兵先进事迹
2014/02/06 职场文书
暖通工程师岗位职责
2014/06/12 职场文书
七年级作文之冬景
2019/11/07 职场文书