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);
觉得写的不错的小伙伴点赞加关注哦! (=・ω・=)