浅谈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 相关文章推荐
JavaScript 监听textarea中按键事件
Oct 08 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 Javascript
JavaScript中instanceof运算符的用法总结
Nov 19 Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
May 10 Javascript
原生JS实现天气预报
Jun 16 Javascript
node.js如何根据URL返回指定的图片详解
Oct 21 Javascript
微信小程序实现点击导航条切换页面
Nov 19 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 分页类 扩展代码
2009/06/11 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
PHP设计模式之简单投诉页面实例
2016/02/24 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
window.showModalDialog使用手册
2007/01/11 Javascript
JQuery 学习笔记 选择器之二
2009/07/23 Javascript
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
按下回车键指向下一个位置的一个函数代码
2014/03/10 Javascript
js 获取input点选按钮的值的方法
2014/04/14 Javascript
JavaScript作用域链示例分享
2014/05/27 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
Javascript简写条件语句(推荐)
2016/06/12 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
监听element-ui table滚动事件的方法
2019/03/26 Javascript
如何实现js拖拽效果及原理解析
2020/05/08 Javascript
vue实现信息管理系统
2020/05/30 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
python动态加载变量示例分享
2014/02/17 Python
python使用pymysql实现操作mysql
2016/09/13 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
python opencv判断图像是否为空的实例
2019/01/26 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
Python爬虫逆向分析某云音乐加密参数的实例分析
2020/12/04 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
能否解释一下XSS cookie盗窃是什么意思
2012/06/02 面试题
养殖人员的创业计划书范文
2013/12/26 职场文书
廉政承诺书2015
2015/04/28 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
为什么在foreach循环中JAVA集合不能添加或删除元素
2021/06/11 Java/Android