浅谈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 Ajax实现用户注册检测(验证用户名是否存)
Sep 12 Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
javascript实现下雪效果【实例代码】
May 03 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
May 26 Javascript
JS实现简单易用的手机端浮动窗口显示效果
Sep 07 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 Javascript
javascript内存分配原理实例分析
Apr 10 Javascript
VUE元素的隐藏和显示(v-show指令)
Jun 23 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 Javascript
Node.js readline模块与util模块的使用
Mar 01 Javascript
vue中datepicker的使用教程实例代码详解
Jul 08 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+APACHE实现用户论证的方法
2006/10/09 PHP
php设计模式 Visitor 访问者模式
2011/06/28 PHP
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
JS无限极树形菜单,json格式、数组格式通用示例
2013/07/30 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
js的各种排序算法实现(总结)
2016/07/23 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
2019/10/31 Javascript
Python的print用法示例
2014/02/11 Python
按日期打印Python的Tornado框架中的日志的方法
2015/05/02 Python
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
商场活动策划方案
2014/01/24 职场文书
春节联欢晚会主持词
2014/03/24 职场文书
初三学生个人自我评定
2014/04/06 职场文书
高中生评语大全
2014/04/25 职场文书
工作收入住址证明
2014/10/28 职场文书
评职称个人总结
2015/03/05 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
党员反邪教心得体会
2016/01/15 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js