浅谈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中的Window窗口对象
Jan 16 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
java中String类型变量的赋值问题介绍
Mar 23 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
Jun 12 Javascript
深入浅析JS Function()构造函数
Aug 22 Javascript
炫酷的js手风琴效果
Oct 13 Javascript
vue生成token并保存到本地存储中
Jul 17 Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 Javascript
微信小程序实现同时上传多张图片
Feb 03 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
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
php session处理的定制
2009/03/16 PHP
php绝对路径与相对路径之间关系的的分析
2010/03/03 PHP
php下目前为目最全的CURL中文说明
2010/08/01 PHP
PHP异步调用socket实现代码
2012/01/12 PHP
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
php使用GD库创建图片缩略图的方法
2015/06/10 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
php微信公众号开发之简答题
2018/10/20 PHP
js option删除代码集合
2008/11/12 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
2013/08/27 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
微信小程序 scroll-view隐藏滚动条详解
2017/01/16 Javascript
JS出现失效的情况总结
2017/01/20 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
vue移动端轻量级的轮播组件实现代码
2018/07/12 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
jQuery操作选中select下拉框的值代码实例
2020/02/07 jQuery
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
总结python中pass的作用
2019/02/27 Python
Django保护敏感信息的方法示例
2019/05/09 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
工程质量承诺书范文
2014/03/27 职场文书
优质服务演讲稿
2014/05/14 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
2015年预备党员自我评价
2015/03/04 职场文书
物业接待员岗位职责
2015/04/15 职场文书
社会实践心得体会范文
2016/01/14 职场文书