一、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);

若对您有帮助,请点击跳转到B站一键三连哦!感谢支持!!!

【面试题】JS改变this指向的三种方法的更多相关文章

  1. js 改变this指向的三种方法 bind call apply

    先了解下bind call apply 的注意点 bind 需要手动调用 第一个参数 this 要指向的对象,后面是 散列的参数 call 不需要手动调用 第一个参数 this 要指向的对象,后面是 ...

  2. ES5中改变this指向的三种方法

    ES5中提供了三种改变函数中this指针指向的方法,分别如下 1.call() var obj = {username:"孙悟空"}; //没有任何修饰的调用函数,函数中的this ...

  3. 改变this指向的三种方法

    call.apply.bind三者为改变this指向的方法. 共同点:第一个参数都为改变this的指针.若第一参数为null/undefined,this默认指向window call(无数个参数) ...

  4. js改变css样式的三种方法

    共用代码: <div id="div">this is a div</div> var div=document.getElementById('div') ...

  5. (转)在网页中JS函数自动执行常用三种方法

    原文:http://blog.sina.com.cn/s/blog_6f6b4c3c0100nxx8.html 在网页中JS函数自动执行常用三种方法 在网页中JS函数自动执行常用三种方法 在HTML中 ...

  6. js字符串转换为数字的三种方法。(转换函数)(强制类型转换)(利用js变量弱类型转换)

    js字符串转换为数字的三种方法.(转换函数)(强制类型转换)(利用js变量弱类型转换) 一.总结 js字符串转换为数字的三种方法(parseInt("1234blue"))(Num ...

  7. 在网页中JS函数自动执行常用三种方法

    在网页中JS函数自动执行常用三种方法 在HTML中的Head区域中,有如下函数: <SCRIPT   LANGUAGE="JavaScript">   function ...

  8. js中this指向的三种情况

    js中this指向的几种情况一.全局作用域或者普通函数自执行中this指向全局对象window,普通函数的自执行会进行预编译,然后预编译this的指向是window //全局作用域 console.l ...

  9. JS模拟实现封装的三种方法

      前  言  继承是使用一个子类继承另一个父类,那么子类可以自动拥有父类中的所有属性和方法,这个过程叫做继承!  JS中有很多实现继承的方法,今天我给大家介绍其中的三种吧. 1.在 Object类上 ...

随机推荐

  1. netty系列之:kequeue传输协议详解

    目录 简介 KQueueEventLoopGroup KQueueEventLoop KQueueServerSocketChannel和KQueueSocketChannel 总结 简介 在前面的章 ...

  2. 详解HashMap源码解析(下)

    上文详解HashMap源码解析(上)介绍了HashMap整体介绍了一下数据结构,主要属性字段,获取数组的索引下标,以及几个构造方法.本文重点讲解元素的添加.查找.扩容等主要方法. 添加元素 put(K ...

  3. 基于YCbCr色彩模型的简易肤色识别器

    一.实验方法 实验共选取了12张图像,利用画笔工具在每幅图像上选取5个点,并分别记录RGB值.取点方式如下图所示:        总共70个点,R,G,B的值分别如下表所示: RGB色彩模型和YCbC ...

  4. jupyter 反向代理配置

    抓了下包,看了一下WS连不上,参考这个,问题解决 location / { proxy_pass http://127.0.0.1:8813/; # JUPYTER_PORT 为 Jupyter 运行 ...

  5. NOI / 2.1基本算法之枚举 1749:数字方格

    描述: 如上图,有3个方格,每个方格里面都有一个整数a1,a2,a3.已知0 <= a1, a2, a3 <= n,而且a1 + a2是2的倍数,a2 + a3是3的倍数, a1 + a2 ...

  6. DP问题大合集

    引入 动态规划(Dynamic Programming,DP,动规),是求解决策过程最优化的过程.20世纪50年代初,美国数学家贝尔曼(R.Bellman)等人在研究多阶段决策过程的优化问题时,提出了 ...

  7. 第三天python3 字典

    字典 dict 特点:key-value键值对的数据的集合    可变的.无序的.key不重复:非线性结构: 字典的初始化 d=dict() 或者 d = { } dict(**kwargs) 使用n ...

  8. 开发中常用的两个JSON方法

    参考文章:https://juejin.cn/post/6844903711127404557 在前端开发过程中,有两个非常有用的方法来处理 JSON 格式的内容: JSON.parse(string ...

  9. Modbus转BACnet IP网关

    BACnet是楼宇自动化和控制网络数据通信协议的缩写.它是为楼宇自动化网络开发的数据通信协议   根据1999年底互联网上楼宇自动化网络的信息,全球已有数百家国际知名制造商支持BACnet,包括楼宇自 ...

  10. 记一次Linux server偶发CPU飙升问题的跟进与解决

    背景 进入6月后,随着一个主要功能版本api的上线,服务端的QPS翻了一倍,平时服务器的CPU使用稳定在30%上下,高峰期则在60%上下,但是偶尔会有单台机器出现持续数分钟突然飙到90%以上,导致大量 ...