js中的call和apply简单演示

Posted 2020-09-26

     对于想要深入研究js的小伙伴们，call和apply好像就是基础中的基础，因为什么呢？如果你好好看过jq还有一些新的框架，你就会发现，他们最底层的封装方法就是各种回调。这样的好处就是省去了开发者要写大量代码去封装方法的时间，让开发者记住调用的方法，拿过来就能用，什么Agular,Vue.....其实扒开底裤，都是这些玩意，毕竟这些个框架没有创造新语言，都是基于原生js来搞得，用js来搞，那么你就得遵守js的原始规则，那么call和apply这两方法就是给了各个框架发挥想象力的空间了....

　　　好了说了这么多，大道理也不多讲了，直接上代码吧！

　　

　　     

 function aa(){
// (3)所以，aa中的this,指向bb
console.log(this)
this.say = function(n){
console.log(n)// ‘我是xx‘
}
}
function dd(){
console.log(this)
this.age = function(n){
console.log(n)// 33
}
}
// aa()在这里调用，实际上是在window里面进行了调用；
// 那么aa中的this,就指向了window
// 因为：谁调用了函数，函数的this就指向谁。
// aa();
function bb(){
// (1)在这里调用aa,你可以认为是在bb中调用了aa;
// (2)但其实是把bb的作用域，传入了aa中，
aa.call( this );

// call一个对象，就是单纯的继承；
// call多个对象，就是多重继承；
dd.call( this );
}

var cc = new bb();
cc.say(‘我是xx‘)
cc.age(22)

     就是个简单的小例子，这里面有几个关键的点，一个是aa和dd这两个函数实际上只是提供了两个方法而已，那么通过new了一下bb这个函数，那么aa，dd这两个函数的作用域就传到了bb这个函数中，第二个是通过传值，那么cc就可以调用bb里的作用域，那么cc.say(‘我是xx‘)就通过bb传递到aa函数里的say对应得函数，并且调用了say的函数，同理，dd也是如此。apply和他类似就不多说只不过在传值的时候是传的数组，而不是其他类型。

　　这样通过call方法，你可以想象，如果你要作一个函数通用方法的封装，那么这就是个很好的解决方法，你可以定义很多方法，然后记住方法名字，当你想用这些方法的时候，只需要把bb这样的函数new一下，赋值给一个变量，直接传值就好了，多么简单，代码的复用性得到质的提升！