JS之apply()和call()的区别

╰+哭是因爲堅強的太久メ 2023-05-28 06:59 181阅读 0赞

一直没怎么去深入了解js的`apply()`和`call()`的知识，最近空闲就在做demo，总结了一些：

**- 相同特点**  
1. `apply()`和`call()`都是用于改变`this`指向，也就是改变作用对象。  
2. 调用的函数立即执行。

**- 不同点**  
`apply(obj,array)`只能接受两个参数，一个是改变指向的对象，另一个是要传递的参数的数组；而`call(obj,a,b,c,..)`可以接受很多个参数，第一个同样是改变指向的对象，后面其余的是要传递的参数。

**先通过简单的demo看看他们相同的特点作用：**

var name = 'Tom'
    var obj = { 
        name: 'Jsxj',
        age: 18,
        func: function(){ 
            console.log(this.name)
        }
    }
    var obj2 = { 
        name: 'Job'
    }
    obj.func() //Jsxj，this指向obj
    obj.func.call(this) //Tom，this指向window
    obj.func.apply(obj2) //Job，this指向obj2

比较一下不难看出：当没有apply()或call()时，调用`obj.func()`它的`this`指向永远是它所属的对象obj，所以获取的只能是obj内的name属性；而当调用了apply()或call()时，调用`obj.func()`它的指向就会改变为指定对象，获取指定对象内的name属性。

**稍微复杂的应用：**

var Obj1 = function(money, age) { 
        this.name = "Tom",
        this.money = money,
        this.age = age
        this.hi = function() { 
            console.log("hi, I'm" + this.name + " I have" + this.money + "and" + this.age)
        }
    }
    var Obj2 = function() { 
        this.name = "Jsxj",
        this.hello = function() { 
            console.log("hello," + this.name)
        }
        Obj1.call(this, 200, 18)
        //或者 Obj1.apply(this, [200, 18])
    }
    var person1 = new Obj1(500, 20)
    person1.hi()   //控制台输出：hi, I'mTom I have500and20
    var person2 = new Obj2()
    person2.hi()   //hi, I'mTom I have200and18
    person2.hello()   //hello,Tom

带有面向对象的知识点，但也不难理解。亮点在于`Obj2`方法中用了apply()或call()**调用了`Obj1`方法并改变了`Obj1`的this指向**，简单说也就是`Obj2`所属对象将拥有`Obj1`和`Obj2`的所有内容。我们在控制台再打印出person1和person2对象就更直观清楚了：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N4aml0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N4aml0_size_16_color_FFFFFF_t_70]: /images/20230528/481cc367f3eb45c9885e44882684d06b.png