咏竹莉
where there is a will,there is a way

call()、 apply(),bind()的区别

相同点: 都是重定向this指针的方法

不同点: 

   1. call 和apply 的第二个参数不同,apply 第二个参数必须传入一个数组,call 第二个参数可以是任意类型

   2. bind 除了返回是函数以外,它的参数和call一样 (bind方法后面除了对了个()外,结果返回都一致)

 

 1. call()、apply()、bind() 都是用来重定义this对象的

  如:

 

        var name = 'xiaozhu', age = 17
        var obj = {
            name: 'xiaop',
            // age: 18,
            objAge: this.age,  
            myFunc: function(){
                // console.log(this);  // 此处的this指向obj {name:'xiaop', objAge: 17, myFunc: f}
                console.log(this.name + '年龄' + this.age)
            }
        }
       
        var nihao = {
            name: 'xiaozhu',
            age: 20
        }

 

  

obj.myFunc.call(nihao);       // xiaozhu年龄20
obj.myFunc.apply(nihao);      // xiaozhu年龄20
obj.myFunc.bind(nihao)();     // xiaozhu年龄20

 以上除了bind方法后面多了个() 外,结果返回都一致!

 bind返回的是一个新函数,你必须调用它才会被执行。

 

2. 对比call、bind、apply传参情况

var name = '小王', age = 17;

var obj = {

  name: '小张', 

  objAge: this.age,

  myFun: function(fm,t) {

     console.log(this.name + " 年龄 " + this.age , "来自"+ fm + "去往" + t);

 }

var db = {

   name: '德玛',

   age: 99

}

obj.myFun.call(db, '成都', '上海');           //  德玛 年龄 99 来自 成都去往上海

obj.myFun.apply(db, ['成都','上海']);      //  德玛 年龄 99 来自 成都去往上海

obj.myFun.bind(db, '成都','上海')();      // 德玛 年龄 99 来自 成都去往上海

obj.myFun.bind(db, ['成都','上海'])();      // 德玛 年龄 99  来自成都,上海去往undefined

 

 

3. call() 使用

obj1(method).call(obj2, argument1, argument2)

如上,call的作用就是把obj1的方法放到obj2上使用,后面的argument1... 这些作为参数传入

 function add(x,y){
      return x + y
}
function minus(x,y){
      return x - y
}
console.log(add.call(minus, 1,2));   // 3

 

这个例子中的意思就是用add来替换minus ,  add.call(minus, 1,2) == add(1,2)   

A.call(B, x,y):  就是把A函数放到B中运行, x和y是A方法的函数

用call 来实现继承, 用this可以继承myfunc1 中的所有方法和属性

 

function func1(name) {
this.name = name;
this.sing = function (song) {
  console.log('i sing', song)
}
}
function func2() {
func1.call(this,'xiaozhu'); // func2 通过this继承func1 的属性和方法
}
const func3 = new func2();
console.log(func3)
func3.sing('夜空中最亮的星'); // i sing 夜空中最亮的星
console.log(func3.name); // xiaozhu

 

 

 

posted on 2021-04-25 17:15  咏竹莉  阅读(156)  评论(0)    收藏  举报