【面试题】JS改变this指向的三种方法
一、this指向
this随处可见,一般谁调用,this就指向谁。this在不同环境下,不同作用下,表现的也不同。
以下几种情况,this都是指向window
1、全局作用下,this指向的是window
console.log(window);
console.log(this);
console.log(window == this); // true
2、函数独立调用时,函数内部的this也指向window
function fun() {
console.log('我是函数体');
console.log(this); // Window
}
fun();
3、被嵌套的函数独立调用时,this默认指向了window
function fun1() {
function fun2() {
console.log('我是嵌套函数');
console.log(this); // Window
}
fun2();
}
fun1();
4、自调执行函数(立即执行)中内部的this也是指向window
(function() {
console.log('立即执行');
console.log(this); // Window
})()
需要额外注意的是:
- 构造函数中的this,用于给类定义成员(属性和方法)
- 箭头函数中没有this指向,如果在箭头函数中有,则会向上一层函数中查找this,直到window
二、改变this指向
1、call() 方法
call() 方法的第一个参数必须是指定的对象,然后方法的原参数,挨个放在后面。
(1)第一个参数:传入该函数this执行的对象,传入什么强制指向什么;
(2)第二个参数开始:将原函数的参数往后顺延一位
用法: 函数名.call()
function fun() {
console.log(this); // 原来的函数this指向的是 Window
}
fun();
function fun(a, b) {
console.log(this); // this指向了输入的 字符串call
console.log(a + b);
}
//使用call() 方法改变this指向,此时第一个参数是 字符串call,那么就会指向字符串call
fun.call('call', 2, 3) // 后面的参数就是原来函数自带的实参
2、apply() 方法
apply() 方法的第一个参数是指定的对象,方法的原参数,统一放在第二个数组参数中。
(1)第一个参数:传入该函数this执行的对象,传入什么强制指向什么;
(2)第二个参数开始:将原函数的参数放在一个数组中
用法: 函数名.apply()
function fun() {
console.log(this); // 原来的函数this指向的是 Window
}
fun();
function fun(a, b) {
console.log(this); // this指向了输入的 字符串apply
console.log(a + b);
}
//使用apply() 方法改变this指向,此时第一个参数是 字符串apply,那么就会指向字符串apply
fun.apply('apply', [2, 3]) // 原函数的参数要以数组的形式呈现
3、bind() 方法
bind() 方法的用法和call()一样,直接运行方法,需要注意的是:bind返回新的方法,需要重新
调用
是需要自己手动调用的
用法: 函数名.bind()
function fun() {
console.log(this); // 原来的函数this指向的是 Window
}
fun();
function fun(a, b) {
console.log(this); // this指向了输入的 字符串bind
console.log(a + b);
}
//使用bind() 方法改变this指向,此时第一个参数是 字符串bind,那么就会指向字符串bind
let c = fun.bind('bind', 2, 3);
c(); // 返回新的方法,需要重新调用
// 也可以使用下面两种方法进行调用
// fun.bind('bind', 2, 3)();
// fun.bind('bind')(2, 3);
【面试题】JS改变this指向的三种方法的更多相关文章
- js 改变this指向的三种方法 bind call apply
先了解下bind call apply 的注意点 bind 需要手动调用 第一个参数 this 要指向的对象,后面是 散列的参数 call 不需要手动调用 第一个参数 this 要指向的对象,后面是 ...
- ES5中改变this指向的三种方法
ES5中提供了三种改变函数中this指针指向的方法,分别如下 1.call() var obj = {username:"孙悟空"}; //没有任何修饰的调用函数,函数中的this ...
- 改变this指向的三种方法
call.apply.bind三者为改变this指向的方法. 共同点:第一个参数都为改变this的指针.若第一参数为null/undefined,this默认指向window call(无数个参数) ...
- js改变css样式的三种方法
共用代码: <div id="div">this is a div</div> var div=document.getElementById('div') ...
- (转)在网页中JS函数自动执行常用三种方法
原文:http://blog.sina.com.cn/s/blog_6f6b4c3c0100nxx8.html 在网页中JS函数自动执行常用三种方法 在网页中JS函数自动执行常用三种方法 在HTML中 ...
- js字符串转换为数字的三种方法。(转换函数)(强制类型转换)(利用js变量弱类型转换)
js字符串转换为数字的三种方法.(转换函数)(强制类型转换)(利用js变量弱类型转换) 一.总结 js字符串转换为数字的三种方法(parseInt("1234blue"))(Num ...
- 在网页中JS函数自动执行常用三种方法
在网页中JS函数自动执行常用三种方法 在HTML中的Head区域中,有如下函数: <SCRIPT LANGUAGE="JavaScript"> function ...
- js中this指向的三种情况
js中this指向的几种情况一.全局作用域或者普通函数自执行中this指向全局对象window,普通函数的自执行会进行预编译,然后预编译this的指向是window //全局作用域 console.l ...
- JS模拟实现封装的三种方法
前 言 继承是使用一个子类继承另一个父类,那么子类可以自动拥有父类中的所有属性和方法,这个过程叫做继承! JS中有很多实现继承的方法,今天我给大家介绍其中的三种吧. 1.在 Object类上 ...
随机推荐
- netty系列之:kequeue传输协议详解
目录 简介 KQueueEventLoopGroup KQueueEventLoop KQueueServerSocketChannel和KQueueSocketChannel 总结 简介 在前面的章 ...
- 详解HashMap源码解析(下)
上文详解HashMap源码解析(上)介绍了HashMap整体介绍了一下数据结构,主要属性字段,获取数组的索引下标,以及几个构造方法.本文重点讲解元素的添加.查找.扩容等主要方法. 添加元素 put(K ...
- 基于YCbCr色彩模型的简易肤色识别器
一.实验方法 实验共选取了12张图像,利用画笔工具在每幅图像上选取5个点,并分别记录RGB值.取点方式如下图所示: 总共70个点,R,G,B的值分别如下表所示: RGB色彩模型和YCbC ...
- jupyter 反向代理配置
抓了下包,看了一下WS连不上,参考这个,问题解决 location / { proxy_pass http://127.0.0.1:8813/; # JUPYTER_PORT 为 Jupyter 运行 ...
- NOI / 2.1基本算法之枚举 1749:数字方格
描述: 如上图,有3个方格,每个方格里面都有一个整数a1,a2,a3.已知0 <= a1, a2, a3 <= n,而且a1 + a2是2的倍数,a2 + a3是3的倍数, a1 + a2 ...
- DP问题大合集
引入 动态规划(Dynamic Programming,DP,动规),是求解决策过程最优化的过程.20世纪50年代初,美国数学家贝尔曼(R.Bellman)等人在研究多阶段决策过程的优化问题时,提出了 ...
- 第三天python3 字典
字典 dict 特点:key-value键值对的数据的集合 可变的.无序的.key不重复:非线性结构: 字典的初始化 d=dict() 或者 d = { } dict(**kwargs) 使用n ...
- 开发中常用的两个JSON方法
参考文章:https://juejin.cn/post/6844903711127404557 在前端开发过程中,有两个非常有用的方法来处理 JSON 格式的内容: JSON.parse(string ...
- Modbus转BACnet IP网关
BACnet是楼宇自动化和控制网络数据通信协议的缩写.它是为楼宇自动化网络开发的数据通信协议 根据1999年底互联网上楼宇自动化网络的信息,全球已有数百家国际知名制造商支持BACnet,包括楼宇自 ...
- 记一次Linux server偶发CPU飙升问题的跟进与解决
背景 进入6月后,随着一个主要功能版本api的上线,服务端的QPS翻了一倍,平时服务器的CPU使用稳定在30%上下,高峰期则在60%上下,但是偶尔会有单台机器出现持续数分钟突然飙到90%以上,导致大量 ...