JavaScript中的this详解

HTML5学堂:this属于JS的底层知识,了解this之后,能够实现一些基本的功能,但是感觉最重要的是,this是面向对象必不可少的组成部分,如果希望能够逐渐的掌握面向对象,this必然是不可少的。

查看this指向的一句话法则:

永远指向其所在函数的所有者如果没有所有者时,指向window。

理解this的要点:关键在于将函数与函数名分开看待。同一个函数,在不同的执行方法下,会有不同的效果。

如何来进行理解呢,来看几个实例

1)全局函数中的this指向

function test(){
alert(this);//test这个函数没有所有者,因此此时this指向的是window
}

2)对象方法中的this指向

h5course.test = function(){
alert(this==h5course);//输出true,h5course.test表示的是test这个函数的所有者是对象h5course,因此this应当是指向h5course的
}

3)绑定函数时的this

如下代码,test1和test2中this并不相同

var test2 = h5course.test1;//test2这个函数并没有所有者,在此,test2虽然调用了test1这个函数,但是this仍然指向window,而不是指向test1的拥有者:对象h5course
test2();
h5course.test1 = function(){
alert(this===h5course);
}

这便是上面所说的,要将函数与函数名分开看待

4)绑定函数时的this

此时如果我们对3)中的代码进行一些修改:

function test () {
alert(this === h5course);
}
test();//this指向window
var h5course = {};
h5course.test2 = test;
h5course.test2();//此时test2的所有者为h5course,而test没有所有者,this在此时指向的是h5course
alert(h5course.test2);

5)鼠标单击事件等进行函数的绑定时,this的指向

document.onclick=function(){
alert(this===document);//输出为true,onclick事件的拥有者是document。因此,此处this指向document。我们可以将document.onclick理解为一个对象方法,如同例4中的o.test2一样。
}

6)setTimeout等传参形式的this指向

不要去看传的参数中函数的所有者,看执行函数的所有var obj = {};

obj.x = 1;
obj.y = 2;
window.x = 100;
window.y = 200;
obj.add = function () {
alert(this.x + this.y);
}
setTimeout(obj.add,1000);//this指向window,输出为300
setTimeout(function(){//this指向obj,输出为3
obj.add();
},1000);

7)改变this的方法:call,apply

call和apply(两者用于改变函数的作用域)

var oo = {};
oo.test3 = function(){
alert(this == oo);//返回false
}
var h5course = {};
oo.test3.call(h5course);//this指向的是()内的第一个参数,此处为h5course






window.x = 100;
var oo = {};
oo.test3 = function(y,z,k){//函数的参数与apply、call中第二个以及之后的参数相对应
alert(this.x+y+z+k);
}
var arr=[2,3,4]
oo.test3.call(window,2,3,4);//this指向window,输出为109
oo.test3.apply(window,[2,3,4]);//同上,使用apply进行元素罗列时需要使用中括号[]将所有参数包裹起来
oo.test3.apply(window,arr);//同上,使用apply对于一个数组的访问很简单,使用数组名称即可
oo.test3.call(window,arr[0],arr[1],arr[2]);//同上

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏haifeiWu与他朋友们的专栏

Python基础(一)

以#开头的语句是注释,解释器会忽略掉注释。其他每一行都是一个语句,当语句以冒号:结尾时,缩进的语句视为代码块。

925
来自专栏王翔的专栏

ES6基础 数组的扩展

对于那些没有部署 Iterator 接口的类似数组的对象(如普通object),扩展运算符就无法将其转为真正的数组。

262
来自专栏大数据挖掘DT机器学习

Python NLTK 处理原始文本

关于处理原始文本部分导入语句: >>> from __future__ import division >>> import nltk,re,pprint ...

2224
来自专栏知道一点点

sass入门学习篇(二)

一,sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号;另一种就是我们这里使用的scss文件,建议scss.

702
来自专栏和蔼的张星的图像处理专栏

638. 字符同构哈希映射

给定两个字符串 s 和 t ,确定它们是否是同构的。 两个字符串是同构的如果 s 中的字符可以被替换得到 t。 所有出现的字符必须用另一个字符代替,同时保留...

413
来自专栏pangguoming

理解js中的new

new 操作符 在有上面的基础概念的介绍之后,在加上new操作符,我们就能完成传统面向对象的class + new的方式创建对象,在Javascript中,我们...

3064
来自专栏林德熙的博客

正则表达式30分钟入门教程

30分钟内让你明白正则表达式是什么,并对它有一些基本的了解,让你可以在自己的程序或网页里使用它。

200
来自专栏我和PYTHON有个约会

11.程序编程基础5:输入输出

python提供了3种输入输出标准文件对象,分别为标准输入、标准输出和标准错误;分别对应了sys模块中的sys.stdin,sys.stdout,sys.std...

742
来自专栏闪电gogogo的专栏

Python——正则表达式

此篇文章结合小甲鱼的笔记和视频整理。 1 编译 Python 通过 re 模块为正则表达式引擎提供一个接口,同时允许你将正则表达式编译成模式对象,并用它们来进行...

24110
来自专栏宏伦工作室

全栈 - 4 Python 先学会基本语法

1837

扫描关注云+社区