浅谈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 相关文章推荐
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
JS子父窗口互相操作取值赋值的方法介绍
May 11 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
Jan 06 Javascript
JavaScript判断是否为数组的3种方法及效率比较
Apr 01 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
vue的props实现子组件随父组件一起变化
Oct 27 Javascript
js 颜色选择插件
Jan 23 Javascript
vue.js从安装到搭建过程详解
Mar 17 Javascript
vue自定义底部导航栏Tabbar的实现代码
Sep 03 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
Sep 21 Javascript
详解vuex的简单todolist例子
Jul 14 Javascript
Vue中图片Src使用变量的方法
Oct 30 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初学者头疼问题总结
2006/10/09 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
再谈querySelector和querySelectorAll的区别与联系
2012/04/20 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
2014/04/18 Javascript
JSONP跨域GET请求解决Ajax跨域访问问题
2014/12/31 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
2018/02/10 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
2018/08/27 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
js实现可爱的气泡特效
2020/09/05 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
python基础入门详解(文件输入/输出 内建类型 字典操作使用方法)
2013/12/08 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
关于Python内存分配时的小秘密分享
2019/09/05 Python
python模块导入的方法
2019/10/24 Python
Django多层嵌套ManyToMany字段ORM操作详解
2020/05/19 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
python 实现Requests发送带cookies的请求
2021/02/08 Python
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
幼儿园教学随笔感言
2014/02/23 职场文书
创先争优活动党员公开承诺书
2014/08/29 职场文书
紫日观后感
2015/06/05 职场文书
全民创业工作总结
2015/08/13 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
MySQL 数据丢失排查案例
2021/05/08 MySQL
mybatis中注解与xml配置的对应关系和对比分析
2021/08/04 Java/Android