浅谈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 showModalDialog 内跳转页面的问题
Nov 25 Javascript
jquery关于图形报表的运用实现代码
Jan 06 Javascript
php 中序列化和json使用介绍
Jul 08 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
js中实现多态采用和继承类似的方法
Aug 22 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
jQuery插件Validate实现自定义表单验证
Jan 18 Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 Javascript
详解Angular5路由传值方式及其相关问题
Apr 28 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
微信小程序实现点击效果
Jun 21 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 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 strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
php检测useragent版本示例
2014/03/24 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
js技巧--转义符&quot;\&quot;的妙用
2007/01/09 Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
简单的js计算器实现
2016/10/26 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
解决jQuery ajax动态新增节点无法触发点击事件的问题
2017/05/24 jQuery
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
Node.js API详解之 repl模块用法实例分析
2020/05/25 Javascript
weui上传多图片,压缩,base64编码的示例代码
2020/06/22 Javascript
代码分析Python地图坐标转换
2018/02/08 Python
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
迟到检讨书400字
2014/01/13 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
晚会主持词开场白
2014/03/17 职场文书
考试作弊万能检讨书
2014/10/19 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书
python引入其他文件夹下的py文件具体方法
2021/05/23 Python
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python
阿里云服务器(windows)手动部署FTP站点详细教程
2022/08/05 Servers