Js-this指向问题、call()、apply()、bind()改变this指向

最新推荐文章于 2023-01-11 10:53:08 发布
最新推荐文章于 2023-01-11 10:53:08 发布
阅读量608 收藏 2
点赞数
分类专栏： Js ES6 文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42863800/article/details/107523755
版权
Js 同时被 2 个专栏收录
29 篇文章 0 订阅
订阅专栏
ES6
12 篇文章 0 订阅
订阅专栏

0-零 - this几种指向

  1. 在全局中this：指向window。

  2. 对象方法中this：this指向该对象本身。

  3. 回调函数中this：指向window。

  4. 事件回调中this：指向e.currentTarget，给谁添加的事件监听就指向那个元素。

  5. 箭头函数中this：指向箭头函数外层的this。

  6. 类中this：指向实例化对象，哪个对象调用这个方法、this就指向哪个对象；静态方法和静态属性中：this指向这个类。

  7. call()、apply()、bind()中：将函数中this的指向 改变为这三个方法的第一个参数、当第一个参数为空或者为null时，表示将函数中的this指定到window。

Ⅰ- 壹 - 全局中this

全局对象的 this 是window

console.log(this);//window
function abc(){
    console.log(this);//window,严格模式下undefined
}
abc();

Ⅱ - 贰 - 对象方法中this

  • 对象属性中使用 this，this 指向外层的 this 指向
  • 对象方法中使用 this，this 指向该对象本身

可以理解为，属性描述 this 时，这个时候对象还没有生成，所以属性中的 this 指向外层的 this 指向；当调用对象的方法时，对象已经生成，所以方法中的 this 指向该对象本身。

对象属性中使用 this，this 指向外层的 this 指向

var a = 10;
var obj1 = {
    a: 100,
    c: this.a, //属性中的this指向该对象的this,即window
    init: function () {
        console.log(this.a);//100 方法中的this指向该对象,即obj1
        console.log(this.c);//10
    }
}
obj1.init();

对象方法中使用 this，this 指向该对象本身

var a = 10;
var obj1 = {
    a: 100,
    c: this.a, //属性中的this指向上一层的this,即window
    init: function () {
        console.log(this.a);//100,方法中的this指向该对象,即obj1
        var obj = {
            a: 1,
            c: this.a, //属性中的this指向上一层的this,即obj1
            b: function () {
                console.log(this.a);//1,方法中的this指向该对象,即obj
                console.log(this.c);//100,方法中的this指向该对象,即obj
            }
        }
        obj.b();
    }
}
obj1.init();
console.log(obj1.c);//10

Ⅲ - 叁 - 回调函数中this

将函数作为参数传入，无法确定该函数的原来的this指向。所以统一将回调函数中的this都指向window。

下面的案例中，如果函数abc()的this指向是window；函数obj.c()的this指向obj;将他们分别作为参数代入obj.b() 中，obj.b() 无法判读出他们原来的this指向。所以统一将this指向window。

function abc() {
    console.log(this);
}
var obj = {
    a: function () {
        this.b(this.c);
        // this.b(abc);
    },
    b: function (fn) {
        fn();
        console.log(this); //方法中的this指向该对象,即obj
    },
    c: function () {
        console.log(this); //回调函数中的 this 指向 window
    }
}
obj.a();

同理，forEach()、filter()、map()、some()、every()、promise…中函数都是回调函数，它们的 this 也都指向 window。

var arr=[1,2,3];
arr.forEach(function(){
    console.log(this);//window
})

Ⅳ - 肆 - 事件回调中this

事件侦听中的 this 指向 e.currentTarget，即给谁添加的事件侦听，this 就指向谁。

事件函数中的this，会覆盖普通对象中函数的this的指向;

// 事件侦听
document.addEventListener("click",clickHandler);
// 事件回调函数
function clickHandler(e){
    // this--->e.currentTarget
    console.log(this);//document
}

    var obj = {
      d: () => {
        console.log(this);//window
        document.addEventListener("click", this.obj.loadHander);
      },
      loadHander(e) {
        console.log(this)//document
      }
    }

    obj.d();
 var obj = {
      d: () => {
        console.log(this); //window
        document.addEventListener("click", e => this.obj.loadHander(e));
      },
      loadHander(e) {
        console.log(this) //obj
      }
    }
    obj.d();

Ⅴ - 伍 - 箭头函数中this

箭头函数改变了this指向，将指向箭头函数外层的this

var obj={
   a:function(){
        var arr=[1,2,3];
        arr.forEach(function(){
            console.log(this);//window 遵从于回调函数的this指向
        });
        arr.forEach(item=>{
            console.log(this);//obj 因为使用了箭头函数，就会忽略了回调函数的this指向
        })
		document.addEventListener("click",this.clickHandler);//obj
        document.addEventListener("click",e=>{
            console.log(this);//obj 因为使用箭头函数，就会忽略了事件函数中this指向
        })
    },
    clickHandler:function(e){
        console.log(this)//document 遵从于事件函数中this---e.currentTarget
    }
}
obj.a();



var obj = {
      d: () => {
        console.log(this);//window
        document.addEventListener("click", this.obj.loadHander);
      },
      loadHander(e) {
        console.log(this, e.currentTarget)//this=>document  e.currentTarget指向document
      }
    }

    obj.d();
 var obj = {
      d: () => {
        console.log(this); //window
        document.addEventListener("click", e => this.obj.loadHander(e));
      },
      loadHander(e) {
         console.log(this, e.currentTarget) //this=>obj    e.currentTarget指向document
      }
    }
    obj.d();

使用箭头函数侦听事件回调，因为箭头函数是匿名函数，所以没有办法清除，可以通过自定义箭头函数来进行清除。

//原始的
document.documentElement.addEventListener("click", clickHandler);
function clickHandler(e) {
	console.log(this);//html
}
//document.documentElement.removeEventListener("click", clickHandler);

//普通的箭头匿名函数,因为是匿名函数，所以没有办法清除
document.documentElement.addEventListener("click",e=>clickHandler())
function clickHandler(e) {
	console.log(this);//window
}

//定义的箭头函数，可以removeEventListener
var handler = e => {clickHandler(e)};
document.documentElement.addEventListener("click", handler);
function clickHandler(e) {
    console.log(this);//window
}
//document.documentElement.removeEventListener("click", handler);

Ⅵ - 陆 - 类中this

  • 类中的 this 指实例化的对象，谁调用方法，在类的函数中 this 就是那个实例对象
  • 静态属性和静态方法中的 this 指的是这个类
//ES6中类的写法
class Rect{
    constructor(){
        this.elem=this.createElem();
    }
    createElem(){
        if(this.elem) return this.elem;
        let div=document.createElement("div");
        Object.assign(div.style,{
            width:"50px",
            height:"50px",
            backgroundColor:"red",
            position:"absolute",
            left:"0px"
        });
        div.addEventListener("click",e=>this.clickHandler(e))
        return div;
    }
}
//实例化对象
let rect=new Rect();
//上面代码中的this全都指向rect

ES6中类的写法和ES5中类的写法：

//ES6中类的写法
class Box{
    static a=3;
    b=4;
    static c=this.a;//this指Box,static c=3;
    constructor(){

    }
    play(){
        //this 指实例化对象
    }
    static once(){
		//this 指Box
    }
}

// ES5中没有类,借用原型的概念实现类
function Box(){
	//相当于ES6中constructor()
}
Box.a=3;//相当于ES6中的static a=3;
Box.once=function(){
	//相当于ES6中的static once(){};
}
Box.prototype.b=4;//相当于上述中的b=4;
Box.prototype.play=function(){
	//相当于上述中的play(){};
}

Ⅶ - 柒 - call()、apply()、bind()方法改变this指向

方法名参数简述
call()第一个参数为this指向的对象，第二个参数为函数的参数只能一个一个的添加函数会立刻执行，
apply()第一个参数为this指向的对象，第二个参数为函数的参数可以是数组、列表或者扩展运算符函数会立刻执行，
bind()第一个参数就是函数里面 的this就是的内容函数不会立刻执行，

一 call()

  • 会立即执行函数；
  • 如果有一个参数，且该参数为对象类型，则表示将函数中 this 的指向改变为这里带入的参数；
  • 函数中如果没有this，call就没有任何意义了，和普通的执行函数概念一样；
  • call() 在执行函数时，函数的参数从第二位开始依次写入；
  • 如果使用call() 或者apply() ，第一个参数为空或者是null，就意味着将函数中this 重定向到 window；

语法: 方法名.call(对象);

function fn(_a,_b){
   this.a=_a;
   this.b=_b;
}

fn();//等同于
fn.call();//立即执行函数，this指向window

let obj={};
fn.call(obj);//立即执行函数，且this指向obj，将obj带入到函数替代函数中this的指向，原有的this会被指向obj

fn(3,4);//等同于
fn.call(obj,3,4);

二 apply()

  • apply() 和 call() 一样都是改变this的指向为第一个参数对象；
  • apply() 的参数只有2个，第一个参数为函数中 this 的指向，第二个参数是函数所需的所有参数的数组，列表
  • 如果使用call() 或者apply() ，第一个参数为空或者是null，就意味着将函数中this 重定向到 window；
function fn(_a,_b){
   this.a=_a;
   this.b=_b;
}
fn();//等同于
fn.call();//立即执行函数，this指向window

let obj={};
fn.apply(obj);//立即执行函数，且this指向obj

fn(3,4);//等同于
fn.apply(obj,[3,4]);

1 获取数组的最小值案例

 var arr=[1,2,3,4,5];

 var min=Math.min.apply(null,arr);//Math方法使用
//重构min
 var Maths={
     min:function(){
         if(arguments.length===0) return;
         var min=arguments[0];
         if(arguments.length===1) return min;
         for(var i=1;i<arguments.length;i++){
             min=min.arguments[i]?arguments:min;
             
         }
         return min;
     }
 }
 //使用
 Maths.min.apply(null,arr);

​

2 将一个元素集合转为数组

<div></div>
<div></div>
<div></div>
<div></div>
<script>
	var divs=document.getElementsByTagName("div");
    console.log(divs);//HTMLCollection(5) [div, div, div, div, div]
    var arr=Array.prototype.slice.call(divs);
    //var arr=[].slice.call(divs);//跟上面的写法意思一样
    console.log(arr);//[div, div, div, div, div]



	//重构转换数组Array.prototype.slice.call() 实现原理：

class Arrays{
          constructor(){

          }
          slice(start,end){
            if(start===undefined) start=0;
            if(end===undefined) end=this.length;
            var arr=[];
            for(var i=start;i<end;i++){
                arr.push(this[i]);
            }
            return arr;
          }
      }
//使用
      var arr=new Arrays();
        arr.slice.call(document.getElementsByTagName("div"));


</script>

三 bind()

  • 当需要在回调函数中重新执行回调函数中的this，就需要是用bind来指向对象
  • bind() 会返回一个对象，函数里面 的this就是绑定的内容。
//函数会延时执行
var obj={a:1};
        setTimeout((function(){
            console.log(this);//打印{a:1}
        }).bind(obj),10000);//绑定到obj


//在事件中 绑定this的指向为obj
 var obj={
            a:1,
            b:function(){
                this.handler=this.clickHandler.bind(this);
                document.addEventListener("click",this.handler)
            },
            clickHandler:function(e){
                console.log(this);
                document.removeEventListener("click",this.handler)
            }
        }
        obj.b();

1 红绿黄灯切换

var id;
      function setLight() {
        arguments[0](arguments[1], arguments[2]);
      }
      
      function showLight(fn,fn2){
          clearTimeout(id);
            console.log(this.toString());
            id = setTimeout(fn, 2000, fn2, arguments.callee.bind(this));
      }
      setLight(showLight.bind("红"),showLight.bind("黄"),showLight.bind("绿"));

四 call()、apply()、bind()方法区别

  • 定时器 延时器 事件绑定 都不可以用因为call apply会立刻执行函数

  • call apply第一参数都一样为this的指向，call第二个参数只能一个一个的填写而apply可以是数组或者列表也可以使用扩展运算符 （…）

  • 可以使用bind() 将一个函数绑定为某个对象但不会立刻执行

  • 将函数中 this 的指向改变为这里带入的第一个参数，当第一个参数为空或者是null时，表示将函数中 this 重定向到 window；

//在延时器中使用会立即执行不会等待10秒执行
var obj={a:1};
        setTimeout((function(){
            console.log(this);
        }).call(obj),10000);


//
function fn(_a,_b){
   this.a=_a;
   this.b=_b;
}

fn.call();//this指向window
fn.apply();//this指向window

let obj={};
fn.call(obj);//立即执行函数，且this指向obj
fn.apply(obj);//立即执行函数，且this指向obj
fn.bind(obj);//不执行，只是将this指向obj

0 - 0 - 知识点：

一 对象，事件 箭头函数 this

var obj = {
      d: () => {
        console.log(this);//window
        document.addEventListener("click", this.obj.loadHander);
      },
      loadHander(e) {
        console.log(this, e.currentTarget)//this=>document  e.currentTarget指向document
      }
    }

    obj.d();
 var obj = {
      d: () => {
        console.log(this); //window
        document.addEventListener("click", e => this.obj.loadHander(e));
      },
      loadHander(e) {
         console.log(this, e.currentTarget) //this=>obj    e.currentTarget指向document
      }
    }
    obj.d();

二 this总结

  1. 在全局中this：指向window。
  2. 对象方法中this：this指向该对象本身。
  3. 回调函数中this：指向window。
  4. 事件回调中this：指向e.currentTarget，给谁添加的事件监听就指向那个元素。
  5. 箭头函数中this：指向箭头函数外层的this。
  6. 类中this：指向实例化对象，哪个对象调用这个方法、this就指向哪个对象；静态方法和静态属性中：this指向这个类。
  7. call()、apply()、bind()中：将函数中this的指向 改变为这三个方法的第一个参数、当第一个参数为空或者为null时，表示将函数中的this指定到window。
自律自强的鱼
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS中this的指向以及call、apply的作用
10-18
总之，理解`this`的指向规则以及如何通过`call`、`apply`和`bind`来控制`this`，是JavaScript开发中的重要技能，可以帮助我们解决许多与对象方法和上下文相关的复杂问题。在实际开发中，熟练掌握这些知识点能够提升...
浅谈JavaScript中的apply/call/bind和this的使用
10-20
apply/call/bind三者的联系就在于，都可以用来改变函数中 this 指向的值，且第一个参数为要指向的 this 的值，apply的第二个参数（或 bind 与 call 的不定参数）为要传入的参数。这就不得不提及 javascript 中函数的...
this指向 箭头函数中的this call、apply和bind方法的用法以及区别
01-08
thisthis 指向看看箭头函数的案例call、apply和bind方法的用法以及区别来几个面试题试试 this 指向 1.普通函数的this：指向它的调用者，如果没有调用者则默认指向window. 2.箭头函数的this: 指向箭头函数定义时所处的对象，而不是箭头函数使用时所在的对象，默认使用父级的this 箭头函数的父级还箭头还是 就从父级开始 向上查找 直到有（实际上箭头函数里并没有 this，如果你在箭头函数里看到 this，你直接把它当作箭头函数外面的 this 即可。外面的 this 是什么，箭头函数里面的 this 就还是什么，因为箭头函数本身不支持 this。就默认看成使用
通过bind改变处理函数中的this指向
zmmsdk的博客
10-14 1418
通过bind 改变事件处理函数中this的指向 MDN解释 bind方法会创建一个新函数 称为绑定函数 当调用这个绑定函数时 绑定函数会以创建它时传入bind（）方法的第一个参数作为this 传入bind（）方法的第二个以及以后的参数 按照顺序作为原函数的参数来调用原函数 注意 ：bind方法的返回值是函数 // 创建一个对象 var obj = { //属性 name: ‘zs’, na ...
改变this指向的call，apply，bind方法
diji9092的博客
07-12 130
var a = { user:"bgg", fn:function(){ console.log(this.user); } } var b = a.fn; b(); //undefined 我们是想打印对象a里面的user却打印出来undefined是怎么回事呢？如果我们直接执行a.fn()是可以的。 但是有时候我们不得...
bind()改变this指向
lee_srr的博客
10-15 240
this的指向问题及call()apply()bind()的使用
zou2ou的博客
03-02 242
this的指向问题 函数的不同调用方式决定了this 的指向不同 1.在普通函数中this 的指向 ​ 相当于 window.fn() 调用,所以输出结果: 当然 在全局作用于下: 输出结果还是window 所以,在全局作用域或者普通函数中this指向全局对象 window 2.对象的方法this 指向 ​ 由o 这个对象调用其方法,所以this 指向 对象 o ​ 所以,在对象的方法中, this指向的是该对象 3.构造函数中this 的指向 ​ 当我们new 一个构造函数后会创建一个空
JS中改变this指向的方法(call和apply、bind)
10-22
this是javascript的一个关键字，随着函数使用场合不同，this的值会发生...但是总有一个原则，那就是this指的是调用函数的那个对象，通过本文给大家介绍JS中改变this指向的方法(call和apply、bind)，需要的朋友参考下
详解JS中的this、apply、call、bind(经典面试题)
10-19
JS中的this、apply、call、bind是一道经典面试题，最好还是了解一下 this 的指向和 call、apply、bind 三者的区别。下面就跟随脚本之家小编一起学习this、apply、call、bind的知识吧
改变this指向的三种方法，call()、apply()、bind()
leondong_56828的博客
09-16 195
改变this指向的三种方法，call()、apply()、bind()及各自的用法和应用场景 <script> //1 call()方法 const obj={ name:'张三', age:18 } function fn(a,b){ console.log("call方法de this指向",this);//Object console.log(a+b);//9 } fn.call(obj,3,6)//调用函数并改变th
JavaScript对象创建模式实例汇总
10-21
主要介绍了JavaScript对象创建模式,结合实例形式总结分析了JavaScript常见的对象创建模式,包括工厂模式、构造函数模式、原型模式、动态原型模式、寄生构造函数模式、稳妥构造函数模式等,需要的朋友可以参考下
函数的this与call、apply、bind方法
ChengNan的博客
07-26 108
函数的this Function的prototype属性上有这三个方法：call()、apply()、bind()，这三个函数也常被我们拿出来讨论，因为这三个函数与this有关，那现在就来对这三个函数进行总结。 语法： call(thisArg, param1, param2, ...) apply(thisArg, [param1, param2, ...]) bind(thisArg, param1, param2, ...) 相同点：三个方法接受的第一个参数都一样，都是函数内的this值 不同点：
关于改变this指向的三种方式：call、apply、bind
weixin_47783830的博客
03-29 207
在写程序过程中，我们经常性的需要去改变函数的this指向问题，为此，js有专门提供的几个方法：call、apply、bind 他们都是因改变this指向而存在，但既然存在这么多种，一定有本质的区别，下面我们用代码来详细说明（实践是检验真理的唯一标准）： 创建一个简单的函数： 上面函数 fn 执行，打印结果如图 接下来，我们使用call,apply,bind方法去改变this能否成功 从上面可以看出apply方法报错，bind没执行，只有call执行成功。这是因为写法不同，我们按照官方提供的方法正确操作：
js this的指向，call ，apply，bind改变this的指向
jililin123的博客
01-11 594
js this的指向，call，apply，bind改变this的指向
js中修改this指向的方法（call，apply，bind）
weixin_30700977的博客
09-03 230
前言：call、apply和bind都是为了改变某个函数运行时的this指向的，对于前端人员来说，关于this的掌握程度，直接决定了前端水平的高低。下面我们就来简单浅显易懂的来看一下es5中常用的三种修改this指向的方法。 1.call()方法 function test(m,n){ console.log(this.abc); } test();//这里打印的是unde...
js中this的改变指向的方法：call和apply、bind
岁月Ben的博客
08-10 546
在javascript中this是一个特殊的关键词，在不同的场合中this的值也在发生着变化，但是this都是指的是函数调用的对象，就是指函数的调用对象，但是为了实现某种功能，也对改变this的指向提供了一些函数： 1.call在继承的时候使用 例如： function Parent(age){ this.name=['mike','jack','smith']; this.age=
this指向及改变this指向的方法（call、apply、bind）
weixin_46449470的博客
07-04 273
this指向及改变this指向的方法 任何函数都有属于自己的this 函数的调用方式决定了this的指向 一、this指向window 1）、普通函数（声明式函数）调用，此时this指向window 2）、 箭头函数没有自己的this，它的this指向上下文中的this(即所处环境的this) 3）、赋值式函数调用，此时this指向window 4）、定时器函数，指向window //普通函数（声明式函数） function fn(){ console.log(this);//指向window }
改变this指向---call(),apply(),bind()
寻常的博客
09-20 72
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.
call，apply，bind改变this指向
Little_ChenH的博客
03-08 484
推荐非常浅显易懂的一片文章，搭配代码实例，易于理解！this与call… 首先我们先要明确一点： this 永远指向最后调用它的那个对象！！！ 然后我们在看看这三种方法的异同： 1. call()主动执行，第一个参数为this要指向的对象，函数执行需要的实参依次写在后面。 2. apply()主动执行，第一个参数为this要指向的对象，第二参数为一个数组(类数组)，数组里包含所有实参...
call bind apply 讲一下这三个改变this指向的问题
最新发布
03-09
call、bind、apply 都是 JavaScript 中用于改变函数执行时 this 指向的方法。 call 和 apply 的作用是一样的，都是改变函数执行时的 this 指向，只是传参的方式不同。call 的参数是一个一个传递的，而 apply 的参数是以数组的形式传递的。 bind 方法则是返回一个新的函数，这个函数的 this 指向被绑定的对象。bind 方法不会立即执行函数，而是返回一个新的函数，需要手动调用才会执行。 这三个方法都可以用于解决函数执行时 this 指向不明确的问题，特别是在使用回调函数、事件监听等场景下，经常需要使用这些方法来确保函数执行时 this 指向正确。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值