• JavaScript的bind方法




    bind的机制

    var foo = function(){}
    var bar = foo;
    
    console.log(foo === bar) //true
    
    /*--------------------------------------*/
    
    var foo = function(){}
    var bar = function(callback1,callback2){
        console.log(callback1 === callback2)  //true
    }
    
    bar(foo,foo)
    
    /*--------------------------------------*/
    
    var foo = function(){}
    var bar = function(){}
    
    console.log(foo === bar) //false    //两个函数,不在同一内存地址中,所以返回了false

    对象有属性和方法,函数也是对象的一种,我们也可以称之为函数对象,既然是对象那么就有熟悉和方法,bind就是函数对象下面的一个方法。
    我们都知道对象是引用类型,引用的是内存中的一个地址,上面的callback1 === callback2这两个指针就指向了一个地址所以为true。


    var foo = function(){}
    var fooBind = foo.bind()
    
    console.log(foo === fooBind) // false
    
    /*--------------------------------------*/
    
    var foo = function(){}
    var fooBind = foo.bind()
    
    var bar = function(callback1,callback2){
        console.log(callback1 === callback2)  //false
    }
    
    bar(foo,fooBind)

    上面的代码中的 foo.bind()的返回值是一个新的函数,其实是将foo拷贝了一份,他们两个已经没有了任何关系,也就是说foo和fooBind已经不在同一个内存地址中了,所以返回了false。


    var foo = function(){}
    var fooBind1 = foo.bind()
    var fooBind2 = foo.bind()
    
    console.log(fooBind1 === fooBind2) //false

    虽然上面的fooBind1和fooBind2都使用了foo.bind()进行了拷贝,但他们也并没有任何关系,完全两个独立的函数。


    var obj = {key:"value"}
    var foo = function(){
        return this;
    }
    var fooBind1 = foo.bind(obj)
    var fooBind2 = foo.bind(obj)
    
    console.log(  fooBind1() === fooBind2 ()   )    //true   他们都指向了同一个obj
    console.log(  fooBind1 === fooBind2         )    //false     他们分别是存在两个不同内存地址中的,与函数中的this无关,所以返回了false
    

    有人就会这么想了,bind方法的主要目的是为了改变函数内的this指向,那如果我用bind方法拷贝了一个fooBind1和一个fooBind2让他们中的this都指向obj这个对象,那这fooBind1和fooBind2还在同一内存地址中吗






    bind的用法

    var obj = {key:"value"}
    var foo = function(){
        console.log(this)    //obj
    }.bind(obj)
    
    foo()
    
    /*--------------------------------------*/
    
    var obj = {key:"value"}
    var foo = function(){
        console.log(this)    //obj
    }
    
    foo.bind(obj)()         //也可以这样
    

    让foo中的this指向obj。注意:foo已经并不是foo本身了,而是调用了bind之后返回的一个新的函数


    var obj = {
    
        method:function(){
    
            setTimeout(function(){
    
                console.log(this)    //obj     注意:function(){console.log(this)}.bind(this) 返回值是一个函数
    
            }.bind(this),1000)
        }
    }
    
    obj.method()
    
    /*--------------------------------------*/
    
    var obj = {
        method:function(){
    
            var arg = function(){
                  console.log(this)     //obj
            }
    
            var argBind = arg.bind(this)    //返回来的argBind函数与arg函数完全没有任何关系。
    
            setTimeout(argBind,1000)      //与上面的写法完全相等
        }
    }
    
    obj.method()
    

    简单的使用

     
  • 相关阅读:
    (zt)在PHP中使用全局变量
    (zt)Flash与C++交互
    (zt)关于Flash Socket通信的安全策略问题的一点心得
    (zt)svn 随服务器启动
    使用InstallShield安装和卸载SQL Server数据库(利用sql脚本)
    异常查看部分代码
    VC为控件添加背景
    深入分析MFC文档视图结构
    VC数据库编程概述
    (转)WEB程序打包详解:(连接SQL2005数据库,修改配置文件,建立虚拟目录)
  • 原文地址:https://www.cnblogs.com/macliu/p/12076674.html
Copyright © 2020-2023  润新知