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 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
javascript 获取select下拉列表值的代码
Sep 07 Javascript
JavaScript实用技巧(一)
Aug 16 Javascript
js下通过prototype扩展实现indexOf的代码
Dec 08 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
用js格式化金额可设置保留的小数位数
May 09 Javascript
Vuex 进阶之模块化组织详解
Jan 12 Javascript
js this 绑定机制深入详解
Apr 30 Javascript
JS实现密码框效果
Sep 10 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 Javascript
react如何快速设置文件路径别名
Apr 28 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
基于JavaScript实现在新的tab页打开url
Aug 04 #Javascript
You might like
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
php短址转换实现方法
2015/02/25 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
需要做特殊处理的DOM元素属性的访问
2010/11/05 Javascript
jquery中ajax调用json数据的使用说明
2011/03/17 Javascript
如何使用jquery easyui创建标签组件
2015/11/18 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
jQuery上传插件webupload使用方法
2017/08/01 jQuery
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
React SSR样式及SEO的实践
2018/10/22 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
深入理解javascript中的this
2021/02/08 Javascript
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
对python3 urllib包与http包的使用详解
2018/05/10 Python
python hbase读取数据发送kafka的方法
2018/12/27 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
python合并多个excel文件的示例
2020/09/23 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
实习评语
2013/12/16 职场文书
建筑工地质量标语
2014/06/12 职场文书
文明礼仪标语
2014/06/13 职场文书
总结一些Java常用的加密算法
2021/06/11 Java/Android
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python
Windows server 2016服务器基本设置
2022/08/14 Servers