浅谈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 EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
jQuery 获取URL的GET参数值的小例子
Apr 18 Javascript
jquery实现输入框动态增减的实例代码
Jul 14 Javascript
ExtJS实现文件下载的方法实例
Nov 09 Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 Javascript
Vue.js一个文件对应一个组件实践
Oct 27 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
详解Vue中watch的高级用法
May 02 Javascript
vue中Axios的封装与API接口的管理详解
Aug 09 Javascript
js常见遍历操作小结
Jun 06 Javascript
微信小程序 Storage更新详解
Jul 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如何透过ODBC来存取数据库
2006/10/09 PHP
mayfish 数据入库验证代码
2010/04/30 PHP
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
2014/06/23 PHP
Android中资源文件(非代码部分)的使用概览
2012/12/18 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
浅谈Nodejs观察者模式
2015/10/13 NodeJs
基于javascript实现窗口抖动效果
2016/01/03 Javascript
JavaScript隐式类型转换
2016/03/15 Javascript
基于Turn.js 实现翻书效果实例解析
2016/06/20 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
对layui中表单元素的使用详解
2018/08/15 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
Python列表(list)常用操作方法小结
2015/02/02 Python
详解在Python程序中使用Cookie的教程
2015/04/30 Python
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
django开发教程之利用缓存文件进行页面缓存的方法
2017/11/10 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
深入浅析python3中的unicode和bytes问题
2019/07/03 Python
python 实现音频叠加的示例
2020/10/29 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
弘扬雷锋精神演讲稿
2014/05/10 职场文书
节能环保标语
2014/06/12 职场文书
自我检讨书怎么写
2015/05/07 职场文书
活动费用申请报告
2015/05/15 职场文书
李强为自己工作观后感
2015/06/11 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python