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 相关文章推荐
实例:尽可能写友好的Javascript代码
Oct 09 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
Nov 17 Javascript
IE中JS跳转丢失referrer问题的2个解决方法
Jul 18 Javascript
js实现进度条的方法
Feb 13 Javascript
Bootstrap select多选下拉框实现代码
Dec 23 Javascript
微信小程序自定义组件
Aug 16 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
layui禁用侧边导航栏点击事件的解决方法
Sep 25 Javascript
CountUp.js数字滚动插件使用方法详解
Oct 17 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 Javascript
React如何使用axios请求数据并把数据渲染到组件
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
基于JavaScript实现在新的tab页打开url
Aug 04 #Javascript
You might like
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
php从数据库中获取数据用ajax传送到前台的方法
2018/08/20 PHP
JavaScript类和继承 prototype属性
2010/09/03 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
javascript 保存文件到本地实现方法
2012/11/29 Javascript
js获取input标签的输入值实现代码
2013/08/05 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
js中this用法实例详解
2015/05/05 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
基于jQuery日历插件制作日历
2016/03/11 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
Python采用raw_input读取输入值的方法
2014/08/18 Python
Python基于回溯法子集树模板解决全排列问题示例
2017/09/07 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
使用pandas的DataFrame的plot方法绘制图像的实例
2018/05/24 Python
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
Python可迭代对象操作示例
2019/05/07 Python
wxpython+pymysql实现用户登陆功能
2019/11/19 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
Python decorator拦截器代码实例解析
2020/04/04 Python
通过代码实例了解Python sys模块
2020/09/14 Python
阿联酋网上花店:Ferns N Petals
2018/02/14 全球购物
运动会广播稿20字
2014/02/18 职场文书
《雪儿》教学反思
2014/04/17 职场文书
安全目标责任书
2014/07/22 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
党的群众路线教育实践活动个人对照检查材料(乡镇)
2014/11/05 职场文书
综合测评个人总结
2015/03/03 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书
MySQL配置主从服务器(一主多从)
2021/08/07 MySQL
Docker安装MySql8并远程访问的实现
2022/07/07 Servers