浅谈JavaScript中的this指针和引用知识

 更新时间:2016年08月05日 10:45:28   作者:xuht_nb  
this是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化。但是总有一个原则,那就是this指的是调用函数的那个对象。接下来通过本文给大家介绍js中的this指针和引用,非常不错,需要的朋友参考下

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的9种继承实现方式归纳

    JavaScript的9种继承实现方式归纳

    这篇文章主要介绍了JavaScript的9种继承实现方式归纳,本文讲解了原型链继承、原型继承(非原型链)、临时构造器继承、属性拷贝、对象间继承等继承方式,需要的朋友可以参考下
    2015-05-05
  • ES6扩展运算符的用途实例详解

    ES6扩展运算符的用途实例详解

    这篇文章主要介绍了ES6扩展运算符的用途 ,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-08-08
  • 如何防止回车(enter)键提交表单

    如何防止回车(enter)键提交表单

    这篇文章主要介绍了如何防止回车(enter)键提交表单的方法,需要的朋友可以参考下
    2014-05-05
  • JavaScript变量基本使用方法实例分析

    JavaScript变量基本使用方法实例分析

    这篇文章主要介绍了JavaScript变量基本使用方法,结合实例形式分析了JavaScript变量的类型、使用注意事项及命名规范,需要的朋友可以参考下
    2019-11-11
  • 微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)

    微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)

    这篇文章主要介绍了微信小程序授权登录解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • 深入理解JavaScript系列(16) 闭包(Closures)

    深入理解JavaScript系列(16) 闭包(Closures)

    本章我们将介绍在JavaScript里大家经常来讨论的话题 —— 闭包(closure)。闭包其实大家都已经谈烂了。尽管如此,这里还是要试着从理论角度来讨论下闭包,看看ECMAScript中的闭包内部究竟是如何工作的
    2012-04-04
  • JScript中使用ADODB.Stream判断文件编码的代码

    JScript中使用ADODB.Stream判断文件编码的代码

    在实现TextStraem的时候,找到判断文件编码的代码是VBS的,但是在JScript中是没有ASC等函数的,也不能对二进制数据进行处理,因此需要通过一个特别的方法来获取文件开关的编码标识。
    2008-06-06
  • Bootstrap如何创建表单

    Bootstrap如何创建表单

    这篇文章主要为大家详细介绍了Bootstrap如何创建表单,介绍了Bootstrap表单的三种类型,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10
  • js中继承的几种用法总结(apply,call,prototype)

    js中继承的几种用法总结(apply,call,prototype)

    本篇文章主要介绍了js中继承的几种用法总结(apply,call,prototype) 需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • 前端获取资源的方式(ajax、fetch)以及其区别详解

    前端获取资源的方式(ajax、fetch)以及其区别详解

    Fetch 被称之为下一代 Ajax 技术,内部采用 Promise 方式处理数据API 语法简洁明了,这篇文章主要给大家介绍了关于前端获取资源的方式(ajax、fetch)以及其区别的相关资料,需要的朋友可以参考下
    2024-07-07

最新评论