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 red

banana = {
    color: "yellow"
}
apple.say.call(banana);     //My color is yellow
apple.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.log
function 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(); // undefined
var 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)());      //81
console.log(foo.getX.call(obj));        //81
console.log(foo.getX.apply(obj));       //81

Code Example：

//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 red

banana = {
    color: "yellow"
}
apple.say.call(banana);        //My color is yellow
apple.say.apply(banana);    //My color is yellow

//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(5, 458 , 120 , -215)    //458

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


function log(msg)　{
  console.log(msg);
}

log(1);
log(1,2);

function log(){
  console.log.apply(console, arguments);
};


log(1);
log(1,2);

function log(){
  var args = Array.prototype.slice.call(arguments);
  args.unshift('(app)');

  console.log.apply(console, args);
};

//bind 示例
var foo = {
    bar : 1,
    eventBind: function(){
        var _this = this ;
        $('.someClass').on('click',function(event) {
            /* Act on the event */
            console.log(_this.bar);        //1
        });
    }
}

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(); // undefined
var func = bar.bind(foo);
func(); // 3

var obj = {
    x: 81,
};

var foo = {
    getX: function() {
        return this.x;
    }
}

console.log(foo.getX.bind(obj)());        //81
console.log(foo.getX.call(obj));        //81
console.log(foo.getX.apply(obj));        //81