this 指向 及 改变 _ 笔记版

最新推荐文章于 2023-08-31 21:53:29 发布
最新推荐文章于 2023-08-31 21:53:29 发布
阅读量566 收藏 4
点赞数
分类专栏： 前端 JavaScript 面试题 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_58099903/article/details/118925907
版权
前端 同时被 3 个专栏收录
159 篇文章 29 订阅
订阅专栏
JavaScript
30 篇文章 0 订阅
订阅专栏
面试题
10 篇文章 0 订阅
订阅专栏
本文详细介绍了JavaScript中this关键字的用法，包括在普通调用、对象调用、定时器处理函数、事件处理函数、自执行函数、箭头函数和构造函数中的不同指向。此外，还讲解了如何通过call()、apply()和bind()方法强行改变this指向，并通过实际示例展示了它们的特殊作用。最后，文章通过一个this图例总结了this的关键概念。
摘要由CSDN通过智能技术生成

目录

函数内使用 this 关键字 ： 

1. 普通调用(全局调用) :

2. 对象调用 : 

3. 定时器处理函数 : 

4. 事件处理函数 : 

5. 自执行函数 : 

6. 箭头函数 : 

7. 构造函数 : 

 强行改变 this 指向 : 

1. call( )

2. apply( )

 apply 的 特殊作用 :

3. bind( )

 bind 的 特殊作用 :

this 图例 :

this 是一个 关键字

是一个 使用在 作用域内的 关键字

=> 要么使用在全局

~> this 就是 Window

=> 要么使用在函数内部

~> this 表示的是该函数的 context (执行上下文)

// 0. 全局使用 this
console.log(this)
console.log(window)
console.log(window === this)  // true

函数内使用 this 关键字 ： 

概念 : + **函数内的 this , 和函数的定义方式没有关系, 和函数在哪定义没有关系,

        => 只看函数怎么调用 (箭头函数除外) **

+ 几种调用方式, 决定不同的 this 指向 : 

1. 普通调用(全局调用) :

=> 书写: 函数名( )
=> 该函数内的 this 指向 Window 

// 1. 普通调用
  function fn() {
    console.log('我是全局 fn 函数')
    console.log(this)
    console.log('------fn 函数结束------')
  }
// 标准的 普通调用
// fn 这个函数内的 this => Window
  fn()

2. 对象调用 : 

=> 书写 : 对象名.函数名( )

  ~> 对象名['函数名']( )

  ~> 数组[索引]( )

=> 书写: xxx.函数名( )

=> 该函数内的 this 指向 点 前面的内容

  ~> 也就是那个对象或者数组

// 2. 对象调用
    var obj = {
      name: '我是 obj 对象',
      fn: function () {
        console.log('obj 内的 fn 函数')
        console.log(this)	// Object
        console.log('------fn 函数结束------')
      }
    }
// 标准的 对象调用
// 函数内的 this => obj
    obj.fn()
// 同一个函数, 不同的调用方式, 决定了函数内的 this 指向不一样
    function fn() {
      console.log('fn 函数')
      console.log(this)		
      console.log('------fn 函数结束------')
    }

    var obj = {
      name: '我是 obj 函数',
      // 把 fn 存储的函数地址, 赋值给了 obj 内的 f 成员
      f: fn
    }
// 从此以后, 全局 fn 变量和 obj 内的 f 成员调用的是一个函数
// 调用全局的 fn 函数, 调用方式: 普通调用
  // fn()	// this => Window
// 调用全局的 fn 函数, 调用方式: 对象调用
    obj.f()	// this => Object

3. 定时器处理函数 : 

=> 书写 :
  ~> setTimeout(函数, 数字)
  ~> setInterval(函数, 时间)
=> 该函数内的 this 指向 Window 

function fn() {
      console.log('我是全局 fn 函数')
      console.log(this)    // this => Window
      console.log('------fn 函数结束------')
    }
// 3. 定时器处理函数
// 1000ms 以后执行的是 fn 函数
// 在这里把 fn 函数当做定时器处理函数来使用了
    setTimeout(fn, 1000)

4. 事件处理函数 : 

=> 书写 :

~> 事件源.on事件类型 = 事件处理函数

~> 事件源.addEventListener('事件类型', 事件处理函数)

=> 该函数内的  this  指向  事件源  (谁身上的事件)

function fn() {
      console.log('我是全局 fn 函数')
      console.log(this)    // this => div
      console.log('------fn 函数结束------')
    }
// 4. 事件处理函数
    var box = document.querySelector('div')
// 当你点击 box 元素的时候, 执行 fn 函数
// 此时, 把 fn 函数当做事件处理函数使用了
    box.onclick = fn

5. 自执行函数 : 

=> (function ( ) { })( )

  ~function ( ) { }( )

  !function ( ) { }( )

=> 该函数内的 this 指向 window 

// 5. 自执行函数
(function () {
      console.log(this)   // Window
    })()

6. 箭头函数 : 

=>  this  ~>  上下文  (外部函数的 this)

7. 构造函数 : 

书写 :

=> new 函数名( )

=>  this   ~>   当前实例  (构造函数自动创造出来的那个对象)

构造函数内的 this 指向当前实例

 强行改变 this 指向 : 

+ 不管你本身指向什么位置, 我让你指向哪, 你就得指向哪

function fn(a, b) {
      console.group('fn 函数内的 打印')
      console.log('this : ', this)
      console.log('a : ', a)
      console.log('b : ', b)
      console.groupEnd()
    }
// 0. 普通调用
// 因为是 普通调用
// this => window
// a => 10
// b => 20
    fn(10, 20)

 

1. call( )

        + 语法: 跟随在函数名后面调用

          => 函数名.call( )

          => 对象名.函数名.call( )

        + 意义: 修改 函数内 的 this 指向

        + 参数:

          => 第一个参数 : 要修改的函数内的 this 指向

          => 第二个参数开始 : 依次给函数内每一个形参传递实参

        + 特点: 立即调用函数

        + 用处:

          => 在立即执行的函数时才使用

          => 事件处理函数, 和 定时器处理函数, 一般不会使用这个方法 

function fn(a, b) {
      console.group('fn 函数内的 打印')
      console.log('this : ', this)
      console.log('a : ', a)
      console.log('b : ', b)
      console.groupEnd()
    }
    var obj = {
      name: '我是 obj 对象'
    }
// 因为是 利用 call 调用
// obj 就是 fn 函数内的 this 指向, fn 这个函数内的 this 就是 obj
// 100 就是给 fn 函数的第一个实参, 赋值给了形参 a
// 200 就是给 fn 函数的第二个实参, 赋值给了形参 b
    fn.call(obj, 100, 200)    // a : 100   b : 200

function fn(a, b) {
      console.group('fn 函数内的 打印')
      console.log('this : ', this)
      console.log('a : ', a)    // a: 1000
      console.log('b : ', b)    // b: 2000
      console.groupEnd()
    }
    var arr = [ 100, 200, 300, 400, 500 ]
// 因为是 利用 call 调用 , 并且传递的第一个参数是 arr
// 就是在立即调用 fn 函数的同时, 把 fn 函数内的 this 指向了 arr
// 从第二个参数开始, 1000 赋值给了第一个形参 a
// 2000 赋值给了 第二个形参 b
    fn.call(arr, 1000, 2000)    // a = 1000  b = 2000

2. apply( )

        + 语法: 跟随在函数名后面调用

          => 函数名.apply( )

          => 对象名.函数名.apply( )

        + 意义: 修改 函数内 的 this 指向

        + 参数:

          => 第一个参数: 要修改的函数内的 this 指向

          => 第二个参数: 是一个数组或者伪数组都行

            -> 数组或者伪数组内的每一项依次给函数传递实参

        + 特点 : 立即调用函数

        + 用处:

          => 在立即执行的函数时才使用

          => 事件处理函数, 和 定时器处理函数, 一般不会使用这个方法

        + 特殊作用: 改变给函数传递参数的方式

function fn(a, b) {
      console.group('fn 函数内的 打印')
      console.log('this : ', this)
      console.log('a : ', a)    // a: 100
      console.log('b : ', b)    // b: 200
      console.groupEnd()
    }
    var obj = {
      name: '我是 obj 对象'
    }
// 因为是 利用 apply 调用函数 fn
// 所以 把函数内部的 this 改变成为 obj
// obj 就是 fn 函数内的 this 指向
// 第二个参数传递了一个数组
// 数组中的 [0] 是给 fn 函数的第一个实参, 赋值给了形参 a
// 数组中的 [1] 是给 fn 函数的第二个实参, 赋值给了形参 b
    fn.apply(obj, [100, 200])

 apply 的 特殊作用 :

var arr = [10, 20, 18, 32, -10, 21, 19]
// 我想求 arr 内的最大值
// 利用 apply 方法来改变 给函数传递参数的方式
// apply 第二个参数是一个 数组 或者 伪数组, 里面的内容依次给函数的实参
// null 就是 Math.max 函数内的 this 指向
// arr[0] 就是 Math.max 的第一个实参
// arr[1] 就是 Math.max 的第二个实参
// ...
    var res = Math.max.apply(null, arr)
    console.log(res)    // 32

3. bind( )

+ 语法: 跟随在函数名后面调用

          => 函数名.bind( )

          => 对象名.函数名.bind( )

        + 意义: 修改 函数内 的 this 指向

        + 参数:

          => 第一个参数: 要修改的函数内的 this 指向

          => 第二个参数开始: 依次给函数内每一个形参传递实参

        + 特点:

          => 不会立即调用函数 , 而是返回一个新的函数给你

          => 一个被改变了 this 指向的新函数

        + 用处:

          => 在非立即调用的函数时使用

          => 因为他不会立即调用函数, 而是返回一个改变好 this 指向的函数

        + 特殊作用 : 改变一些不会立即执行的函数内的 this 指向

function fn(a, b) {
      console.group('fn 函数内的 打印')
      console.log('this : ', this)
      console.log('a : ', a)
      console.log('b : ', b)
      console.groupEnd()
    }
    var obj = {
      name: '我是 obj 对象'
    }
// 利用 bind 调用了 fn 函数, 把函数内的 this 改变成为了 obj
// obj 就是 fn 函数内的 this 指向
// 100 赋值给形参 a
// 200 赋值给形参 b
// 注意: 因为是 bind, 不会把 fn 函数执行, 而是把 fn 函数复制了一份, 把内部的 this 锁定为 obj
// res 接受的就是 bind 方法复制出来的 fn 函数, 和 fn 函数一模一样, 但是 res 函数内的 this 是 obj
    var res = fn.bind(obj, 100, 200)
    console.log('fn : ', fn)
    console.log('res : ', res)
    res()

 

 bind 的 特殊作用 :

需求: 想把定时器处理函数内的 this 指向 obj

function fn(a, b) {
      console.group('fn 函数内的 打印')
      console.log('this : ', this)
      console.log('a : ', a)
      console.log('b : ', b)
      console.groupEnd()
    }
// 1000ms 以后执行 fn 函数
// 因为 fn 函数被当做了 定时器处理函数 使用, 所以 fn 内的 this 指向 window
    setTimeout(fn, 1000)

方案 1 : 利用 call / apply

function fn(a, b) {
      console.group('fn 函数内的 打印')
      console.log('this : ', this)
      console.log('a : ', a)
      console.log('b : ', b)
      console.groupEnd()
    }

    var obj = {
      name: '我是 obj 对象'
    }
// 方案1: 利用 call/apply
// 因为 call 和 apply 会立即调用函数, 当你设置这个定时器的时候, 已经把 fn 函数调用了
// 等到 1000ms 以后, 就没有函数执行了
    setTimeout(fn.call(obj, 100, 200), 1000)

 

 方案2: 利用 bind

function fn(a, b) {
      console.group('fn 函数内的 打印')
      console.log('this : ', this)
      console.log('a : ', a)
      console.log('b : ', b)
      console.groupEnd()
    }

    var obj = {
      name: '我是 obj 对象'
    }
// 方案2: 利用 bind
// 因为 bind 不会立即调用函数, 而是返回一个一模一样的函数, 只是被锁定了 this
// 你调用 res 和 调用 fn 是一模一样的代码, 只是 this 不一样
    var res = fn.bind(obj, 1000, 2000)
// 把 res 当做定时器处理函数, 在 1000ms 后执行
// 1000ms 以后执行的是一个 和 fn 函数一模一样的函数, 只是 this 指向了 obj
    setTimeout(res, 1000)

this 图例 :

雨季mo浅忆
关注
专栏目录
this指向详细解释笔记
cxd_dxc的博客
01-25 410
不同类型函数调用之间的主要区别：最终作为函数上下文（可以通过this 参数隐式引用到）传递给执行函数的对象不同
this 指向以及修改this 指向的方法
王小涵的笔记的博客
09-28 951
【this指向的学习，以及修改this指向的方法】
改变this指向
weixin_66951051的博客
04-13 59
改变this指向的方法 （重点、难点） call()、apply()、bind() 1、call() （1）、可以进行函数的调用 （2）、可以改变this的指向，如果没有参数，this指向window （3）、可以改变this的指向，如果有一个参数，this指向该参数 （4）、可以改变this的指向，如果有多个参数，this指向第一个参数，剩下的参数是个参数列表（继承的时候再讲） 2、apply() （1）、可以
call与apple改变this指向
夕尧的博客
06-20 606
<script> var name = 'cathy'; function fn(a,b,c){ console.log(this.name +'sum' +(a+b+c)) } fn(1,2,2); var obj = {name:'jenny'}; fn.call...
改变this指向问题(call、apply、bind)
老电影故事的博客
10-08 833
普通函数： 谁调用，this就指向谁，如果没有调用者，this默认指向window箭头函数(es6)：箭头函数的this是父级作用域的(精解：箭头函数外如果还有一个函数包裹，那么这个this指向的就是外包裹函数。如果箭头函数外没有外包裹函数，那么this就指向window)//window我们直接在控制台打印this，会发现打印出来的是window对象，默认情况下，this指向window对象。
改变this指向的三种方法及其不同call（）；apply
最新发布
fengqixuejian的博客
08-31 67
1、call(); 参数：call(改变后的this指向目标，参数1，参数2，参数3……) 立即调用函数；以逗号为分隔符传参，改变this指向 call 经常做继承.可以用来检测数据类型：Object.prototype.toString.call(检测数据) 2、apply（） 参数：apply ( 改变后的this指向目标，[参数1，参数2，参数3……] ) 立即调用函数；以数组的行书传参，改变this指向
改变this指向，call，apply，bind的不同
前端小白的逆袭
11-22 3000
改变this指向，call，apply，bind的不同
js this指向笔记.docx
10-06
- 通过 `call`, `apply`, 或 `bind` 方法可以显式地改变 `this` 的指向。例如：`fn.call(obj)`，此时 `this` 指向 `obj`。 4. **箭头函数**： - 箭头函数不会创建自己的 `this`，而是继承自父级（即外层）作用域...
JavaScript中this的学习笔记及用法整理
11-21
4. 使用`bind()`方法可以改变函数的`this`指向。 理解`this`的关键在于了解它如何根据不同的调用方式和上下文来确定其值。在编写JavaScript代码时，理解`this`的工作原理对于避免常见错误和写出更健壮的代码至关...
箭头函数与常规函数的this指向问题
大剑师兰特的GIS世界
01-29 605
函数中this的指向问题特别容易让人迷糊，这里用示例来指点迷津，走出迷茫。
如何修改this的指向？
weixin_45119097的博客
10-30 203
在JavaScript中如何修改一个函数中this的指向？
使用call改变this指向
热门推荐
whmJack的博客
04-24 1万+
call 和 apply 最常见的用途是改变函数内部的 this 指向，我们来看个例子： var obj1 = { name: 'sven' }; var obj2 = { name: 'anne' }; window.name = 'window'; var getName = function(){ alert ( this.name ); }; getName(); // 输出: wi...
ROS 类内如何使用成员函数作为subscribe的回调函数（this指针）
woodgril的博客
11-03 1343
原文链接
改变this指向（call、apply、bind）详细
萌萌的博客
09-15 2519
改变this指向的三种方式1.call方法基本语法：函数.call(this，arg1,arg2....)函数调用call改变this指向对象里的方法调用call改变this指向2.apply方法基本语法：函数.apply(this,[arg1,arg2])函数调用apply改变this指向对象方法调用apply改变this指向apply使用场景①改变this指向②操作数组的时可能会用到这个方法3.bind方法基本语法：函数.bind(this，arg1,arg2....)函数调用bind方法改变this指
call是如何改变this指向的？
丰柏林的博客
02-27 2503
// this call // call能改变函数里面的this指向 let obj = { num : 234; } function test() { let num = 123; console.log(this.num); function a() {} } test.call(obj); /*当调用call方法时...
ROS源代码阅读（3）：ROS程序的初始化——this_node::init()
格物致知 诚意正心
09-18 3039
接着上一篇博文《ROS程序的初始化——从ros:init()出发》，我们接着来分析ROS程序的初始化问题。在此文中我们探讨的是节点环境的初始化——this_node::init()函数。
js中改变this指向的三个常用方法bind,call和apply
sally_MF的博客
01-18 7710
一.bind:说起bind,很多人都会想起jquery中的bind绑定方法，给元素绑定事件，今天所讲的bind则是js的原生方法---可改变this的指向,下面我们来看演示：var name = 'sally'; function sayName(){ return this.name; } function sayName2(){ return this.name } var
call方法的用法，如何改变用call方法改变this指向？
weixin_47097924的博客
07-18 945
1.call的使用 （1）可以调用函数 //创建一个构造函数 function Star(name, age) { this.name = name this.age = age } //用call方法调用构造函数 Star.call('李四', 18) (2）改变this指向 //创建一个父构造函数 function Father(name, age) { this.name = name this.age = age } //给父构造函数原型对象prototype添加方法 Father.prototy
JavaScript高级：函数定义与this指向详解
在本篇JavaScript高级第03天笔记中，主要讨论了函数的定义与调用，以及`this`关键字的指向。内容包括三种函数定义方式：函数声明、函数表达式和`newFunction()`方法。其中，函数声明（通过`function`关键字）和函数...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值