您的位置:首页 > 移动开发

js中call,apply与bind三函数

2016-08-08 09:44 609 查看
js的call,apply,bind方法,切换/固定this指向

func.call(thisValue, arg1, arg2, ...);

第一个参数就是this所要指向的那个对象,后面的参数则是函数调用时所需要的参数.

例:

function add(a, b) {

    return a + b;

}

add.call(this, 1, 2);

call方法的一个应用是调用对象的原生方法

var obj = {};

obj.hasOwnProperty('toString'); //false

obj.hasOwnProperty = function () {

    return true;

}

obj.hasOwnProperty('toString'); //true

object.prototype.hasOwnPRoperty.call(obj, 'toString'); //false

function.prototype.apply()

apply方法和call类似,也是改变this指向,然后调用该函数,唯一的区别是:它接受一个数组作为函数执行

时的参数,使用格式如下:

func.apply(thisValue,[arg1, arg2, ...]);

function f(x, y) {

    return x + y;

}

f.call(this,1,1);

f.apply(this,[1, 1]);

function.prototype.bind()

bind方法用于将函数体内的this绑定到某个对象,然后返回一个新函数.

var print = console.log;

print(4);

//报错,因为此时console.log中的this对象已经不指向console了

使用bing解决这个问题

var print = console.log.bind(console);

print(2);

例:

var counter = {

    count: 0,

    inc: function() {

        this.count++;

    }

};

counter.count; //0

counter.inc();

counter.count(); //1

this指向莫名的改变

var counter = {

    count: 0,

    inc: function() {

        this.count++;

    }

};

var func = counter.inc;

func();//此时this指向window,莫名改变了...

如何解决这个问题,使用bind

var func = counter.inc.bind(counter);

将inc内部的this绑定到counter对象上

bind比call和apply方法更屌的是,除了绑定this之外,还可以绑定原函数的参数.

var add = function(x, y) {

    return x * this.m + y * this.n;

};

var obj = {

    m: 2,

    n: 2

};

var newAdd = add.bind(obj, 5);

newAdd(5); //20

call方法与bind方法的结合使用

[1, 2, 3].slice(0, 1);

Array.prototype.slice.call([1, 2, 3], 0, 1);

Array.prototype.slice.apply([1, 2, 3], [0, 1]);

var slice = Function.prototype.call.bind(Array.prototype.slice);

slice([1, 2, 3], 0, 1);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: