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 条评论
登录 后参与评论

相关文章

来自专栏青玉伏案

算法与数据结构(十三) 冒泡排序、插入排序、希尔排序、选择排序(Swift3.0版)

本篇博客中的代码实现依然采用Swift3.0来实现。在前几篇博客连续的介绍了关于查找的相关内容, 大约包括线性数据结构的顺序查找、折半查找、插值查找、Fibon...

1817
来自专栏LEo的网络日志

python技巧分享(十)

41313
来自专栏数据结构与算法

P2085 最小函数值(minval)

题目描述 有n个函数,分别为F1,F2,...,Fn。定义Fi(x)=Aix^2+Bix+Ci (x∈N*)。给定这些Ai、Bi和Ci,请求出所有函数的所有函数...

3115
来自专栏小筱月

JavaScript delete 操作符

如果 expression 不是一个对象的引用,那么 delete 则不会起任何作用

1025
来自专栏前端迷

在循环内使用闭包(Closures)

闭包的本质是一个内部函数访问其作用域之外的变量。闭包可以用于实现诸如 私有变量 和 创建工厂函数之类的东西。

672
来自专栏Golang语言社区

厚土Go学习笔记 | 16. go语言有指针 没有指针运算

指针内其实就是保存了一个变量地址。 var p *int 这行代码声明了一个 int 类型的指针 p i := 42 p = &i & 符号是取地址符,&i 代...

34110
来自专栏云霄雨霁

追踪收集解决方法

1490
来自专栏Java成长之路

动态代理详解

代理 是常用的基本设计模式之一,在某些情况下,一个客户不想或者不能直接引用一个对 象,此时可以通过一个称之为“代理”的第三者来实现 间接引用。代理对象可以在客户...

701
来自专栏Golang语言社区

Golang 基本语法学习笔记之流程控制

条件判断 //实例 func fn01(x int) int { var a int if a = 4; x == 0 {...

26912
来自专栏达摩兵的技术空间

js代码规范

20. 判断是否相等时候 采用=== 判断包括类型的相等 21. 尽量使用语法严格模式 消除代码之中的不友好;代码运行更快 ;保证运行的安全 ;为新版本的...

863

扫码关注云+社区