浅谈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 相关文章推荐
15 个 JavaScript Web UI 库
May 19 Javascript
javascript解决innerText浏览器兼容问题思路代码
May 17 Javascript
javascript之typeof、instanceof操作符使用探讨
May 19 Javascript
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
javascript中hasOwnProperty() 方法使用指南
Mar 09 Javascript
利用js实现禁止复制文本信息
Jun 03 Javascript
js通过classname来获取元素的方法
Nov 24 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 Javascript
element中el-container容器与div布局区分详解
May 13 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
smarty section简介与用法分析
2008/10/03 PHP
一个php短网址的生成代码(仿微博短网址)
2014/05/07 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
PHP实现图片压缩
2020/09/09 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
iPhone手机上搭建nodejs服务器步骤方法
2015/07/06 NodeJs
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
JavaScript实现图片自动加载的瀑布流效果
2016/04/11 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
jQuery原理系列-css选择器的简单实现
2016/06/07 Javascript
基于JQuery实现分隔条的功能
2016/06/17 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
ajax请求+vue.js渲染+页面加载的示例
2018/02/11 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
详解vue-router 命名路由和命名视图
2018/06/01 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
[01:38]女王驾到——至宝魔廷新尊技能&特效展示
2020/06/16 DOTA
python类和继承用法实例
2015/07/07 Python
Python中字符串的常见操作技巧总结
2016/07/28 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
python实现微信打飞机游戏
2020/03/24 Python
Python文件操作模拟用户登陆代码实例
2020/06/09 Python
HTML+CSS3 模仿Windows7 桌面效果
2010/06/17 HTML / CSS
医院后勤自我鉴定
2013/10/13 职场文书
关于期中考试的反思
2014/02/02 职场文书
《槐乡五月》教学反思
2014/04/25 职场文书
我有一个梦想演讲稿
2014/05/05 职场文书
大学生敬老院活动总结
2015/05/07 职场文书