【面试题】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类上 ...
随机推荐
- Python列表解析式的正确使用方式
先来逼逼两句: Python 是一种极其多样化和强大的编程语言!当需要解决一个问题时,它有着不同的方法.在本文中,将会展示列表解析式 (List Comprehension).我们将讨论如何使用它?什 ...
- Unity3D学习笔记7——GPU实例化(2)
目录 1. 概述 2. 详论 2.1. 实现 2.2. 解析 3. 参考 1. 概述 在上一篇文章<Unity3D学习笔记6--GPU实例化(1)>详细介绍了Unity3d中GPU实例化的 ...
- 01. DOCKER - 容器技术
什么是容器 对于容器这个词,大部分人第一时间想到的肯定是生活中常见瓶瓶罐罐,用来装水的东西.它给人的第一感觉就是能 "装". 而在 IT 领域,Container 就被直译为容器, ...
- MVCC - Read View的可见性判断理解
读了 @SnailMann大佬[MySQL笔记]正确的理解MySQL的MVCC及实现原理 收益颇丰,非常感谢! 但对其中如何判断事务是否可见性还是不太理解,于是作了本文,在原博客基础上,举例画图论证. ...
- Template -「平衡树」
Fhq-Treap. // Fhq-Treap const int MAXN = 1e5 + 5; struct Fhq_Treap { #define Lson Tr[p].l #define Rs ...
- 控制台字体怎么改为console?
windows控制台窗口在中文版下没有console字体,如果要使用console的话就必须先将窗口转换为英文版. 1.win+R进入运行窗口,然后cmd进入命令窗口 2.在命令行窗口输入 chcp ...
- 【高并发】通过源码深度分析线程池中Worker线程的执行流程
大家好,我是冰河~~ 在<高并发之--通过ThreadPoolExecutor类的源码深度解析线程池执行任务的核心流程>一文中我们深度分析了线程池执行任务的核心流程,在ThreadPool ...
- list集合的介绍和常用方法
List接口介绍 java.util.List接口继承自Collection接口,是单列集合的一个重要分支,习惯性地会将实现了List接口的对象成为List集合.在List集合中允许出现重复的元素,所 ...
- 题解 P2657 【[SCOI2009] windy 数】
数位 dp. // 数位 dp 其实是爆搜加记忆化 #include<iostream> #include<cstring> #include<cmath> usi ...
- DP 优化方法合集
0. 前言 写完这篇文章后发现自己对于 DP 的优化一窍不通,所以补了补 DP 的一些优化,写篇 blog 总结一下. 1. 单调队列/单调栈优化 1.2 算法介绍 这应该算是最基础的 DP 优化方法 ...