JavaScript中的this引用(推荐)


Posted in Javascript onAugust 05, 2016

this

this是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化。但是总有一个原则,那就是this指的是调用函数的那个对象。

一、定义

1、this是函数内部的一个特殊对象(或this引用)--它引用的是函数据以执行的环境对象。

2、this引用是一种在JavaScript的代码中随时都可以使用的只读变量。 this引用 引用(指向)的是一个对象,它有着会根据代码上下文语境自动改变其引用对象的特性。它的引用规则如下:

• 在最外层代码中,this引用 引用的是全局对象。

• 在函数内,this引用根据函数调用的方式的不同而有所不同。如下

1)构造函数的调用--this引用 引用的是所生成的对象

2)方法调用--this引用 引用的是接收方对象

3)apply或call调用--this引用 引用的是有apply或call的参数指定的对象

4)其他方式的调用--this引用 引用的是全局对象

二、根据以上所述及网上的相关资料,this对象(引用)的使用情况总结如下:

JavaScript是动态语言,this关键字在执行的时候才能确定是谁。所以this永远指向调用者,即对“调用对象”的引用。简单点说就是调用的方法属于哪个对象,this就指向那个对象。根据函数调用方式的不同,this可以 指向全局对象,当前对象,或其他任意对象。

1、全局函数调用,全局函数中的this会指向全局对象window。(函数调用模式)

//代码清单1
<script type="text/javascript">
var message = "this in window"; //这一句写在函数外面和里面是一样效果
function func() {
if(this == window){
alert("this == window"); 
alert(message);
this.methodA = function() {
alert("I'm a function");
}
}
}
func(); //如果不调用func方法,则里面定义的属性或方法会取不到 
methodA();
</script>

func()的调用结果为this == window, this in window

methodA()的调用结果为I'm a function

2、构造函数调用,即使用new的方式实例化一个对象,this会指向通过构造函数生成的对象。(构造器调用模式)

代码清单2

<script type="text/javascript">
function Func() {
if (this == window) {
alert("this == window");
}
else {
alert("this != window");
}
this.fieldA = "I'm a field";
alert(this);
}
var obj = new Func();
alert(obj.fieldA); //this指向的是对象obj
</script>

3、对象方法的调用,this指向当前对象。任何函数,只要该函数被当做一个对象的方法使用或赋值时,该函数内部的this都是对该对象本身的引用。也可理解为this写在一个普通对象中,this指向的就是对象本身。(方法调用模式)

(方法的定义: 作为对象属性的函数称为方法)

//代码清单3
<script type="text/javascript">
var obj = {
x: 3,
doit: function(){
if(this == window){
alert("this == window");
}else{
alert("method is called: " + this.x);
}
}
};
obj.doit(); //this指向的是对象obj
</script>

4、通过apply或call方法调用,this指向传入的对象。

apply 或call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。 (apply调用模式)

//代码清单4
<script type="text/javascript">
var obj = {
x: 3,
doit: function(){
alert("method is called: " + this.x);
}
};
var obj2 = {x: 4};
obj.doit(); //3,this指向obj
obj.doit.apply(obj2); //4,this指向obj2
obj.doit.call(obj2); //4,this指向obj2
</script>

5、原型链中的this --原型对象及构造函数中的this指向新创建的实例对象。使用prototype扩展方法可以使用this获取到源对象的实例,私有字段无法通过原型链获取。

//代码清单5
<script type="text/javascript">
function Func() {
this.fieldA = "I'm a field";
var privateFieldA = "I'm a var";
}
Func.prototype = {
ExtendMethod: function(str) {
alert(str + " :" + this.fieldA);
alert(privateFieldA); //出错,私有字段无法通过原型链获取。
}
};
var obj = new Func();
obj.ExtendMethod("From prototype"); //此时构造函数及原型链中的this指向对象obj
</script>

6、闭包中的this --闭包:写在function中的function,this指向全局对象window。

6.1 对象中的闭包

//代码清单6
<script type="text/javascript">
var name = "The window";
var obj = {
name: "My Object",
getNameFunc: function(){
return function(){
return this.name;
}
}
};
alert(obj.getNameFunc()()); //The window
</script>

此时,闭包中的this指向全局对象window,只能取到全局对象的属性。那么对象内部的属性(外部函数的变量)要想访问又怎么办呢? 把外部函数的this对象保存在一个闭包能访问的变量就可以了。看如下代码:

//代码清单7
<script type="text/javascript">
var name = "The window";
var obj = {
name: "My Object",
getNameFunc: function(){
var that = this;
return function(){
return that.name;
}
}
};
alert(obj.getNameFunc()()); //My object
</script>

将外部函数的this赋值给that变量,就能读取到外部函数的变量。

6.2 不管是直接引用function,还是实例化一个function,其返回的闭包函数里的this都是指向window。

//代码清单8
<script type="text/javascript">
function a() {
alert(this == window);
var that = this;
var func = function() {
alert(this == window);
alert(that);
};
return func;
}
var b = a();
b(); //true, true, [object Window]
var c = new a();
c(); //false, true, [object object]
</script>

7、函数使用bind()方法绑定一个对象,this会指向传给bind()函数的值。

//代码清单9
<script type="text/javascript">
window.color = "red";
var obj = {color: "blue"};
function sayColor(){
alert(this.color);
}
var objSayColor = sayColor.bind(obj);
objSayColor(); //blue
</script>

8、内嵌在HTML元素中的脚本段,this指向元素本身

//代码清单10
<div onclick="test(this)" id="div">Click Me</div>
<script type="text/javascript">
function test(obj) {
alert(obj); //[object HTMLDivElement]
}
</script>

9、写在script标签中:this就是指全局对象window。这个跟第一点的全局函数调用的全局变量一样。

以上所述是小编给大家介绍的JavaScript中的this引用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
How to Auto Include a Javascript File
Feb 02 Javascript
JavaScript中各种编码解码函数的区别和注意事项
Aug 19 Javascript
用javascript为页面添加天气显示实现思路及代码
Dec 02 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
jquery实现左右无缝轮播图
Jul 31 Javascript
jQuery  ready方法实现原理详解
Oct 19 Javascript
解决Window10系统下Node安装报错的问题分析
Dec 13 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
基于JSON数据格式详解
Aug 31 Javascript
详解如何在Vue里建立长按指令
Aug 20 Javascript
JavaScript前端开发时数值运算的小技巧
Jul 28 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
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
基于JavaScript实现在新的tab页打开url
Aug 04 #Javascript
You might like
PHP的error_reporting错误级别变量对照表
2014/07/08 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
也说JavaScript中String类的replace函数
2011/09/22 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
Axios学习笔记之使用方法教程
2017/07/21 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
少女风vue组件库的制作全过程
2019/05/15 Javascript
Python Web服务器Tornado使用小结
2014/05/06 Python
python爬取足球直播吧五大联赛积分榜
2018/06/13 Python
用Python实现读写锁的示例代码
2018/11/05 Python
python pygame模块编写飞机大战
2018/11/20 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
Python安装whl文件过程图解
2020/02/18 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
HTML中meta标签及Keywords
2020/04/15 HTML / CSS
水果花束:Fruit Bouquets
2017/12/20 全球购物
学生的自我鉴定范文
2013/10/24 职场文书
高中毕业生生活的自我评价
2013/12/08 职场文书
公司周年庆典邀请函
2014/01/12 职场文书
社区党员先进事迹
2014/01/22 职场文书
心理咨询承诺书
2014/05/20 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
详解Python 3.10 中的新功能和变化
2021/04/28 Python
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python