javascript-基础-bind/call/apply

bind/call/apply

bind函数

创建一个函数，不论如何调用都具有相同的this值

this.num = 9; 
var module = { 
    num: 81,
    getNum: function(){
        console.log(this.num);
    }
};
 
module.getNum(); // 81 ,this->module
 
var getNum = module.getNum;
getNum(); // 9, this->window or global
 
var boundGetNum = getNum.bind(module); 
boundGetNum(); // 81,this->module

偏函数

使用bind()我们设定函数的预定义参数,然后调用的时候传入其他参数

function list() { 
  return Array.prototype.slice.call(arguments);
}
 
var list1 = list(1, 2, 3);
console.log(list1);// [1, 2, 3]
 
// 预定义参数37
var leadingThirtysevenList = list.bind(undefined, 37);
 
var list2 = leadingThirtysevenList();
console.log(list2);// [37] 
 
var list3 = leadingThirtysevenList(1, 2, 3);
console.log(list3);// [37, 1, 2, 3] 

setTimeout or setInterval

setTimeout()的this指向window/global对象，使用类方法，需要this指向类的实例

function Bloomer() { 
  this.petalCount = Math.ceil(Math.random() * 12) + 1;
}
 
// 1秒后调用declare函数
Bloomer.prototype.bloom = function() { 
  window.setTimeout(this.declare.bind(this), 1000);
};
 
Bloomer.prototype.declare = function() { 
  console.log('我有 ' + this.petalCount + ' 朵花瓣!');
};
 
var test = new Bloomer();
 
test.bloom();

绑定函数作为构造函数

function Point(x, y) {
    this.x = x;
    this.y = y;
}

Point.prototype.toString = function() {
    console.log(this.x + ',' + this.y);
};

var p = new Point(1, 2);
p.toString(); // 1,2

var YAxisPoint = Point.bind(null,10);
var axisPoint = new YAxisPoint(5);
axisPoint.toString(); // 10,5

console.log(axisPoint instanceof Point); // true
console.log(axisPoint instanceof YAxisPoint); // true
console.log(new Point(17, 42) instanceof YAxisPoint); // true

call

call([thisObj[,arg1[, arg2[, [,.argN]]]]])
thisObj传入一个对象，call的上下文就换成thisObj的上下文

<input type="text" id="myText"   value="input text">
<script>
    function Obj(){this.value="object";}
    var value="global vari";
    function Fun1(){alert(this.value);}

    window.Fun1();   //global 变量
    Fun1.call(window);  //global 变量
    Fun1.call(document.getElementById('myText'));  //input text
    Fun1.call(new Obj());   //对象！
    window.Fun1(); //global 变量
</script>

myfunc.call，本身是调用myfunc,但是传入了func，这样就会引用func中的参数，对this的内容进行覆盖
后续传入的值都作为myfunc的参数

<script>
    var func=new function(){this.a="func"}
    var myfunc=function(x){
        var a="myfunc";
        alert(this.a);
        alert(x);
    }
    myfunc.call(func,"var");
</script>

call实现继承：
在函数内部调用call方法，能继承到全部的函数

function Animal(){
    this.name= 'animal';
    this.say = function(){
        console.log(this.name);
    }
    this.walk= function () {
        console.log('I can walk');
    }
}

function Duck(){
    Animal.call(this);/*这样，就实现了凡是有构造函数Duck  new处理的对象就会继承Animal上的属性（name）和方法（say）*//*但是Animal的原型上面的属性和方法不会被继承。*//*也就是说通过这种方法只会继承实例属性，而不能继承原型属性。*/
    this.name='duck'
    this.color = 'white';
}

var duck = new Duck();
duck.say();//animal
duck.walk()

例子

function add(a, b)
{
  alert(a + b);
}
function sub(a, b)
{
  alert(a - b);
}
add.call(sub, 3, 1);
//输出为4

例子

function Animal() {
  this.name = 'Animal';
  this.showName = function () {
    alert(this.name);
  }
}
function Cat() {
  this.name = 'Cat';
}
var animal = new Animal();
var cat = new Cat();
//通过call或apply方法，将原本属于Animal对象的showName()方法交给对象cat来使用了。  
//输入结果为"Cat"  
animal.showName.call(cat, ',');
//animal.showName.apply(cat,[]);
//cat

实现多重继承

var s1 = function(name){
  this.name = name;
}

var s2 = function(sex){
  this.sex = sex;
}

var s3 = function(age){
  this.age = age;
}

var Student = function(name,sex,age,score){
  s1.call(this,name);
  s2.call(this,sex);
  s3.call(this,age);
  this.score = score;
}

Student.prototype.construction = Student;
var s = new Student('jack','male','12','100');
console.log(s.name); //输出:jack
console.log(s.sex);  //输出:male 
console.log(s.age);  //输出:12
console.log(s.score);//输出:100

这样可以把功能模块拆分开，最后合并起来实现多重继承

apply

apply([thisObj[,argArray]])
其他和call一样，第二个参数为一个数组，作为传入的参数列表