浅谈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 相关文章推荐
滚动经典最新话题[prototype框架]下编写
Oct 03 Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
jquery validate在ie8下的bug解决方法
Nov 13 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
判断是否存在子节点的实现代码
May 18 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
Vue.js仿Metronic高级表格(一)静态设计
Apr 17 Javascript
Bootstrap一款超好用的前端框架
Sep 25 Javascript
Vue仿支付宝支付功能
May 25 Javascript
layui点击按钮添加可编辑的一行方法
Aug 15 Javascript
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 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 mkdir()定义和用法
2009/01/14 PHP
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
PHP可变函数学习小结
2015/11/29 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
php多进程模拟并发事务产生的问题小结
2018/12/07 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
jquery无缝向上滚动实现代码
2013/03/29 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
JavaScript微信定位功能实现方法
2016/11/29 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
Python编写简单的HTML页面合并脚本
2016/07/11 Python
简单了解OpenCV是个什么东西
2017/11/10 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
Python打印“菱形”星号代码方法
2018/02/05 Python
python实现可视化动态CPU性能监控
2018/06/21 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
Intimissimi德国网上商店:意大利知名内衣品牌
2018/04/03 全球购物
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
美国巧克力喷泉品牌:Sephra
2019/05/05 全球购物
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
LN-CC日本:高端男装和女装的奢侈时尚目的地
2019/09/01 全球购物
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
夜大毕业生自我鉴定
2013/10/31 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
党建目标管理责任书
2014/07/25 职场文书
活动总结新闻稿
2014/08/30 职场文书
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers
Java获取字符串编码格式实现思路
2022/09/23 Java/Android