• 技术文章 >web前端 >js教程

    js闭包中this指向的解决方法(代码)

    不言不言2018-08-23 15:47:01原创1430

    本篇文章给大家带来的内容是关于js闭包中this指向的解决方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    下面是一个问题,对象方法中定义的子函数,子函数执行时this指向哪里?
    三个问题:
    (1)以下代码中打印的this是个什么对象?
    (2)这段代码能否实现使myNumber.value加1的功能?
    (3)在不放弃helper函数的前提下,有哪些修改方法可以实现正确的功能?

    var myNumber = {
      value: 1,
      add: function(i){
        var helper = function(i){
            console.log(this);          
            this.value += i;
        }
        helper(i);
      }
    }
    myNumber.add(1);

    1.this指向window对象(因为匿名函数的执行具有全局性,所以其this对象指向window);
    2.不能实现value加1(每个函数在被调用时都会自动取得两个特殊变量,this和arguments,内部函数在搜索这两个对象时,只会搜索到其活动对象为止,所以不能实现访问外部函数的this对象);
    3.修改代码实现正确功能
    方法一:

    var myNumber={
        value:1,
        add:function(i){
            var that=this;//定义变量that用于保存上层函数的this对象
            var helper=function(i){
                 console.log(that);
            that.value+=i;
        }
        helper(i);
        }
    }
    myNumber.add(1);

    方法二:

    var myNumber={
        value:1,
        add:function(i){
            var helper=function(i){
                this.value+=i;
            }
            helper.apply(this,[i]);//使用apply改变helper的this对象指向,使其指向myNumber对象
        }
    }
    myNumber.add(1);

    方法三:

    var myNumber={
        value:1,
        add:function(i){
            var helper=function(i){
                this.value+=i;
            }.bind(this,i);//使用bind绑定,和apply相似,只是它返回的是对函数的引用,不会立即执行
            helper(i);
        }
    }
    myNumber.add(1);

    相关推荐:

    js如何判断浏览器是pc端还是移动端 ?(两种方法)

    js中自执行函数进行调用的两种方法

    以上就是js闭包中this指向的解决方法(代码)的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:js闭包
    上一篇:js如何判断浏览器是pc端还是移动端 ?(两种方法) 下一篇:js实现克隆并对5种数据类型进行值复制
    千万级数据并发解决方案

    相关文章推荐

    • 浅析nodejs项目中的package.json的常见配置属性• angular学习之聊聊两种类型的表单• 简单总结JavaScript事件• JavaScript怎么实现基础类型和对象一样有属性和方法• 完全掌握JavaScript的Date对象
    1/1

    PHP中文网