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 相关文章推荐
jQuery 使用手册(二)
Sep 23 Javascript
javascript 函数调用的对象和方法
Jul 01 Javascript
设置iframe的document.designMode后仅Firefox中其body.innerHTML为br
Feb 27 Javascript
捕获和分析JavaScript Error的方法
Mar 25 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
面向切面编程(AOP)的理解
May 01 Javascript
JS简单判断函数是否存在的方法
Feb 13 Javascript
神级程序员JavaScript300行代码搞定汉字转拼音
May 20 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
Vue Render函数原理及代码实例解析
Jul 30 Javascript
vue-element-admin项目导入和导出的实现
May 21 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
phpQuery占用内存过多的处理方法
2013/11/13 PHP
php实现查看邮件是否已被阅读的方法
2013/12/03 PHP
php实现当前页面点击下载文件的实例代码
2016/11/16 PHP
PHP开发之用微信远程遥控服务器
2018/01/25 PHP
Code: write(s,d) 输出连续字符串
2007/08/19 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
js导出txt示例代码
2014/01/14 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
3分钟快速搭建nodejs本地服务器方法运行测试html/js
2017/04/01 NodeJs
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
vue组件添加事件@click.native操作
2020/10/30 Javascript
详解Typescript里的This的使用方法
2021/01/08 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
pycharm 将python文件打包为exe格式的方法
2019/01/16 Python
python交易记录整合交易类详解
2019/07/03 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
Java工程师面试集锦之Spring框架
2013/06/16 面试题
车间操作工岗位职责
2013/12/19 职场文书
教学器材管理制度
2014/01/26 职场文书
幼儿教师研修感言
2014/02/12 职场文书
体育之星事迹材料
2014/05/11 职场文书
计生工作先进事迹
2014/08/15 职场文书
倡议书格式
2014/08/30 职场文书