深入浅出 妙用Javascript中apply、call、bind

https://github.com/chokcoco/apply-call-bind/tree/master

apply、call用法的简单示例

function fruits() {}fruits.prototype = {    color: "red",    say: function() {        console.log("My color is " + this.color);    }}var apple = new fruits;apple.say();    //My color is redbanana = {    color: "yellow"}apple.say.call(banana);     //My color is yellowapple.say.apply(banana);    //My color is yellow

apply 、 call 区别

注意apply传递的参数是数组，而call是按参数顺序传递

var func = function(arg1, arg2) {};func.call(this, arg1, arg2); func.apply(this, [arg1, arg2])

apply 、 call 用法示例

• 数组之间追加

var array1 = [12 , "foo" , {name "Joe"} , -2458];  var array2 = ["Doe" , 555 , 100];  Array.prototype.push.apply(array1, array2);  /* array1 值为  [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */

• 获取数组中的最大值和最小值

var  numbers = [5, 458 , 120 , -215 ];  var maxInNumbers = Math.max.apply(Math, numbers),   //458    maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458

• 验证是否是数组（前提是toString()方法没有被重写过）

functionisArray(obj){      returnObject.prototype.toString.call(obj) === '[object Array]' ;}

• 类（伪）数组使用数组方法

var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));

一道面试题目

//使用 log 代理 console.logfunction log(msg)　{  console.log(msg);}log(1);log(1,2);//优雅的方法function log(){  console.log.apply(console, arguments);};log(1);log(1,2);//添加一个 (app) 前缀function log(){  var args = Array.prototype.slice.call(arguments);  args.unshift('(app)');  console.log.apply(console, args);};

bind 用法简单示例

// 正常情况下使用变量保存 this 值var foo = {    bar : 1,    eventBind: function(){        var _this = this ;        $('.someClass').on('click',function(event) {            /* Act on the event */            console.log(_this.bar);     //1        });    }}// 使用 bind 进行函数绑定var foo = {    bar : 1,    eventBind: function(){        $('.someClass').on('click',function(event) {            /* Act on the event */            console.log(this.bar);      //1        }.bind(this));    }}

varfoo = {    x: 3}var bar = function(){    console.log(this.x);}bar(); // undefinedvar func = bar.bind(foo);func(); // 3

apply、call、bind 比较

var obj = {    x: 81,};var foo = {    getX: function() {        return this.x;    }}console.log(foo.getX.bind(obj)());      //81console.log(foo.getX.call(obj));        //81console.log(foo.getX.apply(obj));       //81