前端学习笔记——call、apply、bind 方法

改变函数内this指向，JavaScript提供了三种方法 call() apply() bind()

1. call()

主要作用

1. 可以调用函数， 改变函数内this指向
2. 的主要作用可以实现继承

使用下面的例子来演示call()的作用

var o = { 
  name:'andy' 
}
function foo(){
  // 没有使用 call() 修改this指向时，默认指向 Window
  console.log(this) // Object [global] {...}
}

foo()

var o = { 
  name:'andy' 
}

function foo(a+b){
  console.log(this) // { name: 'andy' }
  console.log(a+b)  // 3
}

// 使用 call() 修改了this指向对象 o, 并传入两个参数
foo.call(o,1,2)

实现继承

function Father(uname, age, sex){
  this.uname = uname;
  this.age = age;
  this.sex = sex;
}

function Son(uname, age, sex){
  Father.call(this, uname, age, sex);
}
var son = new Son('周星驰', 18, '男');
console.log(son)  // { uname: '周星驰', age: 18, sex: '男' } 

2. apply()

主要作用

1. 调用函数，可以改变函数内部this指向
2. 但是apply的参数必须是数组(伪数组)
3. apply的主要应用, 可以利用apply借助于数学内置对象求最大值

例子：

var o = {
  name:'andy'
};

function fn(arr) {
  console.log(this); // { name: 'andy' }
  console.log(arr);  // pink
  console.log(typeof(arr));  // String   apply 会将数组转化成字符串
};

fn.apply(o,['pink'])

var arr = [1,6,3,2,4,9,8]
var max = Math.max.apply(Math, arr)
console.log(max)  // 9

3. bind()

主要作用

1. 不会调用原来的函数，可以改变原来函数内部的this指向
2. 返回的是原函数改变this之后产生的新函数
3. 改变定时器this指向
4. 如果有的函数我们不需要立即调用，但是又想改变中国函数内部的this指向，此时用bind

var o = {
  name:'andy'
};

function fn(a,b) {
  console.log(this);  // { name: 'andy' }
  console.log(a + b); // 3
}

var f = fn.bind(o, 1, 2);
f();

改变定时器this指向

setTimeout(function(){
  this.xxx = xxx //...
}.bind(this),3000)

推荐学习文章：细说 call、apply 以及 bind 的区别和用法