JS中this的指向
时间:2022-07-24
本文章向大家介绍JS中this的指向,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
JS中this的指向
this
的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this
到底指向谁,实际上this
的最终指向的是那个调用它的对象。
实例
定义函数与对象并调用,注意只有调用函数才会使this
指向调用者,但箭头函数除外。
function s(){
console.log(this);
}
// window中直接调用 // 非 use strict
s(); // Window // 等同于window.s(),调用者为window
// window是Window的一个实例 // window instanceof Window //true
// 新建对象s1
var s1 = {
t1: function(){ // 测试this指向调用者
console.log(this); // s1
s(); // Window // 此次调用仍然相当 window.s(),调用者为window
},
t2: () => { // 测试箭头函数,this并未指向调用者
console.log(this);
},
t3: { // 测试对象中的对象
tt1: function() {
console.log(this);
}
},
t4: { // 测试箭头函数以及非函数调用this并未指向调用者
tt1: () => {
console.log(this);
}
},
t5: function(){ // 测试函数调用时箭头函数的this的指向,其指向了上一层对象的调用者
return {
tt1: () => {
console.log(this);
}
}
}
}
s1.t1(); // s1对象 // 此处的调用者为 s1 所以打印对象为 s1
s1.t2(); // Window
s1.t3.tt1(); // s1.t3对象
s1.t4.tt1(); // Window
s1.t5().tt1(); // s1对象
比较特殊的例子,我们调用同一个方法,但是得到的this
是不同的,要注意实际上this
的最终指向的是那个调用它的对象
var s1 = {
t1: function(){
console.log(this);
}
}
s1.t1(); // s1对象
var p = s1.t1;
p(); // Window
// 注意此时将方法赋值给了p,此时直接调用p得到的this是Window
// 其实这个例子也并不是很特殊,因为函数也是一个对象,此时p是被赋值了一个函数
console.log(p); // ƒ (){console.log(this);}
// 而此函数是被window调用的,由此,this指向了window
改变this指向
使用 apply、call、bind可以改变this的指向,可以参考
https://github.com/WindrunnerMax/EveryDay/blob/master/JavaScript/apply%E3%80%81call%E3%80%81bind.md
- 黑产是如何强刷用户银行卡8.1万元的?
- Spring 必知概念(二)
- 利用iText 组件导出PDF
- 利用POI组件导出Excel的简单示例
- MongoDB 整合spring-data-jpa,spring 4.x
- 【微信开发】 红包接口开发
- 【微信开发】 使用单例设计模式 提供AccessToken 和Jsapi_ticket缓存支持
- @ResponseBody响应JSON 406
- tomcat不能运行或共存多个项目
- Spring Task 定时任务
- 如何为机器学习索引,切片,调整 NumPy 数组
- 逆向工程分析:摩托罗拉安全摄像头究竟有多不安全?
- 【maven学习】 利用Profile构建不同环境的部署包
- 如何写好一份渗透测试报告?
- 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 数组属性和方法
- Blender+Geant4一文入门3D模型文件导入
- Geant4官网虚拟机的完全使用入门
- VCS入门教程(四)
- VCS入门教程(三)
- VCS入门教程(二)
- VCS入门教程(一)
- WebRTC架构图说明
- java安全编码指南之:Mutability可变性
- RocketMQ 消息丢失场景分析及如何解决!
- Gopro Ardunio控制库.3
- GoPro Arduino控制库.阅读源码.1
- [漏洞复现] 二.Windows远程桌面服务漏洞(CVE-2019-0708)复现及详解
- 本地scratch-gui和blockly安装
- 用Python打造一款文件搜索工具,所有功能自己定义!
- 解决SSH登录缓慢