标签: this

  • JavaScript Function bind

    JavaScript bind 函数允许返回一个跟源函数一样的绑定函数。绑定函数与源函数区别在与绑定函数的 this 已经被 bind 修改。

    函数定义

    new Function().bind(this, arg0, arg1…)

    代码示例

    function sayHello(guest) {
    	console.log('Hello ' + guest + ', I am ' + this.age + ' years old');
    }
    sayHello('Yue');
    
    var me = {
    	name: 'Seven',
    	age: '24'
    };
    
    var sayHi = sayHello.bind(me);
    sayHi('Yue');
    

    执行结果

    JavaScript bind

    尽管没有通过调用成员方法而是直接执行函数 sayHi(‘Yue’),sayHi 内部的 this 仍然指向了对象 me,而不是默认的 window。

    从控制台可以看到 sayHi 已经被“编译”为本地方法。

    bind 函数的可选参数 arg0、arg1 等是绑定到源函数对应的第0个参数、第一个参数。执行绑定函数时自动传递已绑定的参数。

    与 bind 相比,apply 和 call 方法是在函数执行时改变 this,bind 可以理解为在函数定义时改变 this。

    apply、bind、call 对比

    函数名 参数列表 说明
    apply (this_arg, arguments_array) 调用函数,通过 this_arg 替代源函数默认的 this,arguments_array 是传递给函数的参数列表

    var A = {
    	name: 'A',
    	sayHi: function(guest) {
    		console.log('Hi ' + guest + ', I am ' + this.name);
    	}
    }
    var me = {name: 'Seven'};
    A.sayHi('Yue');
    A.sayHi.apply(me, ['Yue']);
    
    bind (this_arg, arg0, arg1…) 创建与源函数函数体一样的绑定函数,并根据 this_arg 和 arg0、arg1 等分别修改绑定函数的 this 和 默认参数
    call (this_arg, arg0, arg1…) 调用函数,通过 this_arg 替代源函数默认的 this,arg0、arg1 等是传递给函数的参数列表

    var A = {
    	name: 'A',
    	sayHi: function(guest) {
    		console.log('Hi ' + guest + ', I am ' + this.name);
    	}
    }
    var me = {name: 'Seven'};
    A.sayHi('Yue');
    A.sayHi.call(me, 'Yue');