zoukankan      html  css  js  c++  java
  • JavaScirpt的this指向 apply().call(),bind()个人笔记

    写在前头: 本站内容为个人学习记录,纯属个人观点,不喜勿喷,欢迎指正!

    笔记记录缘由:JavaScript的流行趋势已经势不可挡,衍生的AngularJs,Node.js,BootStrmp中小企业的后端开发越来越没有优势,IT不是一个可以完全靠经验说话的岗位,IT改变生活,作为一个三年的.Net程序员现在深深的感受到守旧其实就是害怕,躲避时代的进度,人生需要激情,需要动力!

    正文:

    一、apply().call(),bind()是做什么的?

         这三个都是改变方法中this指向的

    二、this是什么东西?

         this指你当前调用的方法的执行对象,例如setTimeout方法的this

    1 setTimeout(function(){
    2                 console.log(this)
    3            },1000)

     输出结果:

    Window {external: Object, chrome: Object, document: document, Alax: Object, a2: Object…}

    因为setTimeout的完全调用时Window.setTimeout  它属于Window对象的一个方法。

    再定义一个对象

    var Alax={
             name:'Alax',
             age:27,
             fuc:function(){            return this.age;
             }
            }

    按理说使用console.log(Alax.fun)应该输出的27但实际情况是undefined,这是为什么呢?因为在Alax对象外调用时实际的作用对象时Window,而Window是不包含age属性的,也就是说this指向改变了需要重新指定,此处先记着等讲完概念在对比你心中所想

    三、call,apple,bind三者的区别

        1.  参数对比

             call的参数格式是(thisvalue,arg1) 

             apply的是(thisvalue,[arg1,ar2...]) 

             bind的参数格式是(thisvalue,arg1,ar2...) 

             thisvalue指的是要传递的this指向,后面的参数是非必输跟方法的参数一一对应,传入了都可以用arguments获取

       2.返回结果对比

           call和apple指将所有参数传递到arugements,并直接返回调用结果

           bind指将返回一个传入值在方法运行后返回一个新的函数 需要加上()调用

      总结:上面的调用方式可以是

             

    console.log((Alax.fuc).call(Alax))
    console.log((Alax.fuc).apply(Alax))
    console.log((Alax.fuc).bind(Alax)())

    附上参数调用

    Alax={
             name:'Alax',
             age:27,
             fuc:function(num){
                   this.age+=num
                   return this.age;
             }
        }
     console.log((Alax.fuc).call(Alax,1))
     console.log((Alax.fuc).apply(Alax,[1]))
     console.log((Alax.fuc).bind(Alax)(1))
  • 相关阅读:
    数据库web项目对数据库的操作
    Java中的反射机制
    Java中的注解
    CSS3与弹性盒布局
    MySQL存储过程实现分页及变量的定义
    开博第一文
    mpy开发物联网系列:1.mpy与服务器数据库方案
    VBS常用方法
    VBS统计页面加载时间脚本
    Ubantu系统下安装Mysql问题:configure: error: No curses/termcap library found
  • 原文地址:https://www.cnblogs.com/DDSkay/p/7704055.html
Copyright © 2011-2022 走看看