精华内容
下载资源
问答
  • 修改this指向 修改this指向有三个方法(call,apply,bind),三个方法的第一个参数都是修改的指向的内容(对象名、对数组名等)。 1.call方法。该方法的后面可以有很多参数,除第一个指向的地方外(调用的就是...

    this指向:

    1. 如果this作为参数传入,那么this就是指向该标签。(在标签内调用时间函数,谁调用指向谁)

      < input οninput="fn(this) " >

    2. 如果直接在fn函数中写this,那么this为将根据其上下文(即他属于谁)来决定,一般指向window
      function (){
      console.log(shis);
      }
      3.点击事件onclick上的this【先获取标签元素】
      var ipt = document.querySelector(“input”);
      ipt.onclik=function(){
      console.log(this);
      }

    4.构造函数中的this;(this是指当前实例化对象的具体的对象,谁调用this说在的函数,this就指向哪个实例)

    在这里插入图片描述
    5.原型方法上的this。(谁调用就指向谁)
    在这里插入图片描述
    6.对象方法中的this。
    (谁调用this所在对象中的函数,就指向谁)

    var obj={
    name:“ls”;
    fn:function(){
    console.log(this.name);
    }}

    obj.fn();这里就是obj调用调用fn()函数,则this指向obj;

    修改this指向:

    修改this指向有三个方法(call,apply,bind),三个方法的第一个参数都是修改的指向的内容(对象名、对数组名等)。

    1.call方法。该方法的后面可以有很多参数,除第一个指向的地方外(调用的就是指向的位置的值内容),后面的参数都是数值数字等类型依次排列(当然,这些参数也可以根据情况省略)。

    eg1:

    var arr = [12, 56, 48, 25, 35, 64, 964, 554, 221, 20];
    var a = Math.max.call(arr, 12, 56, 48, 25, 35, 64, 964, 554, 221, 20);
    console.log(a); 
    

    eg2:

    obj.sex.call(obj1)  //后面的参数根据情况,方法里面有参数就写实参。
    
    2.apply方法。该方法后面第二个参数跟一个数组或者数组的变量名

    eg1:

    var b = Math.max.apply(arr, arr);
    console.log(b);
    var c = Math.max.apply(arr, [12, 56, 48, 25, 35, 64, 964, 554, 221, 20]);
    console.log(c);
    

    eg2:
    :在这里插入图片描述
    一样的【当需要参数的时候后面必须跟参数,想eg2没有参数就可以省略】

    3.bind方法,改方法返回的是一个函数。可以给一个变量接收,然后调用给入参数(如eg1)。也可以在表达式后面直接加括号给参数(如eg2)。

    eg1:

    var d = Math.max.bind(arr); //返回的函数
    d(12, 56, 48, 25, 35, 64, 964, 554, 221, 20);
    console.log(d(12, 56, 48, 25, 35, 64, 964, 554, 221, 20));
    

    eg2:

    Math.max.bind(arr)(arr);
    

    实例:在这里插入图片描述 在这里插入图片描述

    展开全文
  • this指向在函数被定义的时候是确定不了的,只有在函数被调用的时候才能确定this 到底指向谁, 实际上,this 的最终指向的是调用这个函数的对象。 下面介绍一下几种情况下,this指向 1、全局环境 全局环境下,...

    this是js中的一个关键字,函数运行时自动生成的一个内部对象。
    this 的指向在函数被定义的时候是确定不了的,只有在函数被调用的时候才能确定this 到底指向谁,
    实际上,this 的最终指向的是调用这个函数的对象。

    下面介绍一下几种情况下,this的指向

    1、全局环境
    全局环境下,this就代表window对象。

    var name = 'zhar';
    function say(){
      console.log(this.name);//zhar
    }
    say();
    

    同样,在 setTimeout 或 setInterval 这样的延时函数中调用也属于全局对象

    var name = 'zhar';
    setTimeout(function(){
      console.log(this.name);//zhar
    },0);
    
    

    2、对象环境
    对象环境指向对象。

    var obj = {
      name : "zhar",
      say : function(){
        console.log(this.name);//zhar
      }
    }
    obj.say();
    

    下面举两个经典的例子:

    var name = 'tom';
    var obj = {
      name : "zhar",
      say : function(){
        console.log(this.name);
      }
    }
    var fun = obj.say;
    fun();//输出 ?//tom-->fun定义在全局环境下,即window.fun()
    //再次说明了this的指向是由运行时的执行环境来决定的
    
    var name = 'tom';
    var obj = {
      name : "zhar",
      say : function(){
        return function(){
          console.log(this.name);
        }
      }
    }
    obj.say()();//输出 ?//tom
    

    3、构造函数环境
    构造函数中的this 会指向创建出来的实例对象,使用new 调用构造函数时,会先创建出一个空对象,然后用call函数把构造函数中的this指针修改为指向这个空对象。执行完环境后,空对象也就有了相关的属性,然后将对象返回出去,所以说就不用我们自己手动返回啦~

    function Person() {
        this.name = 'zhar';
    }
    var p = new Person();
    console.log(p.name);
    

    综合以上,构造函数不需要返回值,如果我们指定一个返回值时,this的指向将发生变化

    function Person() {
      this.name = 'zhar';
      return {};
    }
    var p = new Person();
    console.log(p.name);//undefined
    //--------------------------------------
    function Person() {
      this.name = 'zhar';
      return {name:'tom'};
    }
    var p = new Person();
    console.log(p.name);//tom      如果构造函数返回对象(Object,Array,Function),那 this 将指向这个对象,其它基础类型则不受影响
    //--------------------------------------
    function Person() {
      this.name = 'zhar';
      return 1;//number string boolean 等
    }
    var p = new Person();
    console.log(p.name);//zhar
    

    所以,如无必要我们通常不要设置构造函数的返回值

    4、事件对象
    在 DOM 事件中使用 this,this 指向了触发事件的 DOM 元素本身

    li.onclick = function(){
        console.log(this.innerHTML);
    }
    

    总结下来就是一句话:是谁调用的,this就指向谁

    下面介绍一下如何来修改this 的指向
    1、可以使用局部变量来代替this指针

    var name = "zhar";
    var obj = {
      name : "zhar",
      say : function(){
        var _this = this;//使用一个变量指向 this
        setTimeout(function(){
          console.log(_this.name);
        },0);
      }
    }
    obj.say();
    

    该方法为非常常用的一个方法
    2、使用call 或 apply 方法
    这两个方法我单独写了一篇文章,应该是在这篇文章的下边

    展开全文
  • 函数中的this指向与 call/apply/bind方法 (1)函数中的this指向:this的指向只取决于函数调用/执行时最终调用该函数的对象。 参考网址:http://www.cnblogs.com/pssp/p/5216085.html 示例1: var a = {  ...
    函数中的this指向与 call/apply/bind方法
    

    (1)函数中的this指向:this的指向只取决于函数调用/执行时最终调用该函数的对象。
    参考网址:http://www.cnblogs.com/pssp/p/5216085.html

    示例1:
    var a = {
        user:"追梦子",
        fn:function(){
            console.log(this.user);
        }
    }
    var b = a.fn;
    b();  //输出结果:undefined

    示例2:
    var a = {
        user:"追梦子",
        fn:function(){
            console.log(this.user);
        }
    }
    a.fn();  //输出结果:追梦子

    注释:具体的其他关于new 、return等复杂情况,详见上述参考网址。


    (2)call/apply/bind方法:都是用来修改this指向的
    参考网址:http://www.cnblogs.com/pssp/p/5215621.html

    兼容性:
            Call/apply    兼容所有
            Bind               IE9+

    注释:
            如果call和apply的第一个参数写的是null或不填,那么this指向的是window对象;(bind也是)
            call/apply方法的调用会调用源函数;而bind方法的调用只是返回源函数(需要额外调用)。

    (a)call方法
    示例:
    var a = {
        user:"追梦子",
        fn:function(e,ee){
            console.log(this.user); //追梦子
            console.log(e+ee); //3
        }
    }
    var b = a.fn;
    b.call(a,1,2);
    注释:call方法的参数解析:(可接收0至多个参数)
    第一个参数:可选,修改this指向的对象;
    第二个及之后的参数:可选,函数传参;

    (b)apply方法
    示例:
    var a = {
        user:"追梦子",
        fn:function(e,ee){
            console.log(this.user); //追梦子
            console.log(e+ee); //11
        }
    }
    var b = a.fn;
    b.apply(a,[10,1]);

    注释:apply方法的参数解析:(与call有点相似,但最多只接受两个参数)
    第一个参数:可选,修改this指向的对象;
    第二个参数:可选,一个数组,表示函数传参;


    (c)bind方法
    注意:bind方法的返回值是一个修改过后的函数,并没有立即调用。
    示例:
    var a = {
        user:"追梦子",
        fn:function(e,d,f){
            console.log(this.user); //追梦子
            console.log(e,d,f); //10 1 2
        }
    }
    var b = a.fn;
    var c = b.bind(a,10);
    c(1,2);

    注释:bind方法的参数解析:(传参比call/apply方法更灵活)
    bind可以有多个参数,而且,既可以在bind方法中传参,也可以在执行的时候再次添加传参,总体的参数处理是按照形参的顺序进行的。
    bind方法的this指向参数必须在bind方法中传参,否则都默认为指向window对象。

    综上所述,call、apply 和 bind 三者的比较总结:
    call和apply都是改变上下文中的this,并自动立即执行这个函数。
    bind方法可以改变上下文中的this,但不会自动立即执行这个函数;并且,可以将参数在执行的时候添加。
    这是它们的区别,根据自己的实际情况来选择使用。
    展开全文
  • <script> // 改变函数内this指向 js提供了三种方法 call() apply() bind() // 1. call() var o = { name: 'andy' } function fn(a, b) { con...

    在这里插入图片描述

    在这里插入图片描述在这里插入图片描述
    在这里插入图片描述

        <script>
            // 改变函数内this指向  js提供了三种方法  call()  apply()  bind()
    
            // 1. call()
            var o = {
                name: 'andy'
            }
    
            function fn(a, b) {
                console.log(this);
                console.log(a + b);
    
            };
            fn.call(o, 1, 2);
            // call 第一个可以调用函数 第二个可以改变函数内的this 指向
            // call 的主要作用可以实现继承
            function Father(uname, age, sex) {
                this.uname = uname;
                this.age = age;
                this.sex = sex;
            }
    
            function Son(uname, age, sex) {
                Father.call(this, uname, age, sex);
            }
            var son = new Son('刘德华', 18, '男');
            console.log(son);
        </script>
    
    <script>
            // 改变函数内this指向  js提供了三种方法  call()  apply()  bind()
    
            // 2. apply()  应用 运用的意思
            var o = {
                name: 'andy'
            };
    
            function fn(arr) {
                console.log(this);
                console.log(arr); // 'pink'
    
            };
            fn.apply(o, ['pink']);
            // 1. 也是调用函数 第二个可以改变函数内部的this指向
            // 2. 但是他的参数必须是数组(伪数组)
            // 3. apply 的主要应用 比如说我们可以利用 apply 借助于数学内置对象求数组最大值 
            // Math.max();
            var arr = [1, 66, 3, 99, 4];
            var arr1 = ['red', 'pink'];
            // var max = Math.max.apply(null, arr);
            var max = Math.max.apply(Math, arr);
            var min = Math.min.apply(Math, arr);
            console.log(max, min);
        </script>
    
    <body>
        <button>点击</button>
        <button>点击</button>
        <button>点击</button>
        <script>
            // 改变函数内this指向  js提供了三种方法  call()  apply()  bind()
    
            // 3. bind()  绑定 捆绑的意思
            var o = {
                name: 'andy'
            };
    
            function fn(a, b) {
                console.log(this);
                console.log(a + b);
    
    
            };
            var f = fn.bind(o, 1, 2);
            f();
            // 1. 不会调用原来的函数   可以改变原来函数内部的this 指向
            // 2. 返回的是原函数改变this之后产生的新函数
            // 3. 如果有的函数我们不需要立即调用,但是又想改变这个函数内部的this指向此时用bind
            // 4. 我们有一个按钮,当我们点击了之后,就禁用这个按钮,3秒钟之后开启这个按钮
            // var btn1 = document.querySelector('button');
            // btn1.onclick = function() {
            //     this.disabled = true; // 这个this 指向的是 btn 这个按钮
            //     // var that = this;
            //     setTimeout(function() {
            //         // that.disabled = false; // 定时器函数里面的this 指向的是window
            //         this.disabled = false; // 此时定时器函数里面的this 指向的是btn
            //     }.bind(this), 3000); // 这个this 指向的是btn 这个对象
            // }
            var btns = document.querySelectorAll('button');
            for (var i = 0; i < btns.length; i++) {
                btns[i].onclick = function() {
                    this.disabled = true;
                    setTimeout(function() {
                        this.disabled = false;
                    }.bind(this), 2000);
                }
            }
        </script>
    </body>
    
    
    展开全文
  • 一、通过bind来指明当前方法中的this指向当前组件 二、在构造函数constructor中改变this指向 三、使用箭头函数改变this指向 官方最为推荐的方法是:构造函数中改变; 最不推荐的方法是第一种方法,在render中,每...
  • 主要有三种方法:call,apply,bind 1、call ...sex:function(a){console.log(this.name,"无法确定性别!",a)} } obj.sex('飞') // 张飞 无法确定性别! 飞 var obj1 = { name:"黄忠" } obj.sex...
  • React是一款javascript前端框架,把用户界面抽象成一个个的组件,按需组合成页面,与其他框架的共同点是,都采用虚拟dom和数据...React使我们对于代码编写的介入感更强,需要注意的问题也会更多,比如this指向的问题。
  • 修改this指向的目的: 修正(解决隐式丢失时this指向的问题) 继承(利用this的指向,借用其他对象的方法) 1. call()方法 使用方式:函数.call(参数1,参数2…) 参数1:this的新指向 后面所有参数:表示向函数中...
  • JAVAscript中的this指向this指向修改

    千次阅读 热门讨论 2021-04-08 19:09:09
    JAVAscript中的this指向this指向修改 this 关键字 一般在函数中使用,表示哪个对象执行了当前函数。 每一个函数内部都有一个关键字是 this 。 函数内部的 this 只和函数的调用方式有关系,和函数的定义方式没有...
  • JavaScript对象中的this指向及其修改

    千次阅读 多人点赞 2019-05-21 19:06:57
    1、属性事件的this,在标签内调用事件函数 ①谁调用this所在的函数,就指向谁 a、如果this作为参数传入,那么this就是指向input ...3、构造函数中的this(this指向当前实例化的具体的对象(谁调用this所在...
  • 箭头函数及this指向修改

    千次阅读 2020-02-24 23:17:03
    作为ES6的一种新规范,箭头函数的优点不仅在于写法上的简化,更多的是能够根据情况,与匿名函数之前切换使用,快速达到this指向切换的效果。 那么,箭头函数如何使用呢? 用法及格式 this指向 与普通函数区别 用法...
  • ...六:定时函数中:this指向window 七:bind改变this指向 八:ES6箭头函数:函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。箭头函数的最大作用就是this指向 https:/...
  • 箭头函数this指向以及改变this指向的方法 call apply bind 总结 相同点: 都可以改变函数内部的this指向 不同点 : 1.call和apply会调用函数,并且改变函数内部this的指向 2.call和apply传递的参数不一样,call传递...
  • this指向及改变this指向的方法

    万次阅读 多人点赞 2018-06-28 11:57:02
    原先总结过this指向问题,但看了大佬们写的之后,觉得自己遗漏了很多点,所以,结合大佬们的,重写一遍 一、函数的调用方式决定了 this 的指向不同: 普通函数调用,此时 this 指向 window function fn() ...
  • 修改class类中this指向的三种方式初始原因第一种使用箭头函数第二种使用bind第三种使用proxy代理 初始原因 // 修改 class 类中的this指向 class Person{ get(){ console.log(this); this.eat(); } eat(){ ...
  • this指向

    千次阅读 2019-12-26 13:01:40
    系统的汇总一下this
  • 不同调用情况下同一个this的指向都可能不同,同时我们也可以手动修改this指向。 一、默认绑定 如下图所示 var a = 1 var obj = { a: 2, } function fn() { // 'use strict' console.log(this.a) } fn() ...
  • 写在元素上onclick里面的函数changeContent,相当于函数直接调用,函数里面使用的this指向全局对象window,而不是指向该元素那么要获取onclick所在节点的object,我们则需要在调用function时就把this传递过去:&...
  • 1.直接调用 函数() this指向window 2.作为对象的属性 对象.函数() this指向调用函数的对象 3.事件触发调用 element.onclick = 函数() this指向触发事件的元素 4.定时器内部 setInterval this指向window 5....
  • 全面解析this指向问题!

    千次阅读 多人点赞 2020-05-07 01:40:00
    文章目录调用位置绑定规则一、 默认绑定严格模式二、隐式绑定隐式丢失三、显示绑定硬绑定API调用的“上下文”四、new绑定箭头函数中的this指向判断this的优先级 调用位置 在理解this得绑定过程之前,首先要理解调用...
  • js中的this指向和改变this指向的方法

    千次阅读 2016-09-19 20:52:18
    彻底理解js中this指向,不必硬背。  首先必须要说的是,this指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,...
  • this是Javascript语言的一个关键字。...1.this指向的形式4种 a.如果是一般函数,this指向全局对象window; b.在严格模式下"use strict",为undefined. c.对象的方法里调用,this指向调用该方法的对象. d.构造...
  • this 指向问题是入坑前端必须了解知识点,现在迎来了ES6时代,因为箭头函数的出现,所以感觉有必要对 this 问题梳理一下,遂有此文 在非箭头函数下, this 指向调用其所在函数的对象,而且是离谁近就是指向谁(此...
  • 更改this指向的方法及其区别

    万次阅读 多人点赞 2019-05-12 10:39:18
    今天给朋友们带来更改this指向的三种方法,以及它们的区别: 一:call用法 window.color = 'red'; document.color = 'yellow'; var s1 = {color: 'blue'}; function changeColor () { console.log(this.color); } ...
  • (2)箭头函数中的this指向 :访问上一个作用域的this 说人话:函数在哪个作用域声明,this就是谁 (本质是通过作用域链访问上一个作用域中的this) (3)箭头函数与function函数this区别 function函数 : 谁调用我,我...
  • this指向为undefined

    千次阅读 2019-03-20 11:15:32
    普通函数: function show() { console.log(this) } show() // 打印结果:Window 在严格模式下: 'use strict' function show() { console.log(this) ...如果实在react中出现 this指向为undefined ...
  • this指向详解及改变它的指向的方法

    万次阅读 多人点赞 2017-10-22 17:54:56
    一、this指向详解this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话不那么严谨,作为一般情况下是可以的)再加下面的补充,就...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 349,339
精华内容 139,735
关键字:

修改this指向