Javascript基础进阶(七) call(),apply(

2018-08-01  本文已影响0人  js_冠荣

call,apply,bind是做什么的?

都是天生自带的方法(Function.prototype),
所有的函数都可以调取这三个方法

一般用来指定this的环境!(改变this指向)
首先咱们复习一下之前学到的知识点:

// 1
var a = {
    user:"浮云先生",
    fn:function(){
        console.log(this.user);
    }
}
var b = a.fn;
b(); //undefined



// 2
var a = {
    user:"浮云先生",z
    fn:function(){
        console.log(this.user);
    }
}
a.fn(); //浮云先生

如果有不明白的同学请看第六章关于this指向。
但是有时候我们不得不将这个对象保存到另外的一个变量中,那么就可以通过以下方法:

1. call()

fn.call(context, para1, ...)
把fn函数执行,并且让fn函数中的this变为context,而para1和...是给fn传递的实参

var a = {
    user:"浮云先生",
    fn:function(){
        console.log(this.user); //浮云先生
    }
}
var b = a.fn;
b.call(a);

通过在call方法,给第一个参数添加要把b添加到哪个环境中,简单来说,this就会指向那个对象。
call方法除了第一个参数以外还可以添加多个参数,如下:

var a = {
    user:"浮云先生",
    fn:function(s,ss){
        console.log(this.user); //浮云先生
        console.log(s+ss); //3
    }
}
var b = a.fn;
b.call(a,1,2);

2. apply()

fn.apply(context, [para1, ...])
把fn函数执行,并且让fn函数中的this变为context,而para1和...是给fn传递的实参

var a = {
    user:"浮云先生",
    fn:function(){
        console.log(this.user); //浮云先生
    }
}
var b = a.fn;
b.apply(a);

同样apply也可以有多个参数,但是不同的是,第二个参数必须是一个数组,如下:

var a = {
    user:"浮云先生",
    fn:function(s,ss){
        console.log(this.user); //浮云先生
        console.log(s+ss); //11
    }
}
var b = a.fn;
b.apply(a,[10,1]);

注意:如果call和apply的第一个参数写的是null,那么this指向的是window对象

var a = {
    user:"浮云先生",
    fn:function(){
        console.log(this); //Window 
    }
}
var b = a.fn;
b.apply(null);

3.bind()

bind方法和call、apply方法有些不同,不过他们都是用来改变this指向。

var a = {
    user:"浮云先生",
    fn:function(){
        console.log(this.user);
    }
}
var b = a.fn;
var c = b.bind(a);
console.log(c); // fn---> function() { [native code] }
c(); // ---> 浮云先生

实际上bind方法返回的是一个修改过后的函数.那我们赋值一个变量执行函数得到浮云先生。

同样bind也可以跟多个参数,如下:

var a = {
    user:"浮云先生",
    fn:function(e,d,f){
        console.log(this.user); //浮云先生
        console.log(e,d,f); //10 1 2
    }
}
var b = a.fn;
var c = b.bind(a,10);
c(1,2);

觉得写的不错的小伙伴点赞加关注哦! (=・ω・=)

上一篇下一篇

猜你喜欢

热点阅读