首页 > 代码库 > js中的call和apply简单演示

js中的call和apply简单演示

     对于想要深入研究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一下,赋值给一个变量,直接传值就好了,多么简单,代码的复用性得到质的提升!

js中的call和apply简单演示