浅谈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 用原型继承来实现对象系统
Mar 22 Javascript
不用构造函数(Constructor)new关键字也能实现JavaScript的面向对象
Jan 11 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
JS限制文本框只能输入数字和字母方法
Feb 28 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
js创建对象的方法汇总
Jan 07 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
Jun 13 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
js实现点击上传图片并设为模糊背景
Aug 02 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 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使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
PHP中基本HTTP认证技巧分析
2015/03/16 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
PHP Cookie学习笔记
2016/08/23 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
js树形控件脚本代码
2008/07/24 Javascript
JavaScript this调用规则说明
2010/03/08 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
2011/11/07 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
2013/06/08 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
JS装饰器函数用法总结
2018/04/21 Javascript
详解js跨域请求的两种方式,支持post请求
2018/05/05 Javascript
vue-router动态设置页面title的实例讲解
2018/08/30 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
python实现的udp协议Server和Client代码实例
2014/06/04 Python
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
Python selenium文件上传方法汇总
2020/11/19 Python
Python中.py文件打包成exe可执行文件详解
2017/03/22 Python
python如何实现反向迭代
2018/03/20 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
Python 3.8正式发布重要新功能一览
2019/10/17 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
瑞典最好的运动鞋专卖店:Sneakersnstuff
2016/08/29 全球购物
"火柴棍式"程序员面试题
2014/03/16 面试题
《在家里》教后反思
2014/03/01 职场文书
篮球比赛策划方案
2014/06/05 职场文书
敬老院标语
2014/06/27 职场文书
2015学生会文艺部工作总结
2015/04/03 职场文书
傅雷家书读书笔记
2015/06/29 职场文书
宾馆安全管理制度
2015/08/06 职场文书
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python