JavaScript中的this详解
时间:2022-05-04
本文章向大家介绍JavaScript中的this详解,主要内容包括查看this指向的一句话法则:、1)全局函数中的this指向、2)对象方法中的this指向、3)绑定函数时的this、4)绑定函数时的this、5)鼠标单击事件等进行函数的绑定时,this的指向、6)setTimeout等传参形式的this指向、7)改变this的方法:call,apply、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
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]);//同上
- ASP.NET MVC路由扩展:链接和URL的生成
- .NET Core采用的全新配置系统[10]: 配置的同步机制是如何实现的?
- C+实现神经网络之贰—前向传播和反向传播
- 通过重建Hosting系统理解HTTP请求在ASP.NET Core管道中的处理流程[上]:采用管道处理请求
- 2017奇葩机器人大盘点:一言不合让你变瞎
- 【机器学习实战】第14章 利用SVD简化数据
- 异步数据存储声明
- 区块链学堂——公有链、私有链、联盟链、侧链、互联链
- 人工智能将让我们更擅长辩论
- ASP.NET路由系统实现原理:HttpHandler的动态映射
- 腾讯、卓健科技、恩泽医疗合力打造“互联网+智慧医院”
- 区块链,不是比特币(1)
- 小程序缓存 删不删你都该知道的事儿
- 32位 or 64位:Apache CloudStack系统VM架构选择
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Redis并发问题
- StackExchange.Redis通用封装类分享
- Invoke 和 BeginInvoke 的区别
- 知识卡片 生成特定形状的词云
- Redis-五种数据类型解析
- MYSQL一次千万级连表查询优化
- mysql explain用法和结果的含义
- PrimeVue 入门
- 使用神经网络为图像生成标题
- 详解匈牙利算法与二分图匹配
- clusterProfiler到底有多难安装呢
- 有些包卸载了就回不去了
- 使用 Vue-CLI 3.x 快速搭建「Vue + TS + Kbone + Kbone-UI + 云开发」 项目
- 「R」R Docker 教程(续)
- 为什么R4.0版本内置的R包那么多